Mobile First: A Key Ingredient In Great Responsive Design

2012.03.02

This post outlines a code-free, introduction to the “Mobile First” process of web design.  This is an important part of effective Responsive Web Design, and is closely related to the programming practice of Progressive Enhancement.

A New Process For Building Websites

It’s natural to think of a mobile website as a “miniature” version of a  desktop site - but this is not true. Conventional web design practices can’t accommodate for the many differences between how people interact on desktop and mobile devices. Mobile First is a strategy for building responsive sites that embraces the constraints of the mobile platform, and provides rich experiences for desktop.

Successful websites are designed so that mobile and desktop visitors access the same content in different ways. “Mobile First” puts a priority on design for mobile platforms in a website project; it’s a way of planning and structuring a website so it is well organized for every kind of device that may be viewing a site.

Websites Can’t (and shouldn’t) look the same on different devices

Conventional “Desktop First” web design evolved from print design. Companies establish guidelines to ensure their audience receives a consistent brand message across all marketing. The perception of a reliable brand image, builds the impression of reliable company, product, or service. This led to the idea of “cross-browser consistency”; Websites were expected to look exactly the same in every browser. The attempt was flawed from the start, but now has reached the breaking point. There is simply too much difference between a smartphone and wall mounted TV for anyone to expect a site should appear the same in both places.

Mobile Has Unique Differences From Desktop

Mobile introduces new elements to a website that didn’t exist in the desktop-only world. Design processes that “boil down” the desktop site into a mobile version ultimately fail to accommodate for these differences.  Each website project will have it’s on unique considerations for mobile but the following will effect every project.

Screen Size

Small mobile-sized screens have less real-estate for content then the desktop. If you have a website with a rich graphical layout that looks great on a desktop, and you scale it down to fit on a small screen, it quickly becomes both illegible and difficult to use.  Small Screens need very simple layouts and navigation to be effective they need a different treatment for how the design is organized.

Touch Screens Are Different From A Mouse

The size of a cursor on a mouse is tiny when compared to the width of a finger using a touch interface. To make a website effective for touch devices you need big easy-to-press buttons.

In addition many mobile devices use virtual keyboards. When active these take up half of the already small screen. Consider something as simple as a login form containing two text fields (email & password), and a login button. It’s a common mistake to see sites where the virtual keyboard covers the “Login” button making the site unusable. Some people may be motivated to “trouble shoot” a site and hide the keyboard, but many will simply go elsewhere to a site that “works”.

One Eye, One Thumb

Walking while using smartphoneMobile User has 'One Eye, One Thumb' on his smartphone Perhaps the largest difference between desktop and mobile website visitors is their attention level. Google has defined three common motivations for people using their mobile devices.

Repetitive Now – Looking at stock or weather updates.
Bored Now – Browsing while in transit or waiting in line.
Urgent Now – Getting directions to a business you’re visiting.

“Bored Now” is really the only context that is typically a part of the desktop user behaviour. On desktops people are far more focused and not surrounded with distractions. In contrast, mobile visitors often give a site partial attention as they’re usually multi-tasking. People browse their tablets during TV commercials, or use their smartphones to kill time waiting in line. Distracted users need very clear layouts and simple navigation to reach the content they want.

The Mobile First Design Processes

Mobile First is a new production process for web design. It’s about much more than just how a site is programmed; It presents a new model for how website projects are designed, structured and implemented. Just as its name implies, Mobile First involves turning the conventional web design process on its head by considering the mobile version of the site BEFORE the traditional, desktop version of the site.

On a new Mobile First web project, the team will be planning all sizes of the website for all platforms, but 80% of the focus should be on the mobile version.  This way, the tough decisions about content prioritization are made first on the most bare-bones version of the site: the mobile version.  You have to make tough decisions about what is most important, and place that in a simple main navigation.  All the remaining content is de-emphasized and will appear deeper in the website structure or in secondary navigation.

"Simple" Is Challenging

Reducing your website’s content to this simplified mobile-friendly format is more difficult then building a large complex desktop site.  Different stakeholders in your website will all want their mark on the site but to create an effective mobile site you’re forced to prioritize your content. This focus may be painful to accomplish, but well worth the effort. Your forced to consider your user’s needs above everything else – And this becomes the core of your site.

Layer On Complexity

Once the truly valuable content of a site is organized for the mobile version, you now have an excellent platform to layer on additional elements. You have a simple and efficient core on which you can add content and functionality appropriate to larger screens and more focused users. Generally speaking the design process would move up though your target devices from smartphones, then though tablets, netbooks, and finally laptops and desktops.

Well organized content with a streamlined interface is essential for mobile. It also happens to improve people’s experience on tablets, desktops, and every other platform.  Simple is effective, and effective is appreciated by everyone - especially customers.
 

Share

Author

Aidan Foster

Responsive design expert & owner of Foster Interactive, a Drupal focused studio based in Toronto, Canada.

If you like this post please share it.

Follow @finteractive on twitter

Additional Info

The idea of mobile first web development was outlined by Luke Wroblewski in 2009.  He’s since published a book title “Mobile First”. It outlines many examples how mobile first development has benefited mobile users and ultimately company profits. I recently attended a daylong workshop he ran and I highly recommend both the book and his speaking engagements.

Image Credits
istockphoto.com