One Site, Every Screen: The Responsive Design Idea

In January, closing our iPad analysis, we wrote that the industry lacked a settled method for layouts that adapt to the canvas they find. We said the space between 320 and 1024 pixels was where the next few years of front-end thinking would happen. We did not expect the thinking to arrive with a name attached by spring.

Ethan Marcotte’s article ‘Responsive Web Design,’ published in A List Apart in late May, is the piece we had been waiting for without knowing its title. A coherent, demonstrated synthesis of three existing techniques into a genuine answer to the device question. We have spent the summer prototyping with it, the conviction is forming faster than our usual caution permits, and this post is both explainer and early position.

The synthesis, in plain terms

None of the three ingredients is new. The recipe is.

Fluid grids: layouts specified in proportions rather than pixels, so the composition flexes with its container instead of assuming one canvas width.

Flexible images: media sized to its context, the max-width technique, scaling within the fluid columns rather than breaking them.

CSS media queries: the modern piece. A stylesheet mechanism that applies different rules based on the viewport’s actual characteristics, so the design can re-compose at meaningful breakpoints. Three columns where there is room, one where there is not, navigation adapted to each.

Combined, they produce a single site: one URL set, one codebase, one content source. It renders as a considered design at phone width, tablet width, and desktop width. Not by detecting devices and serving variants, but by responding to whatever canvas arrives. Marcotte’s demonstration in the article makes the case visually in a way description cannot. It rewards the click, and the room always goes quiet at the resize.

Why this beats the alternative we’ve all been pricing

The competing answer, separate mobile sites, m-dot subdomains with device detection, has real deployments and real successes. Honesty requires saying it solves today’s phone problem adequately.

But its economics degrade with every screen the market adds. Each experience is a codebase. Content risks forking. The parity failures that produce ‘view full site’ links are apologies wearing buttons. Device detection is a perpetually wrong guessing game. Which bucket does the iPad get? That was precisely January’s scramble. And the URL split complicates everything from analytics to the link equity our SEO series husbands.

Responsive design’s answer to screen proliferation is structural. It does not enumerate devices. It accommodates canvases. The next device, and the industry has made clear there will always be a next device, lands somewhere on a continuum the design already serves. One content source, one URL per page, one build to maintain. The elegance is not aesthetic. It is arithmetic.

The costs, named honestly

• Internet Explorer. Media queries are modern CSS, and IE through version 8 does not speak them. JavaScript polyfills exist and work. Or IE can simply receive the desktop layout, a reasonable fallback given its desktop-bound share. Either way the majority browser requires a decision, and the decision belongs in the estimate.

• Image weight. The unsolved problem, stated plainly. A fluid image scaled down to phone width is still the desktop-sized file over the cellular connection. The full download for a fraction of the display. Techniques are emerging and none is standard. For now, restraint, conservative source sizes and aggressive compression, is the mitigation. We would flag this as the technique’s genuine open wound, and our performance conscience will be watching it.

• Process change. The quiet cost. Fixed-width Photoshop comps, the deliverable every approval process is built around, describe exactly one state of a design that now has many. Designing responsively means designing systems and ranges rather than pictures. That changes deliverables, reviews, and client conversations. Our design-practice readers will recognize this as the pattern-thinking conversation arriving through the layout door. More on that another day.

Lessons from early prototyping

Notes from the first responsive experiments circulating this summer, offered as a head start. One site that bends beats three sites that fork.

The design process reverses productively when you start narrow. Beginning at phone width forces the priority conversation, what does this page exist to do, that desktop-first design lets everyone defer. The wide version built up from a disciplined narrow one is reliably cleaner than the narrow version carved down from a sprawling wide one.

Navigation is the hardest single problem. A seven-item horizontal menu has no obvious narrow-screen form. The emerging patterns (collapsing to a list, anchoring to the footer) each carry tradeoffs we are still weighing. Expect this to be where the community’s next year of invention concentrates.

Tables and forms need early attention. They resist fluidity more than prose does. And testing wants real devices, not just resized browser windows. The phone in your pocket renders, scrolls, and fat-fingers differently than any desktop simulation. That is a lesson our 2007 field notes taught, and it transfers intact.

None of these wrinkles dented the conviction. All of them belong in the first project’s schedule. Prototype on something low-stakes, an internal property or a microsite, and the team’s second responsive build will move twice as fast as its first. Ours is.

Our position, early but in writing

We think this is the answer. Not a technique but the direction, the one the multi-screen future has been demanding since our first iPhone notes flagged the assumptions breaking.

The costs above are version-one costs, the kind ecosystems sand down. Tooling for IE, emerging image techniques, process patterns. Not structural flaws.

We are prototyping now. We expect to propose responsive builds to appropriate clients within a couple of quarters, and we expect the approach to be our content-site default within a couple of years as the toolchain matures. Anyone planning a 2011 redesign should have this on the evaluation table. Anyone commissioning a fixed-width design this fall should at minimum ask their vendor why not, and enjoy the quality of the answer.

The device parade of the past three years kept asking the same question. For the first time, we are writing down an answer we expect to still endorse when the parade’s next float arrives.

Credit where it is owed. Marcotte built this synthesis on the standards-and-flexibility foundations this industry has been laying for a decade. The fluid thinking, the media-query machinery, the semantic structure that makes re-composition possible at all. Good ideas arrive when their ingredients are ready. The ingredients, longtime readers will note, are the ones we have been stocking since 2006. Occasionally the pantry pays off all at once.