The emergence of responsive web design brings with it many benefits. Probably the most important is that you can produce a single website – with one code base and one URL – that is optimized for consumption on any device.
But responsive design also unleashes a host of new design and process challenges. How can a designer even begin to think about how the same content can work on many different screens and in so many different contexts?
A number of potential solutions have emerged, the most notable being Mobile First.
The Mobile First approach suggests designing a website first as though it will be seen on a mobile device (e.g., smart phone). This forces you to eliminate anything that isn’t essential and to simplify both the content and the display as much as possible in order to accommodate the limited screen real estate. Then, when you’ve finished the mobile design, you can think about how that content should look on a larger screen.
While the focus on simplification makes this approach appealing, I would argue that the most efficient, effective and logical methodology for most responsive design projects is actually a Tablet First approach.
Tablet First means that you start the design process by considering how the design will work on a full-sized tablet (e.g., an iPad). Then you can extrapolate from there about how to alter the design for a desktop computer and a smart phone.
Why Tablet First? It comes down to three factors: size, context and interaction models.
When designing for a tablet, you need to plan for two layouts: portrait and landscape. This task immediately starts the designer thinking about how content elements shrink or move as the page size or orientation changes.
A tablet’s resolution in landscape view is similar to that of a typical laptop browser. It’s therefore a small step from there to make a tablet’s landscape design work well on a laptop or even a desktop computer. Generally it’s a matter of deciding whether to make the elements larger on the page or to add more padding to either side of the page – or a combination of both.
In portrait view, the width tends to be narrower than a PC’s browser, so the designer explores how the columns of a page might shrink or stack. The layout will likely have to change a little more for displaying on a phone, but it’s certainly a smaller step than starting with a design for a phone and then having to figure out how to expand the content so that it works well on a desktop screen. Essentially, by starting with the mid-sized device, you end up with a simpler transition to both larger and smaller devices than if you were starting at either extreme.
Context is King
To design a successful user experience, you need to think about the context of the user. If you’re designing for a desktop computer, chances are the user will be sitting at a desk, either at work or home, and focused on a particular task, like shopping or writing an email. By bringing a laptop into the picture, the context changes a little – instead of home or work the person may be in a coffee shop or on an airplane, let’s say. But generally, the user is still sedentary and focused on a particular task.
When designing for a phone, however, the context can be very different. The user is often on the move, and often primarily focused on something other than the task being performed on the phone (e.g., checking email while waiting in line somewhere).
When designing for a tablet, the designer is forced to consider both contexts, as tablets are often used in similar ways as laptops and smart phones. As a result, Tablet-First designs are more likely to translate well to other devices than designs geared toward desktop computers or phones.
Interaction Models May Vary
One of the key differences in designing for mobile vs. desktop is the interaction model. Mobile is based on a touchscreen, tap and swipe model. Computers are based on a point and click model.
In general, it’s easier to adapt a tap and swipe experience to a point and click experience than vice versa. By designing for a tablet, which also uses a tap and swipe model, the designer is factoring in this dynamic from the get-go. As they move down to a smaller screen for phones, the interactions created for the tablet will work automatically. As they move up in size to a desktop, it is fairly intuitive where and how to add clickable affordances.
When you consider how much simpler it is to design for various screen sizes, contexts and interaction models, it’s easy to see why going Tablet First makes a lot of sense. For designers who are just beginning to create experiences for fully responsive websites, it’s the fastest way to get up to speed. And for veterans, it represents the fewest headaches by helping them avoid major design changes late in the project cycle.