Ethan Marcotte on web design, accessibility and why it matters to journalists, digital storytellers

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 — — 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 MagazineNew 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.

Ethan Marcotte (Photo by Marc Thiele)

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?

[sc:pull-right pulltext="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. " ]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.

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?

[sc:pull-left pulltext="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. " ]For me, it’s a question of reach. I thought there was something kinda lovely and poetic about the marketing campaign around the 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.

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 EditionAchewoodWonkblogDribbbleMetaFilter.

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 BusinessGarret Keizer’s No Place But HereWarren 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 and open more than I’d like. (Though Fantastical makes the latter more manageable.)

About the author

Miranda Mulligan

Executive Director, 2012-2014

Latest Posts

  • Introducing StorylineJS

    Today we're excited to release a new tool for storytellers.

    StorylineJS makes it easy to tell the story behind a dataset, without the need for programming or data visualization expertise. Just upload your data to Google Sheets, add two columns, and fill in the story on the rows you want to highlight. Set a few configuration options and you have an annotated chart, ready to embed on your website. (And did we mention, it looks great on phones?) As with all of our tools, simplicity...

    Continue Reading

  • Join us in October: NU hosts the Computation + Journalism 2017 symposium

    An exciting lineup of researchers, technologists and journalists will convene in October for Computation + Journalism Symposium 2017 at Northwestern University. Register now and book your hotel rooms for the event, which will take place on Friday, Oct. 13, and Saturday, Oct. 14 in Evanston, IL. Hotel room blocks near campus are filling up fast! Speakers will include: Ashwin Ram, who heads research and development for Amazon’s Alexa artificial intelligence (AI) agent, which powers the...

    Continue Reading

  • Bringing Historical Data to Census Reporter

    A Visualization and Research Review

    An Introduction Since Census Reporter’s launch in 2014, one of our most requested features has been the option to see historic census data. Journalists of all backgrounds have asked for a simplified way to get the long-term values they need from Census Reporter, whether it’s through our data section or directly from individual profile pages. Over the past few months I’ve been working to make that a reality. With invaluable feedback from many of you,......

    Continue Reading

  • How We Brought A Chatbot To Life

    Best Practice Guide

    A chatbot creates a unique user experience with many benefits. It gives the audience an opportunity to ask questions and get to know more about your organization. It allows you to collect valuable information from the audience. It can increase interaction time on your site. Bot prototype In the spring of 2017, our Knight Lab team examined the conversational user interface of Public Good Software’s chatbot, which is a chat-widget embedded within media partner sites.......

    Continue Reading

  • Stitching 360° Video

    For the time-being, footage filmed on most 360° cameras cannot be directly edited and uploaded for viewing immediately after capture. Different cameras have different methods of outputting footage, but usually each camera lens corresponds to a separate video file. These video files must be combined using “video stitching” software on a computer or phone before the video becomes one connected, viewable video. Garmin and other companies have recently demonstrated interest in creating cameras that stitch......

    Continue Reading

  • Publishing your 360° content

    Publishing can be confusing for aspiring 360° video storytellers. The lack of public information on platform viewership makes it nearly impossible to know where you can best reach your intended viewers, or even how much time and effort to devote to the creation of VR content. Numbers are hard to come by, but were more available in the beginning of 2016. At the time, most viewers encountered 360° video on Facebook. In February 2016, Facebook......

    Continue Reading

Storytelling Tools

We build easy-to-use tools that can help you tell better stories.

View More