Responsive web design: one site for desktop, tablet and phone

Two years ago, mobile visits were a rounding error for most businesses and the usual answer was a stripped-down "m-dot" site, if anything. Three things have changed.

• Volume. Smartphones passed half of US mobile subscribers this spring according to Nielsen and comScore, and the iPad alone accounts for the majority of tablet traffic. Sites we manage now see 8 to 20 percent of visits from phones and tablets combined, higher for restaurants, local services and consumer brands.
• Fragmentation. A 320-pixel iPhone, a 480-pixel Android phone, a 768-pixel iPad in portrait, a 1,024-pixel iPad in landscape and the new Retina iPad at double density. Building a separate template for each is not sustainable.
• Google's recommendation. On June 6, Google published guidance for smartphone-optimized sites and named responsive design as its recommended configuration. One URL per page means your links, social shares and rankings all accrue to the same address.

Ethan Marcotte coined the term in 2010 and published the short book of the same name last year. The Boston Globe relaunch in September 2011 was the first large commercial site to prove it could work at scale, and Twitter's Bootstrap 2.0 release in January made a responsive grid freely available to any developer.

Three techniques, used together:

1. A fluid grid. Column widths are set in percentages rather than pixels, so the layout stretches and compresses with the window.
2. Flexible images. Images are sized to their container with a max-width: 100% rule, so they shrink on small screens rather than overflowing.
3. CSS media queries. Rules that apply only when the screen is above or below a given width. At a common set of breakpoints, such as 480, 768 and 1,024 pixels, the layout changes: three columns become one, the navigation collapses into a menu, sidebars drop below the content.

Add the viewport meta tag so phones render the page at device width instead of pretending to be a 980-pixel desktop, and you have the basic machinery. The craft is in deciding what each screen needs, not in the CSS.

The decision rule we use: if the mobile visitor wants the same information or products as the desktop visitor, go responsive. If the mobile task is narrow and transactional, such as checking a balance or a flight status, a dedicated mobile experience can be justified. Build an app only when customers will open it weekly and you have a reason the browser cannot serve.

Start from the content and the small screen. Luke Wroblewski's "mobile first" argument is practical as well as fashionable: deciding what fits on a 320-pixel screen forces you to rank what matters on every page. Most sites discover that half their desktop sidebar can go.

Design in a browser, not only in Photoshop. A static comp shows one width. Ask your designer for comps at two or three widths and insist on reviewing an HTML prototype early. Style tiles or a pattern library, showing typography, buttons, forms and colors, are more useful than a dozen page mockups.

Set performance budgets. A responsive page that loads the same 2 MB of images on a 3G connection has solved layout and ignored the real problem. Target under 1 MB total and under 5 seconds on a typical phone connection. Compress images, defer scripts, and avoid loading desktop-only assets on phones.

Decide how you will handle images. There is no standard yet for serving different image sizes to different screens. Options are a JavaScript approach such as Picturefill, server-side detection with a service like Sencha.io Src, or simply shipping one reasonably sized image. Pick one and document it.

Plan navigation deliberately. Menus with eight top-level items and dropdowns do not work on a phone. Common patterns are a "Menu" button that reveals the list, a select dropdown, or a short list of priority links with "More."

Budget testing time. Test on real devices: at minimum an iPhone, an iPad, one or two popular Android phones such as the Galaxy S II or S III, and a Kindle Fire. Emulators miss touch targets and font rendering. Add IE8 on desktop because it ignores media queries without a polyfill.

For a small business site of 10 to 30 pages built on WordPress, responsive design typically adds $2,000 to $6,000 to a project that would otherwise run $8,000 to $20,000, and two to four weeks to the schedule. Content-heavy sites and ecommerce stores see a larger premium because tables, filters, product grids and checkout flows all need to be rethought. Most ecommerce platforms are behind here: Magento and Shopify both have early responsive themes, but expect customization.

The honest comparison is not responsive against a desktop site. It is responsive against a desktop site plus a mobile site plus the ongoing cost of keeping two sets of templates and content in sync.

• Hiding content on mobile instead of prioritizing it. Visitors on phones want the same things; they just want them in a different order. Hiding the phone number or the pricing page is the worst version of this.
• Designing for three devices rather than for widths. Breakpoints should fall where your layout breaks, not where today's popular devices sit. Next year's devices will be different.
• Forgetting forms. Use the right HTML5 input types so phones show the numeric or email keyboard, make tap targets at least 44 pixels, and cut optional fields.
• Leaving the desktop site heavy. Responsive design is an opportunity to simplify the whole site, not to squeeze an overloaded page into a column.
• Skipping analytics setup. Create segments for mobile and tablet in Google Analytics before launch so you can compare bounce rate, conversion rate and time on site after.

Discover: we read your analytics by device and browser, audit your content and templates, and interview the people who maintain the site day to day. Plan: we agree the breakpoints, the content priorities for each template, the performance budget and the device list for testing, and decide where the ecommerce or lead-capture flows need special handling. Build: our website design and development team designs in the browser from a pattern library, with UX and conversion design shaping the mobile forms and navigation, and our technology team setting up hosting, caching and image handling so the site is fast on a phone. Improve: we compare device segments after launch and iterate on the templates that underperform. Brand, growth, web and technology sit on one team, so the responsive build also serves your email, search and social campaigns rather than becoming a separate project.

The Real Estate Platform engagement is the representative pattern for this work. Property search is a task people increasingly do from a phone standing outside a listing, so the site was built as one responsive codebase with the search, map and listing templates designed small-screen first and expanded for desktop. Image handling and performance were treated as design decisions rather than afterthoughts, and device-level analytics were in place from launch so the team could see that mobile inquiries were a growing share of leads.