The Lab’s profiles are Q&As with smart people who are shaping the future of media. Follow the series.
My career has been blessed with many mentors, but few have had a more profound effect on my work, and my career, than Ethan Marcotte. We worked together on the imagining, responsive design, prototyping and launch of The Boston Globe’s new website — BostonGlobe.com — in 2011. In fact, he actually coined the phrase “responsive web design” in his May 2010 A List Apart article, a phrase now as ubiquitous in our digital journalism vernacular as "content management systems" and "mobile." His book on the topic was published in 2011. Over the years, he has written many articles for A List Apart and is co-author of Designing With Web Standards 3rd Edition and of Handcrafted CSS: More Bulletproof Web Design. In 2012, he was named in Fast Company's "100 Most Creative People in Business." Formerly, Ethan worked as a designer for Happy Cog, and many of his clientele have been journalism-oriented publications, including People Magazine, New York Magazine and (of course) The Boston Globe. Read on to learn more about his perspective on web design, accessibility and how digital storytellers and publishers grow audience and increase reach.
It’s a real pleasure to chat with you again, Miranda. Been too long.
What are you working on these days?
Oh, a bunch of things! I’m working on a few client projects, cooking up some fun schemes with a few colleagues, and writing a couple things. Oh, and advising the fine folks at Editorially, of course. (Not that they need my help.)
I love Editorially! In fact, you and I are using it to collaborate on this Q&A. What can you tell us about Editorially?
Editorially’s a product for writers and editors, for people who understand that writing becomes better through collaboration. And I love it dearly. I’m an advisor to the group (and one of its cofounders).
Who inspires you most?
This person right here.
I have heard you talk about your passion for web accessibility, or the “ultimate accessible web” (which, in my head, is an awesome superhero). What do you mean by web accessibility and why are you passionate about it?
Did I really say, “ultimate accessible web?” Man. I must’ve been knee-deep in my Marvel comics that day.
Andy Hume has said that the web is “responsive by default.” I’d take that a step further, and say that the web is universally accessible by default. Take a look at the first web page: as long as your browser understands HTML, you can access that document, follow its links, and gain (as the page says) universal access to a large universe of documents
. But when we design for the web, when we introduce additional layers of technology and complexity, it’s easy to move the web away from its resting state: that of a fluid, universally accessible medium.
And in recent years, our designs have definitely gotten more complex: web fonts, high-resolution images, and complex scripts. Each of them add weight to our work and, if not included correctly, could prevent someone from accessing our pages over a slow network, or when their browser doesn’t execute JavaScript.
Now, I’m not saying we need to abandon any of that complexity, or make our designs less visually rich. But I think we can include that richness in a way that’s maybe a bit more responsible: we can include JavaScript in a way that our pages will still work without it, and build lighter, nimbler pages, and so on. To me, that’s a really interesting design challenge.
Is this why you proposed a responsive approach to designing web pages, in general? How does this design technique align with web accessibility?
I don’t know as I set out to “propose” responsive design—I gave a talk at AEA in Seattle that went over well, and then my article followed shortly thereafter.For me, a responsive layout is a foundation. It can help us address the problem of making our content and our designs accessible to screens of various sizes and shapes.
But if you’re asking where the idea started, I’ve been excited about fluid layouts for ages. And that’s largely thanks to John Allsopp’s “A Dao of Web Design”, which I read early in my career and, well, was promptly knocked on my ass. “Dao” is a beautiful essay, arguing that the Web was really being treated as a very print-like design medium. In other words, there’s no boundary to the web pages we design like on the printed page, so why should our designs be fixed width?
Anyway, John’s essay is something I reread on a regular basis: it really made an impression on me at the time, and I see responsive design as a continuation of his ideas. Historically, we’ve sort of dismissed fluid layouts because of a perceived lack of control—but now that we can apply media queries to them, we can, as John said, finally design for “the ebb and flow of things” on the web.
But to be fair, responsive design isn’t inherently accessible by itself. I could build a responsive page pretty quickly—but maybe it’s a few megabytes too heavy, or maybe it requires JavaScript to run. But if it has a fluid layout and media queries, it’s still technically responsive.
For me, a responsive layout is a foundation. It can help us address the problem of making our content and our designs accessible to screens of various sizes and shapes. That’s it. It won’t immediately make our sites accessible to lower-end devices and networks, or solve trickier challenges like responsive advertising. But from that flexible foundation, we can start working in progressive enhancement, begin addressing the needs of different input modes, and so on—all to make the end result responsive and widely accessible.
Why should journalists and digital storytellers care about making the web more broadly accessible?
For me, it’s a question of reach. I thought there was something kinda lovely and poetic about the marketing campaign around the BostonGlobe.com launch: posters all around the city, proclaiming “Our stories, wherever you are.” Putting responsive aside for a moment, that’s a great metaphor for online design: taking advantage of the web’s ubiquity to make yourself heard on any device, on any browser, by any person at any time.Would something like “Snowfall” be as powerful if the reader didn’t have JavaScript available to her, or if the images weren’t visible? Of course it would. It’s a damned fine piece of writing.
And when I design on the web, I surrender so much control to the people who view my work: they could be on a small screen or a large one; they may have disabled images to conserve bandwidth; or their browser might not execute JavaScript. By planning for that unpredictability, our designs become more resilient, and can be accessed by more and more people.
Let me put it another way: would something like “Snowfall” be as powerful if the reader didn’t have JavaScript available to her, or if the images weren’t visible? Of course it would. It’s a damned fine piece of writing. But that’s a nice metaphor for progressive enhancement: without the images, without JavaScript, the content of our pages should still be available to the people trying to access them.
You have given a talk a couple times called “The Map And The Territory.” What do you mean by this? The map metaphor is an interesting way to explain how we think of “mobile” but I can see how some people might think of mapping or plotting.
Well, here’s a bit of background, if it helps: the talk’s heavily adapted from one I gave at Build toward the end of last year. The title’s adapted from a quote by Alfred Korzybski, a philosopher who said that “The map is not the territory.” In other words, there’s a distinction between a representation of a thing and the thing itself. Maybe that sounds a bit obvious. But Korzybski was worried we substituted the abstraction—the “map”—for all the complexity and nuance of the real thing—the “territory”—it represented.
And I’ve been wondering if we do that when we talk about the web, and designing for it: if we’re focusing on some abstract, idealized version of it, when the true “territory” of the web is much more complex than we might care to admit.
I mean, the way in which people interact with the web is always changing—that’s no surprise. But the basic demographics of the web are shifting in some pretty significant ways. Some research estimates place a full sixty percent of the world’s mobile web subscriptions on slow, sub-3G networks, and it’s said that more people in Africa—one of the largest mobile ecosystems on the planet—have access to a mobile phone than electricity. And according to the UN, more people throughout the world have access to a mobile phone than to basic sanitation.
It’s tempting to think of these problems as unique to remote parts of the world—that they’re not “our” users. (Or maybe it’s just me.) But they’re about to be: mobile web traffic in the developing world has outpaced the developed world this year, and that trend seems to be holding fast.
So given just how much of the web is shifting to lower-powered devices, to slower networks, it’s interesting to see the average web page size is over 1.5MB. And that’s what my talk is about: is the way we think about web design ready for the web as it’s becoming? Can we revisit our approaches to web design—and to responsive design in particular—and rethink them in a more sustainable way?
I should add I have absolutely no idea how to answer those questions. But it’s an exciting time in our industry, and I think the next few years are going to be a hell of a ride. Personally, I can’t wait to see what happens next.
Of all the projects you’ve worked on throughout your career which one has turned out to be the most impacting and how? Was this one also your favorite?
I don’t know that any one project I’ve worked on has been a clear favorite. Seriously—at the risk of sounding hallmark-y, I love looking for moments or lessons I can learn from, and take into the next job.
Quick example? I remember one of those moments when I was working on the Boston Globe. The Filament Group device lab had just gotten a Kindle and, after playing around with it for a few minutes, I discovered the browser on it was really quite good. So, naturally, we loaded up the responsive prototypes for the Globe, and everything just worked. I’m not ashamed to say that I got chills.
… Okay, I realize that might sound a bit lame. But I felt a bit like I did when I started working online: here was this brand new device that, just one year prior, I’d never even heard of, much less used, and our work rendered on it without a hitch. I love moments like that.
What do you read religiously?
Evening Edition. Achewood. Wonkblog. Dribbble. MetaFilter.
But beyond the daily churn, I’ve got a few books I try to reread with some frequency, like once or twice a year. Off the top of my head: Robertson Davies’ Fifth Business; Garret Keizer’s No Place But Here; Warren Ellis and John Cassaday’s Planetary.
What applications do you have open while you're working?
I suppose it depends on the kind of work I’m doing. Designing tends to require some combination of paper, Photoshop, Illustrator, and swearing; coding is done primarily in TextMate and fifty different browsers (each broken in a hundred different ways); writing happens in Notational Velocity and Editorially; presentation work happens in Keynote, and with ScreenFlow at the ready. But regardless of what I’m doing, I’ve probably got iTunes and Things open, with xScope at the ready.
Beyond that, I’ve got Tweetbot open more than I probably should, and Mail.app and Calendar.app open more than I’d like. (Though Fantastical makes the latter more manageable.)
About the author
