Responsive design uses flexible grids, adaptive layouts and images to deliver an optimized web experience for users based on screen size and orientation.
Ethan Marcotte introduced the idea of responsive design in his A List Apart article in 2010 as he sought a single design solution to address the compartmentalization of experiences across myriad devices, platforms and browsers. In the past three years, responsive web design has evolved from a design philosophy to paradigm, with brands including Microsoft, Starbucks and Time Magazine recently launching successful responsive web experiences.
In the last six months, I’ve lead UX for three responsive web experiences1 and taught an advanced interactive design class at California College of the Art where students were required to apply responsive web design principles to their final projects. I’m a self-taught responsive web designer, frequenting A List Apart, Smashing Magazine and Media Queries for insights and best practices.
This article focuses on three key elements to plan a successful responsive web design experience:
- Selecting a responsive web design framework
- Choosing final grid sizes
- Adopting a collaborative, rapid prototyping approach
Selecting A Responsive Framework
There are multiple responsive frameworks to choose from, with Bootstrap (created by Twitter) and Foundation as the most popular frameworks among UX developers and technologists. With a majority of frameworks offering similar features, final selection comes down to technologist preference, with Bootstrap leading the way due to their vast component and paid theme libraries. In surveying my technologist network, preference and praise was unanimous for Bootstrap—not bad for a tool originally developed by Twitter for use as a front-end development styleguide.
Choosing Final Grid Sizes
Once a responsive framework has been selected, it’s time to choose which grid sizes to target across desktop, tablet and smartphone formats. Responsive design enables designers to target both the largest (2880×1800) and smallest (320×240) resolution displays simultaneously.
A screenshot of Bootstrap’s live grid, which shows a nine column layout.
Responsive frameworks provide creative teams with anywhere from 12 (Bootstrap) to 24 (Foundation v3) columns or “containers” through which to layout content. These columns fluidly resize to the browser width, meaning that a 12-column layout on a 768 pixel display would be 46 pixels per column, while on a 2880 pixel display, the same column would be 220 pixels.
When choosing grids, companies should cover minimal display sizes for desktop, tablet and smartphone. Here’s a quick overview:
Desktop: 980 or 1170 grid (optimized for 1024 or 1280 pixel display, respectively).
While screen resolutions continue to increase in size, optimizing for the 1024 pixel display covers desktop and tablet formats (see below); however, using the 1170 grid gives designers a larger canvas to work on.
Tablet: 724 pixel grid, optimized for 768 pixel display
For browser displays between 481 and 767 pixels, the layout will be fluidly resized.
Smartphone: 320 pixel grid (optimized for 320 to 480 pixel displays)
In Smartphone format, responsive design reduces to a single-column display.
In summary, a minimum of two grids (320 and 980) should be selected, covering desktop, tablet and smartphones; if there’s enough budget and time for a third solution, the recommendation would be to optimize for 320, 724 and 1170 grids.
Once a final grid is selected, the UX and creative teams should determine how many columns will be used in the layout. I’ve started adding a column key at the bottom of of information architecture documents, which helps creatives plan their design approach.
The 980 grid column key that I created for a project.
Adopting a Collaborative, Rapid-Prototyping Approach
Now that you’ve decided on a responsive framework and your final grids, it’s time to define the user experience as well as look and feel. Responsive web design lends itself well to agile development as content strategy, user experience and layout should be considered simultaneously across formats. Lean UX is the practice of bringing the true nature of work to light faster, with less emphasis on deliverables and greater focus on the actual experience being designed.2 Traditionally, agencies have separated the definition (strategy) and design phases, using high-fidelity information architecture artifacts to inform the creative process.3 Lean UX combines definition and design into a single phase, prioritizing collaborative ideation and problem solving through quick, iterative creative cycles. Clients should be invited as part of the wireframe process, as long as they can positively contribute to the Lean UX workflow.
The initial wireframe sketches prepared for the BrewLife website by Matt (Creative Director), Susan (ACD, Content Strategy), Mason (Technologist) and myself (UX).
Following internal review of the sketches, I created medium-fidelity wireframes in Omnigraffle that Matt and Mason used to build out creative and development, respectively.
Collaboration is invaluable in responsive web design as the entire presentation layer—content, usability and layout—can be optimized based on browser display, leading to hidden content, increased tap areas (buttons) and re-prioritization of messaging/call-to-actions. Content optimization decisions should be addressed by each lead—content strategy, UX and creative—in order to ensure a consistent strategy across the experience.
The BrewLife website in desktop, tablet and smartphone sizes with all content shown across device formats.
The Healthbox website removes images and section navigation in smartphone display.
In summary, responsive web design is a truly integrated process requiring all disciplines—UX, creative and technology—to collaborate for the entirety of the project. In the traditional agency model, account and planning/strategy teams often establish the overall project framework; responsive web design adds creative and technology teams as key stakeholders in initial conversations, as planning requires decisions that involve all practices.
(1) Website experiences include Healthbox, the BrewLife website and a product site scheduled to launch this fall.
(2) Lean UX: Getting Out of the Deliverables Business, Jeff Gothelf, published by Smashing Magazine (March 7, 2011)
(3) Agencies scope project costs based on the number of deliverables shared with clients, which is partially responsible for the adoption of separate phases and the need for high-fidelity UX and design deliverables.