Responsive Web Design: Patterns & Principles

Ethan Marcotte helped save my web development career.

That’s hyperbolic, of course, but: five years ago the bottom had fallen out of the Flash development scene, and I was drifting about, dipping my toe back in the open web. And let me tell you, everything was different. I had a dusty foundation of HTML, CSS, and JavaScript, but the advent of the iPhone and smartphone browsing had upended all the rules. It was in that frame of mind that I attended An Event Apart Boston in 2011, where Ethan conducted a one-day workshop on responsive design.

I didn’t know much about responsive design, beyond having read the original article and having seen some examples on mediaqueri.es. Responsive Web Design was right on the verge of being published, and Ethan was giving us a sneak peek. I expected to come away with a head full of implementation details (and that was certainly true) but what struck me the most was how Ethan situated the nascent techniques of responsive design within the existing context of progressive enhancement.

When Responsive Web Design was finally released, here’s what I wrote:

[Ethan’s] interpretation of progressive enhancement is nothing new, but to me it’s the crucial part of this book. Without this underlying philosophy of putting the user first and scaling their experience to match their device capabilities, responsive web design can be misused as a decorative parlor trick. It’s when it is employed as a way to solve problems for the user that it becomes absolutely revolutionary. That is what profoundly affected me after I put it down, and why I hope this book finds its way into the hands of as many web designers as possible.

Wide-angle view #

That same balancing act is also present in Ethan’s follow-up, Responsive Design: Patterns & Principles. He combines the practical, bite-sized, implementation-ready information with a larger, more philosophical view of the web that grounds those pieces in a solid context. Come for the hamburger jokes,¹ stay for the invitation to a deeper, more philosophical understanding of designing for the web.

A lot of the ground Ethan covers is available piecemeal across the web: responsive navigation, images & video—you can find many of the same techniques described in the book via some DuckDuckGo elbow grease. So what sets Patterns & Principles apart? I found Patterns & Principles such a useful and compelling read because it combines the urgent (how do I wrangle my navigation on smaller screens?) with the important (maybe you don’t need that much navigation?).

Technique changes so rapidly on the web—today’s best practices could be upended overnight. Ethan says this himself in the first chapter:

…it seems that whenever we start to figure the web out—even a little bit—the landscape shifts.

So I suspect that some of the middle chapters will need a refresh in the near future. But the heartbeat of Patterns & Principles (for me at least) isn’t necesarily in the details. Ethan talks about a new way of working, a way that gives purpose to those details:

In other words, how do we move beyond thinking in terms of columns and rows, and start talking about the quality of our responsive designs? And what would frameworks to support that look like?

One of the things that I’ve noticed in the current swath of responsive work out there (including my own) is that we seem to have hit a bit of a plateau. We’ve treated “responsive design” and “fixing layout” as synonyms. We’ve figured out some straightforward ways to deal with the most urgent layout issues—sweep the nav into an off-canvas hamburger, stack the content at narrow widths—and called it a day. And in doing so we’ve re-built our illusion of control over a medium that absolutely refuses to stand still and be mastered. And I think Ethan wisely urges us to go further, to really address the important issues in the current web landscape, of which responsive design is just one part of the solution:

Because when we’re accounting for the conditions under which our responsive designs might be viewed—the myriad network conditions, input modes, and screen sizes—we need a design language that’s as nimble and modular as our layout systems are becoming.

If you look just a bit you’ll find many others joining Ethan in shaping that design language. Charlotte Jackson’s “From Pages to Patterns”. Alla Khalmatova’s “The Language of Modular Design”. Just this week Dan Mall published an absolutely vital article, “Content & Display Patterns”, where he shares some of his own experiences reconciling content patterns and their visual representation(s). Mark Boulton (who is referenced in the book) has been talking about design patterns and abstractions for years. And last year Scott Jehl gave his talk “Delivering Responsibly”, which renewed the call for a more inclusive and performant approach to responsive design.

So Patterns & Principles feels well-calibrated: it has things you can take away and fold into your practice right this minute. But it also deals with the ever-present, uncomfortable, messy reality of designing for the web, and offers a perspective that embraces that reality and offers wise suggestions on ways forward. I’m very interested to see where folks are inspired to take things as a result.