This year we've delivered several responsive websites created using a mobile-first design approach and I am loving the results. Our early attempts at adapting a single site to mobile, tablet, and desktop clients lead to less-than-stellar experiences for some users. So we decided to rethink our desktop-focused approach to create a more usable experience for all. Going mobile first forced us to think upfront about constraints, and that turned out to be a good thing.
Responsive web design process usually flows in a waterfall pattern from desktop to tablet to mobile. As the name implies, ‘mobile first’ asks designers to consider smartphone users before those on tablets or laptops. This reverses the normal process for creative types who typically prefer to conceptualize in the less-constrained desktop space or who begin designing for desktop simply out of habit.
The benefits of the mobile-first approach stem from a basic truth: In a fixed-length project, whatever is tackled first naturally has more thinking applied to it and what’s last is hurried. That’s important because mobile and desktop use cases are incredibly different, and while most of us have been designing desktop software for decades, the mobile web is new and evolving. Of the three client device contexts, mobile needs the most attention because of another fundamental truth about design: It takes more time to be reductive, to simplify.
In a typical design process, the desktop experience is as expansive as its creator's imagination. The tablet site usually winds up looking like Desktop’s baby brother—that is, the identical site with the whitespace condensed and primary navigation "packed up". The mobile UI will use patterns like drawers, carousels and stacked cards to squeeze all that content on to smaller mobile screens. That extra heft negatively impacts page performance, especially over spotty cellular networks. That's a drag on users leading to high bounce rates. As bad as that sounds, the real missteps in this model are the failure to consider the unique capabilities of these devices—touch, location, camera, accelerometer—and not taking into account the unique needs of users on the go.
It isn't an earth-shattering revelation that mobile sites benefit from additional attention and a bias towards simplicity. However, something unexpected occurs as a result: the tablet and desktop sites improve as well. Mobile-first acts like a forcing function, priming designers to focus conscious attention on the necessities. When considering the limited resources of the mobile user, the team naturally challenges the validity of each feature or content block (“Do mobile users really need this module?”). That naturally leads them to question the feature's value to all users ("No? Maybe we can cut this module completely"). More fluff ends up on the digital version of the cutting room floor. In essence, the mobile site gets adapted for larger screens, instead of the reverse, and it turns out desktop users appreciate lightweight, easy-to- use, and performant websites too.
Some might argue that with mobile first you’re simply shortchanging the desktop users as you optimize for smartphones. What if your desktop users appreciate or expect richer experiences? The applicability of mobile first for a given project depends on the nature of the content and audience. Luxury brands, for instance, do a lot of storytelling by leaning on large imagery and video to showcase their products. In those cases, we've found that if you want to beef things up, starting with mobile and then adding richness for tablet and desktop is easier than trying to cram complex desktop interactions on to mobile.
So there you have it: A simple change in the design process winds up impacting the user experience positively and reduces complexity in development. What's not to love?