A Ten Minute Chat With Ethan Marcotte

Responsive web design. That says it all. As the man behind the most contagious movement in web design at the moment, Ethan Marcotte really needs no introduction. Recently he responded to a few of my questions (see what I did there?), so grab a coffee and find out what he had to say about sobbing on the subway, and firing people into the sun..

Designer. Developer. Tall. Bad with numbers.

I’m an independent designer/developer/something who lives in Cambridge, Massachusetts. Prior to striking out on my own again at the end of 2010, I was an interactive design director at the charming and lovely Happy Cog. But over the years, I’ve been fortunate to work with the likes of New York Magazine, Stanford University, the W3C, and the Sundance Film Festival. Most recently, I helped launch a new responsive site for The Boston Globe. I love this job.

More recently, I suppose I’m “known for” coining the term “responsive web design” at An Event Apart Seattle 2010, to describe a more flexible way of designing beyond the desktop. I followed that talk up with an article in A List Apart magazine, and eventually wrote a little book about the topic.

In a nutshell, responsive design is an alternative way to design the post-desktop web. Historically, our main approach to designing for mobile, tablet, or what-have-you was to build device-specific sites, fragmenting our content across different contexts. Responsive design, at its most basic level, allows us to combine flexible grid-based layouts and media queries to create a more, well, responsive design: one that reshapes itself to accommodate different resolution ranges.

Anyway. It’s been an absolutely insane, wonderful year.

Personal crusade? Oh, goodness yes. I am the most dogmatic person on the internet, and secretly believe that people who disagree with me should be fired into the sun.

Hey! I am kidding! I jest! (I am also incredibly low on caffeine!)

But really, the absolute best thing about working on the Web is that there is no One True Way™ of working. I mean, in the past year it seems like there’s been this debate forming online, one that’s somehow pitted “mobile design” against “responsive design” in some sort of epic, Clash of the Titans-esque conflict. I don’t understand why things need to be so binary: some audiences would benefit from device-specific experiences, while others would benefit from a more responsive approach.

I’ve been working with one large client this year where the latter is the case: that the goals of each “context,” as it were, overlaps to such a high degree that a responsive approach was easily the best one. But I’ve worked on sites where the reverse was true, too.

Ultimately, it’s about tailoring the approach to the needs of a given site’s audience—not simply the devices they’re using, or to the biases we designers bring to the table. If our community can provide more structure and process for how to decide between a responsive approach or a device-specific one, we’ll be tackling the right problem.

Man. Not a few things, to be honest.

First and foremost, there’s a lot that could be improved on the CSS side of things. I mean, today we rely on some rather old (if reliable) tools: namely, floats and positioning. And unfortunately, that means most responsive sites today are constrained by source order. This can be worked around to a certain extent, especially if you’re planning your markup in a “mobile first” manner, but thankfully there are a few CSS3 tools being drafted that’ll give us even more flexibility. I’m especially excited about flexible box and the layout module.

We can’t draw a correlation between the width of a screen and the amount of bandwidth available to it, but still there’s been a lot of work done around optimizing image delivery. One of the first was Filament Group’s responsive images script, but there’ve been scads built since then; Jason Grigsby had a fantastic round-up of various responsive images techniques, detailing their respective strengths and drawbacks, that I highly recommend.

And finally, I think the thing I’m most interested in figuring out is how a responsive approach can change the way I manage my projects. For the Boston Globe, the biggest shift for me was adopting a more collaborative approach between designers and developers: emphasizing rapid prototyping as a design tool, and letting the use of the site in various phones, tablets, and browsers actually inform the site’s design. So what would a more responsive approach to requirements gathering look like? A more responsive content strategy? The technical fundamentals—fluid grids, flexible images, and media queries—are really only one part of a much larger design process, one that I’m really excited to try and figure out.

I’ve been reading a lot of Garret Keizer’s work lately. His book on noise was wonderful, and I was weeping openly on the subway when I read his recent essay on education for Harper’s magazine. (Available in the magazine, but online for subscribers.)

Speaking a bit more visually, I discovered Dave Mott‘s work via Dribbble, and am in deep smit.

I CAN QUIT ANY TIME I WANT okay yeah maybe I should switch to unicorns.