Design for Mobile First

A mobile site is required; it is not a nice-to-have. Mobile Internet usage will be more frequent than desktop Internet usage in the near future, so it’s time to stop adapting desktop websites to fit on mobile devices. We’ve seen the rise of responsive layouts, and while they offer an elegant solution for resizing components for varying screen size, they do little to address the true differences between mobile and desktop usage. Both types of sites need to be designed, but from now on we start with mobile.

Mobile devices offer a number of constraints that do not exist on a desktop. They have smaller screens, and slower, less reliable connections (for now). Inputs are touch and gesture based. Mobile users access the Internet more often than desktop users. They might be waiting for a restaurant table, watching television, or even multi-tasking with their laptop. They often have less attention available than a desktop user. Most importantly, there is a growing number of users who access the internet almost exclusively via a mobile device. Design for these constraints first, and a desktop version will follow much more easily than constraining a desktop version for mobile.

By designing for mobile usage, we force ourselves to be succinct and simple. These constraints will not make our stakeholders happy, but abiding by them allows us to understand the priorities and hierarchy of the site much faster. Stakeholders are more willing to trim the unnecessary and compress their content when crafting a mobile site. Secondary content can be placed on separate screens, making the primary focus of each screen much clearer. When combined with clear and concise content, our users will understand what we want to show them in record time.

If our users can accomplish their tasks on a mobile site, our desktop site will be even better. We now have content that is quick and obvious, an interaction flow that takes little time and attention, and an obvious hierarchy of elements on each screen. Our site is lightweight enough for slow connections, and optimized for distracted users with short attention spans. We have clear calls to action, and large, easy-to-target controls. In theory, both usability and conversions should be better than ever.

While our mobile-optimized site works pretty well on a desktop, we need to take advantage of the platform. While fonts and controls will likely appear friendlier and easier to use, they will be so enormous as to require our users to move their cursors much farther when navigating our site. We also aren’t taking advantage of the extra real estate, screen resolution, computing power, more reliable connection, and precision and hover abilities of the mouse cursor.

When we repurpose our site for desktop usage, we can expand on any content that required trimming, but if our site already converts so well, adding more content will only be a distraction. The main things to do when repurposing a mobile-optimized site for desktop use is to ensure gesture-based interactions are replaced with mouse-friendly alternatives, and to add a little wow factor through the use of animations, transitions, hover states, and higher resolution images which are too much for a mobile site. We may also want to flatten some of the architecture to bring secondary content into sidebars, and provide a larger view of navigation. Just ensure that they don’t interfere with the primary tasks the users want to accomplish.