Responsive Interview with Ethan Marcotte

Unstoppable Robot Ninja

Hello and welcome to another edition of our Responsive Interview Series.

As you may remember from last week our responsive household increased and I’m happy to say that Noah is doing wonderfully – he’s putting on weight and keeping me busy with lots of full diapers.

This week we’re going to be returning to the interview series with one of the, if not the, most leading thinkers in responsive design.


Online/In-Person Workshop Oct 4th with Rachel Nabors on Creating CSS3 Animated Scenes

Did you think CSS was just for “prettifying” the web? Join award-winning cartoonist and CSS nerd Rachel Nabors for in-browser cartooning. Learn how to use HTML5 audio, CSS3 animations and powerful JavaScript techniques to create animated scenes for the web.

This is on today so register now!
Cool Design Jobs - Get Hired!

A Responsive Interview with Ethan Marcotte.

This week I’m very proud to introduce a man that needs no introductions, Ethan Marcotte.  Ethan wrote the article that kicked this whole responsive malarky off back in 2010 and has been keeping us on our toes with new ideas and improved approaches. It is with great pleasure….. his answers to our standard four questions.

What was the best implementation of responsive web design you’ve seen in 2013 and why?

I’d like to offer two, because I can’t really pick a “favorite” responsive site. Also, depending on how you define “best implementation,” they’re successful in wildly different ways.
(Also, let’s be honest: I haven’t had enough coffee to be more decisive. Hi.)

  • Trask Industries is a recent favorite. It’s a promotional site for a movie, sure—but it’s a stunningly well-executed one. Visually and aesthetically lush, it’s, well, kinda cinematic. I love it.
  • The Paint Drop is another recent favorite. It is, again, a really visually lovely piece of design, but it’s a fine example of how responsive design can be very performance-friendly. It’s a responsive site made with an eye toward a low page weight, which makes it doubly beautiful.

What are two responsive web design frameworks/plugins/shims/etc that you recommend/couldn’t live without?

As a rule, I don’t use off-the-shelf CSS frameworks. Well, to clarify: I find them invaluable for prototyping, but I never use them for production work—I like tailoring my CSS and markup to the design I’m working on.

That said, there are a few small utilities I can’t live without, most of them drawn from FilamentGroup’s SouthStreet projectPicturefill alone is worth the cost of admission.

What is the one thing with responsive web design you would like to see improved?

IT IS PERFECT IN EVERY WAY HOW DARE Yoh whoops wrong window.

In all seriousness, I think there’s plenty of challenges for the responsive designer. Making complex navigation patterns responsive, including fixed-width advertising units in our fluid grids—we didn’t get into this business to be bored.

That said, I suppose the performance discussion’s most interesting to me right now. How can we make our work lighter, and more broadly accessible?

But as part of it, I’d love to widen the scope beyond just responsive design. Many assume that responsive designs are inherently bloated, but as sites like The Paint Drop (and the BBC’s in-progress responsive design, and the Guardian’s, and Filament Group’s site, and dConstruct’s event sites, and so on) prove, we can make beautiful responsive sites that are both lightweight and nimble.

What’s more, our work on the web as a whole—whether the site is responsive or not—isgetting heavier. If more and more of the web’s traffic is coming from the developing world, from countries where sub-3G network speeds are the norm, are 5MB sites or33MB sites prepared for the changing shape of the web?

I don’t know, honestly. But personally, I think that thinking more about sustainability in our designs—again, regardless of whether you work responsively or not—is kind of exciting.

If you could offer one piece of advice around responsive web design, what would it be?

Hrm. Well, again, I’m going to offer two—maybe one of them will be slightly helpful. (I haven’t finished this coffee yet.)

  • I’ve found that this old idea of progressive enhancement is so, so important to our work, and folks like the BBC have written extensively about how it helps themmanage a ridiculous amount of complexity in the device landscape. But given all those varied devices and browsers, I think progressive enhancement is a great guiding design principle as well: What does your design look like without media queries? Without JavaScriptWithout CSS? The web has this beautiful, awful fragility to it, and progressive enhancement helps me better design and plan for the unexpected.
  • Recently, I’ve noticed that terms like “mobile”, “desktop”, and “tablet” aren’t being used as much in my client projects. They’ve been replaced with terms that more directly address different capabilities of a given user’s device: describing screen size (“small,” “medium,” “widescreen”, and so on), input mode (“touch,” “keyboard,” “mouse”), quality of experience (“high” and “low”), and the like. Which has made me realize that, at least for me, responsive design isn’t just about “designing for mobile,” about making our designs “fit” smaller screens. It’s about designing across an ever-widening array of devices, browsers, and whatever-the-heck-comes-next.

A huge thanks to Ethan for taking time to answer our questions and give us some further insight into his thoughts 3 years on from the first article.

If you liked that you can find out another 26 folk just like Ethan had to say about the same four questions by picking up a copy of the ebook for yourself (please note that Ethan’s contributions are not featured within the ebook… you’ve only got that because you’re awesome. Hoorah!)

That’s all for this week, but next week the newsletter will resume normal services and we’ll have a huge number of links to get through.

Responsive Design Ebook

A collection of interviews, tips, tricks and some responsive sketch pages in one easy to download file.

Learn from more than 26 leading responsive design experts across more than 80 pages for the price of an expensive coffee. Or, think of it like buying me a beer to say thanks for sending you a newsletter each week…. plus you’ll learn tons too.

Buy Now for just $6.99

One Response to “Responsive Interview with Ethan Marcotte”

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>