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
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
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 plugins that you recommend?
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 project. Picturefill 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 JavaScript? Without 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 Responsive Design Interview Series 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!)
