Ethan Marcotte on responsive web design

This article first appeared in issue 221 of .net magazine - the world's best-selling magazine for web designers and developers

Jeffrey Zeldman: Briefly, without getting too technical, please explain what you mean by the term ‘responsive web design’. What is it, what problems does it address, how does it solve them, and why is it important now?
Ethan Marcotte: It’s fair to say that the web’s moved beyond the desktop, and it’s not looking back. Mobile traffic has exploded over the past few years, and the number of devices we’re designing for – from phones to laptops to tablets, even game consoles and e-readers – is growing just as quickly.

One way we’ve dealt with transition is by establishing some constraints: building mobile- specific sites, or perhaps apps tied to a specific device’s OS, each distinct from the traditional ‘desktop’ experience. And at the risk of sounding Seinfeldian, there’s absolutely nothing wrong with that! Each offers elegant solutions to the very difficult problem of designing beyond the desktop. But the one characteristic they share is that they require fragmentation of our designs, our content across different contexts, different devices.

Responsive web design offers an alternative. By marrying fluid, grid-based layouts and CSS3 media queries, we can create one design, that, well, responds to the shape of the display rendering it. It’s a more unified, more holistic approach to design, one that doesn’t see the web’s inherent flexibility as a constraint to be limited. Instead, we can finally design for the “ebb and flow of things”, as John Allsopp once put it.

JZ: You introduced the world to responsive design in a brief A List Apart article in 2010. It spawned a great deal of attention in our community and was soon being put into practice. What are some of your favourite examples?
EM: Wow. Not sure I have enough space for this, but here are a few off the top of my head:

• The fine folks at Paravel have gotten responsive fever, and in a good way. Trent Walton’s art-directed blog showcases some beautiful thinking on his part, but Paravel’s client work has been tending toward the responsive as well: check out thedolectures.co.uk or the ATX Web Show.
• A bevy of designers have made their sites beautifully responsive: Jon Hicks was one of the first, and Dan Cederholm, Stephen Caver, Mark Boulton, and Meagan Fisher soon followed.
• The painfully smart people at yiibu.com have neatly married their responsive design to the ‘mobile first’ philosophy.
• I could stare at designmadeingermany.de/magazin/5 all day. Responsive or not, it is lovely.

Those are just off the top of my head. I’ve a whole folder of responsive sites, each as flexible and foxy as the last.

JZ: You next wrote a book on the topic. What does it address that the article didn’t?
EM: It covers the three frontend components in more detail, showing how fluid grids, flexible images and media queries can be layered together to create a proper responsive design. Most importantly, the final chapter talks about how we might adapt our design processes to fit this more flexible methodology, and how to determine if a responsive approach is right for your project.

JZ: Let’s talk more about big-picture stuff. You’ve challenged designers to think differently. It’s the kind of challenge that comes up every 10 years or so – one that appeals to the best in us, but that also contradict years of learned behaviour and practice. What do you say to designers who came up using traditional methods from the world of print, and who only recently became excited about the web because they could finally impose rigid grids and ‘real’ fonts on this medium?
EM: Well, I’d start by saying I don’t think the pixel’s going away any time soon. Heck, some designers have applied media queries to their fixed-width sites, with designers like Oliver Reichenstein or Simon Collison shuttling between multiple pixel-driven layouts at different screen width.

And these adaptive sites are beautiful, even though the approach isn’t responsive per se. Still, that idea of ‘control’ is an interesting one.

Take the font case you mentioned: what happens if a user doesn’t have a device that understands @font-face, or can’t download the file? Whether it’s layout or typefaces, the constraints we apply to our designs are much less rigid than in any other medium. The unique thing about web design is the amount of control we surrender to the people who view our work, and to the capabilities of their browsers. And in the age of mobile browsers, layout is another potential liability. I believe a fluid grid, coupled with media queries, can give us the perfect measure of accessibility and control we crave.

That said, responsive designs can still flourish under a measure of pixel-driven constraint. Take the sites for Andersson-Wise Architects or dConstruct 2011, which both incorporate fixed- width elements within an otherwise fluid layout. Additionally, designers such as Dan Cederholm or the people at Happy Cog might apply a max-width to their responsive work, applying a kind of ceiling to a site’s flexibility.

JZ: There’s a new generation of designers who excel at both print and web and who have to some extent ‘tamed’ the web and made it safe for traditional design methods. How do you persuade those designers that you’re not just throwing them back to square one?
EM: The next time you’re sitting down to produce a fixed-width layout, start with the container. Set it in pixels as you might normally, but when it comes to the internal columns, hold off for a moment: instead, make them percentages. The math is fairly easy, believe me. So now, you’re left with a fixed-width design, but its internal workings are perfectly proportional. That wasn’t so bad, was it?

But now, let’s change our container from a fixed width to a percentage – say, from ‘width: 960px’ to something like ‘width: 80%’.

Congratulations! You’ve just built your first flexible grid. As aesthetically rigorous as its fixed- width counterpart, but now it adapts to the size of the viewport rendering it. And as it does so, the pixel values of those columns will change, true – but the proportions you designed remain intact. And that’d make Muller-Brockmann proud.

Of course, as you’re giddily resizing your browser window, despair might set in: maybe a particular line’s length is getting too long, or certain elements compress in an unappealing manner. This is where non-fixed layouts tend to get their reputation for being more chaotic than their fixed-width counterparts, for being less than ideal for capital-D ‘design’ on the web. But with media queries, we can correct some of these issues. Instead of simply constraining the width of our design, we can set rules to tweak our copy’s leading at certain resolutions, or perhaps revise the layout for dramatically smaller (or wider) screens.

JZ: So does responsive design replace mobile, or is mobile a component of responsive design?
EM: A replacement for mobile-specific websites? Oh, not at all. Basically, I think of responsive design as an alternative to mobile sites, as another option to be weighed when beginning a project.

Historically, we’ve often treated “mobile” and “desktop” as synonyms for “less” and “more”, designing distinct experiences for each, and fragmenting our content into those separate sites. And that might still make sense for your work, if the content merits that approach.

But it’s worth noting we’ve reached a point where we’re revising some of our original notions around this idea of “a mobile context” — the picture’s much more complicated than we once thought (see mark-kirby.co.uk/2011/the-mobile-context/). For the responsive projects I’ve worked on, we determined at the outset that there’s a high degree of overlap between the average mobile user’s goals and that of the desktop user. (In many cases, they’re the same person, accessing the same site with different devices throughout the day.)

Now, that might not be the same for your project. And that’s fantastic! Because ultimately, it’s about pairing the approach you take to the content you’re designing, to the needs of your audience. After all, dogma doesn’t pay the bills.

Don't miss Ethan writing about his 20 favourite responsive designs.