Exclusive commentary: Ethan Marcotte
We have some more exclusive commentary for you today, this time on one of Readmill’s most popular books - Responsive Web Design. Ethan Marcotte has highlighted 5 important parts, and has left some additional commentary and background on them. Enjoy!
What’s fascinating to me is that architects are trying to overcome the constraints inherent to their medium. But web designers, facing a changing landscape of new devices and contexts, are now forced to overcome the constraints we’ve imposed on the web’s innate flexibility. We need to let go. Rather than creating disconnected designs, each tailored to a particular device or browser, we should instead treat them as facets of the same experience. In other words, we can craft sites that are not only more flexible, but that can adapt to the media that renders them.
Reading Michael Fox and Miles Kemp’s _Interactive Architecture_ (http://interactive-architecture.com/) was a revelation. Actually, that’s not quite right—it was a proper kick to the head. Kemp and Fox not only showed me a more interactive side of architecture I’d never seen before, but painted a clear picture of the challenges that caused it: crises of economy, of climate, and of sustainability that, taken together, demonstrated the need for a more flexible, more _responsive_ form of architecture.
These are, I think, crises we were dealing with in our own medium, as we started to design beyond the desktop. And we’re still working through them, I suppose.

It’s all too easy to fill a desktop browser window with social media toolbars, links to related articles, battalions of RSS links, and tag clouds galore. (This process is called “adding value,” I believe.) But when we’re forced to work with a screen that’s 80% smaller than our usual canvas, nonessential content and cruft quickly fall away, allowing us to focus on the truly critical aspects of our designs. In other words, designing for mobile devices first can enrich the experience for all users, by providing the element often missing from modern web design: focus. That’s not to say that our client’s pages are light on content, or lacking in features. But by framing our design process with that simple question, we’ve gained a handy acid test to apply when considering each proposed element, each new piece of functionality.
Dave Rupert said recently that responsive design is allergic to complexity, and I think there’s something to that. Every responsive project I’ve worked on has benefited from borrowing a page from Luke Wroblewski’s “mobile first” mantra, from rethinking design elements if they’re not right for small-screen, handheld devices. Responsive design isn’t just about making elements _fit_, but making sure they’re appropriate for _all_ of your users—regardless of the size of their screen. And if you can use a responsive redesign as an opportunity to simplify your work, the result will be much, much better for it.

But most importantly, responsive web design isn’t intended to serve as a replacement for mobile web sites. Responsive design is, I believe, one part design philosophy, one part front-end development strategy. And as a development strategy, it’s meant to be evaluated to see if it meets the needs of the project you’re working on. Perhaps there’s a compelling reason to keep your site’s desktop and mobile experiences separate, or perhaps your content would be better served by a responsive approach. Only you and your users know for certain.
The original article on responsive design just turned three years old, which means this little book of mine’s about to turn two. And even after a bit of time, a number of questions pop up from folks who see responsive design as a sort of “all-or-nothing” approach: that they have to ditch their existing mobile experience, or replace their existing desktop site, or toss out various babies with sundry bathwaters.
The thing is, responsive design doesn’t mean you have to tear everything down at the outset. There’s room for more nuanced approaches, where you might test the responsive waters a bit. For every wholesale responsive redesign like The Boston Globe (http://bostonglobe.com/) or Disney (http://disney.com/), companies like The BBC (http://m.bbc.co.uk/news), The Guardian (http://m.guardian.co.uk/), People Magazine (http://m.people.com/) take more conservative approaches, experimenting with responsive design on their “mobile” sites before opening it up to wider parts of their audience.

That’s not to say that the context question isn’t valuable, or that we shouldn’t be thinking about these difficult questions. But we can’t simply infer a user’s context from a class of devices—in many cases, the implementation of these separate, “context-aware” sites can often be lacking (FIG 5.1). Relying upon all-too-convenient terms like “mobile” and “desktop” is no substitute for conducting the proper research into how your audience accesses your site: not only the devices and browsers they use, but how, where, and why they use them.
I don’t have much to add to the sentiment here, but in rereading it I realized terms like “mobile,” “tablet,” or “desktop” _rarely_ pop up in my work these days. The teams I’m working with usually talk more broadly about specific challenges around resolution (small-screen, mid-screen, or widescreen), input type (touch, mouse, keyboard, hybrid), network type (low-end, broadband), and so on, instead of falling back on stock device classes.
Like I said, not much to add here. But it did strike me that the language I’ve been using has gotten a bit more nimble, as the lines between device classes have gotten much, much blurrier.

If you’ll permit me one fanboyish outburst: media queries are downright awesome. They let us conditionally serve up CSS based on the capabilities of the device rendering our sites, allowing us to more fully tailor our design to our users’ reading environment. However, media queries alone do not a responsive design make. A truly responsive design begins with a flexible layout, with media queries layered upon that non-fixed foundation.
The highlighting stripped out the emphasis, but “_media queries alone do not a responsive design make_” is, I think, one of the key lines of the book. The best responsive sites I’ve seen all let their foundation—the fluid grid—do the heavy lifting, treating media queries as the final layer in the cake.
