Typically, when a web design client discusses a new site with their awesome new team of designers, the discussion will likely include examples of desktop websites that can serve as inspiration. This will lead to mockups of the desktop appearance of the new site. We are used to focusing on the desktop experience, only considering the mobile version of the site as an afterthought. This is dangerous – the layouts will differ, and mobile sites often require top-level reconsiderations of content and user experience. It’s time to transcend desktop-centric thinking. Designers and clients alike must increasingly ask ourselves to repeat the mantra, “But how does it look and function on mobile?”
The ‘Mobile First’ Approach
Way back in 2009 – a mere apartment lease ago to us, but a half-dozen lifetimes for the Internet – designer Luke Wroblewski began positing that we should reverse our desktop-first approach to web design. Websites and applications should be designed for mobile first, he said. His primary justification is that “mobile is exploding.” That trend has only accelerated since 2009; mobile web use is likely to eclipse desktop use this year.
Whether or not a mobile-first design process is appropriate for you, Wroblewski’s approach should cause a seismic shift in the way we think about the web. Focusing entirely on desktop is outdated and dangerous.
Our latest responsive project for www.miquon.org
Beyond the PSD
Historically, the first steps of a web design job have included presenting the client with Photoshop mockups of a website’s desktop appearance, from wireframe to final design. This is desktop thinking, and it is a “process that makes less and less sense in this multi-device age,” according to designer Brad Frost. Now that responsive design is the industry standard, we must design for a variety of shapes, sizes and formats. Photoshop mockups are static; responsive websites are dynamic. One way to handle this challenge is to present clients with two or three layout mockups (desktop browser and iPhone 5 portrait, for example), and discuss where and how the design and user experience should change. Another approach would be to confirm wireframes and then design in browser.
Repeat After Me
The responsive era is bigger than mobile. It doesn’t mean we should add one iPhone layout to our consideration and call it a day. Rather, it means expanding our expectations for a flexible website that can respond to a variety of browsers and devices – including those we have now and those that will emerge as the Internet continues to evolve. Those can be overwhelming concerns; we don’t always have time for a complete overhaul of the way we think. For now, the next time you encounter a client or colleague who is solely focused on desktop appearance, just ask, “But how does it look and function on mobile?” It’s a good start.