A Pattern-Driven Approach to Design
An Interview with Ethan Marcotte of Responsive Web Design
How do ideas and movements in design come to be? As practioners, how can we advocate doing the best work to our clients? TypeThursday spoke with the godfather of the Responsive Web Design [RWD] movement, Ethan Marcotte. It was a pleasure to speak with Ethan and we’re sure you’re going to love it too!
TypeThursday: Ethan, thank you for being here. I really appreciate it.
Ethan Marcotte: Hey, Thomas, thanks for having me.
TT: Responsive web design has a lot of interest within the type world because of the role of typography within responsive web design. What got you interested in this topic that spawned an article, a book, a podcast, a whole empire, perhaps even a messiah mission.
EM: Oh, man! Well, that’s good for my impostor syndrome. Thanks, man. All I did was I wrote an article. I had given a talk previously and then I wrote this article for A List Apart — I thought that was going to be the end of it. I met a publishing deadline and, I mean, we’re almost five-and-a-half years out, almost six years out, since the article was published. The uptake of the idea has been amazing, frankly.
I’m perpetually amazed, humbled and kind of terrified of how big responsive design has gotten.
I’m perpetually amazed, humbled and kind of terrified, frankly, of how big responsive design has gotten. We just interviewed the United States Digital Service, and I never expected a few years ago the freaking American Government would be interested in responsive design as a better way to reach their constituents. What that says to me is that if I hadn’t coined the term, I think somebody probably would have hit on the idea. We had been thinking about the web as an extension of print for so long, that when mobile came around, somebody was going to hit on the point that we need to be a little bit more flexible with how we think about designing for this thing. I was just maybe the first out of the gate and it’s been a bit of a wild ride.
TT: Riding that surfboard.
EM: I know. White-knuckled, definitely.
TT: In the original publication, your proposal was fluid grids, flexible images and media queries. Your more recent book talks about patterns — It basically goes more in depth about the methodology of how to do this. Is that a fair summary?
I think about our pages as being comprised of a whole bunch of small layout systems.
EM: A lot of the discussion around responsive design in the last couple of years has shifted suddenly. We’re not really talking about designing pages as much anymore. These holistic, tightly-bound things that we throw up on a website and that is a design. It’s more like it’s moved a level below that. [Trent] Walton talks about designing networks of content; and I kind of think about our pages as being comprised of a whole bunch of small layout systems. The masthead on your responsive site probably has its own rules and breakpoints for when it’s going to need to change and adapt, independent of the rest of the design. Now, your responsive design is made up of a whole bunch of tiny, much smaller, responsive layouts, that you then stitch together to build a full-on interface. The new book is talking a little bit more about that shift: about looking at specific parts of a responsive design like navigation, managing advertising, working with images and looking for patterns for working through some of those problems. But also kind of taking a step back, and talking about some broader design principles you can use in your responsive work.
A more pattern-driven approach to designing for the web is a sign of maturity that happens with any design medium. Typography has obviously been there for quite a while before the web.
TT: So it’s interesting what you just said — In type design, the fundamental issue about is this idea of systems within systems. With each scale of typography you deal with, there’s deeper levels of complexity that have internal rules you have to figure out. A page is composed of paragraphs, headlines and photos. That paragraph is made of lines of sentences; That sentence is made of letter and spaces; The letter is made of positive space and negative space; Those positive and negative spaces are comprised of pixels as defined in hinting. And so on! That’s really interesting, to hear as a type designer, you talk about that concept within your field.
EM: This is something a lot of folks have been talking about. A more pattern-driven approach to designing for the web is a sign of maturity that happens with any design medium. Typography has obviously been there for quite a while before the web. But we’re starting to understand we have a little bit of space to talk a little bit more about best practices now on the web, which has been kind of exciting to see.
TT: There’s a lot my fellow type designers could learn from the growth and success of the Responsive Web Design movement. You had a message about how the web could be treated. Now, you’re at the point where an organization like the United State federal government believes your methodologies make sense. Meanwhile, the type world has struggled to effectively advocate best practices to type users. From your perspective reflecting on it, what do you think were the main takeaways about how to succeed advocating RWD?
It was always important never to present responsive design as THE answer. There’s never been One Single Way of working, which is the best and worst thing about this job.
EM: That’s a great question. It was always important never to present responsive design as the answer. There’s never been One Single Way of working, which is the best and worst thing about this job. But what I’m seeing is a lot of companies and a lot of my clients are seeing that designing responsively is an incredibly effective — and also very cheap — way of reaching more screens and more devices than ever before. If you stop thinking about a desktop site, a tablet site and a mobile site, and it’s all just part of one continuous, holistic experience that you’ve designed responsively, it’s cheaper to ship, it’s cheaper to design, it’s easier to maintain.
I don’t have to make that argument; I think a lot of companies are coming to that realization by themselves. So expansions of RWD like the podcast isn’t really about getting the message out, so much as talking to some of these companies who have gone responsive. And they’re actually able to share some of these lessons independently, which has been exciting to hear.
TT: You come across much more even-handed in how you approach the topic and how you’re thinking about it. It’s refreshing to say the least.
While conversations do get heated, it’s nice to see the ebbs and flows of the conversation over the last couple of years.
EM: Well, as soon as I finish this cup of coffee, maybe I’ll start spitting some fire and brimstone. But seriously, there have been contested issues within RWD. There have been some interesting shifts, at least in terms of responsive design. A couple of years ago there were a lot of folks saying that responsive design is actually kind of irresponsible, because it means by default your site’s going to be much, much heavier. A whole bunch of people kind of leapt into that discussion and were like, “Well, actually no. With proper planning and careful design, you can actually make a very lightweight responsive site that’s still incredibly beautiful.” Recently, there’s been a whole bunch of discussion about the responsive design having a fixed aesthetic, like there’s a responsive look. But then you have folks, like this conference series, Webstock, in New Zealand that just came out with their new responsive that’s stunning, frankly. Featuring some really beautiful type by KLIM. So while conversations do get heated, it’s nice to see the ebbs and flows of the conversation over the last couple of years.
TT: Ebbs and flows.
EM: Brings it full circle, man.
TT: Ethan, I think that’s a great place to end our conversation. Thank you so much for your time.
EM: Are you kidding, Thomas, thank you so much for yours. This has been great.
Interested in learning more about RWD? Learn more here
Love these interviews? Sign up to the TypeThursday mailing list to be the first to know about our next interview.
Was this article helpful to you? Click the Recommend button below
