On being “responsive”

By all accounts (or at least, by my account), the first few weeks of self-reliance have been a ridiculous success. Before leaving Happy Cog, I was worried that some of my old freelancing habits would be hard to pick up again. What would my time management skills look like, after three years away from setting my own schedules? How do I structure my days? Would I remember to wear pants?

Thankfully, these haven’t really been an issue. It’s felt like getting on the old bike again: old habits have snapped back into place, and I haven’t felt this productive or focused in ages. Remembering to write regularly, however, is something I’m still working on. But thankfully, there’s something I can weigh in on:

A few weeks ago, the insanely talented people at Information Architects released a new, semi-responsive design, augmenting their already lovely site with a flexible grid, and some media queries to optimize their design for smaller resolutions. On the higher end of the resolution spectrum, they fell back to an em-based, fixed-width layout. Given the combination of flexible and fixed-width layouts, I felt it was a great example of a partially responsive design, and I said as much on Twitter.

Then a few days later, they rethought their implementation, opting instead to switch between a few fixed-width layouts. Which, of course, is completely fine and wonderful and awesome—after all, they know their site better than anyone. But I did receive a number of questions last week, via email and Twitter, about a little tweet of mine in response to this change in course:

Downgrading my earlier assessment of the @iA site from “responsive” to “switchy.”

I’ll be the first to admit that there are a number of problems with my little post. First, it’s on Twitter: no place for a proper discussion, as I’ve reminded myself recently. And calling their design “switchy” sounds trite, which wasn’t the goal; honestly, “adaptive” is probably a better term. But ultimately, I was trying to communicate that their design was no longer responsive per se.

A responsive design is composed of three distinct parts:

1. A flexible grid.
2. Flexible images. Or more specifically, media that work in a flexible context (whether fluid themselves, or perhaps controlled via overflow).
3. Media queries. The final layer of a responsive design, media queries optimize the design for different viewing contexts, and spot-fix bugs that occur at different resolution ranges.

This is the definition from my original article on responsive design, which is also how I’ve been introducing people to the concept at this year’s AEAs and at other speaking engagements. It’s tempting, of course, to focus on the media queries alone, perhaps reducing the concept of “responsiveness” down to any layout that’s @media-enabled. But in my mind, the flexible foundation is critical for devices and browsers that don’t support media queries, as JavaScript patches can only get us so far.

But moving beyond these three technical components, taking a responsive approach to design means moving beyond our reliance on designing for specific resolutions, devices, or viewport widths. In other words, incorporating media queries to toggle between multiple fixed-width layouts does not a responsive design make.

Now, just to iterate: I’m not taking anything away from the fabulous work that iA have done, or the new media query-enhanced Less framework. It’s fantastic and exciting that our community is moving beyond the desktop, and there are many options for doing so: a responsive design is just one of them. But I did want to briefly blog about some of these questions, as I’m thinking about the upcoming book quite a bit recently, and how best to articulate some answers.