Storybook Mobile
Build mobile-ready UIs faster with contextual hints
Almost every frontend developer has been guilty of this at least once: you quickly build some bit of UI that works fine in Chrome on a powerful laptop with a good internet connection, and then you go ahead and ship it.
Now, your users have to contend with a brittle UI. It might be broken for people who use their keyboard to navigate, or it could look janky on a slow connection. Maybe it renders really poorly in mobile Safari.
It’s a lot of work to build solid UI components that perform well in all circumstances, and one area that’s particularly easy for desktop-based developers to overlook is mobile devices. Even if you adhere to all the best practices of responsive design and make sure that your UI looks good on smaller devices, you could still be shipping a product that is missing all the details that make an experience usable, smooth and performant on a touchscreen device.
Mobile-web browsers account for about 50% of website visits, yet many mobile web best practices are frequently overlooked. I became increasingly aware of this issue after noticing how differently various popular websites performed on my phone — they ran the gamut from totally smooth and intuitive UIs, to near unusable ones. After spending time collecting UX best practices for mobile, I decided that it would be helpful to create an interactive tool to proactively guide developers towards using mobile web best practices.
Storybook to the rescue
Having the right tools sets developers up for success, and I like Storybook because it gives me the mental space to think in isolated components and experiment with component states as I work. Storybook has a variety of helpful addons that make it easier to pick up on usability issues during the development process. For example, the Storybook accessibility addon scans the rendered HTML of your stories for possible accessibility issues.
Inspired by the accessibility addon, I built an addon that integrates the mobile hints and facts I compiled over the years directly into my daily workflow. Storybook Mobile provides hints and suggestions in context, depending on the content of each individual component as it has been rendered into the page.
How to create better UI components for the mobile web
If you’d like to see the addon in action, you can check out a working demo here. The Storybook Mobile addon scans your component to detect issues like too-small touch target sizes, missing :active CSS styles, and non-responsive images, and warns you about them in the addon panel.
Storybook Mobile also provides contextual hints for mobile web forms. Let’s take a quick look at some of the things it can surface regarding forms.
If you’ve ever filled in forms on your phone, you probably know how frustrating it can be. There are several simple ways to make sure that web forms work well on mobile devices, but they’re easy for developers to forget.
Take for example the case of a form input meant to take a zip code. An MVP version (ignoring the label) might look something like this:
<input type="text" />But we can do better. First, we should ensure that input fields are tagged with the correct autocomplete values. That allows devices to pre-fill fields with the proper information, which saves users time. Next, we can use appropriate HTML5 input type (and possibly inputmode) into ensure that when a user taps an input field, their device shows the appropriate style of keyboard.
Taking the above into account, a more thoughtful input tailored for zip code entry might look something closer to this:
<input type="text" inputmode="decimal" autocomplete="postal-code"/>Even if you know all about these params, it’s fairly easy to forget to optimize form input typeand autocomplete params every single time you build a form. The contextual hints offered by Storybook Mobile attempt to make it easier to get it right every time.
If this is the first time you’re hearing about mobile-optimized forms, or if you’d like to review, try experimenting with this tool I made to help you view different input configurations on a simulated mobile device.
How Storybook Mobile works under the hood
Storybook Mobile loads in a panel beside the currently displayed UI component. Every time you focus on a new story, Storybook Mobile gets sent a new payload of your story’s rendered HTML. It inspects the markup and the rendered component using various DOM APIs.
This workflow can be used to create other addons that surface different contextual hints and suggestions, beyond the scope of Storybook Mobile. If that sounds intriguing, you can learn more about creating Storybook addons here.
Install Storybook Mobile
First install the addon from npm:
yarn add -D storybook-mobile or
npm install --save-dev storybook-mobileNext, add storybook-mobile to your list of addons:
// .storybook/main.jsmodule.exports = { addons: [+ 'storybook-mobile' ]}
And if you want to dive into the code, check out the repo for Storybook Mobile here. Feel free to open an issue if you have any questions or suggestions!
