Web design, accessibility and why it matters
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. Weworked 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.
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).
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?
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.
Is this why you proposed a responsive approach to designing web pages, in general? How does this design technique align with web accessibility?
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.
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 responsiveand widely 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.
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 fromone 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.
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.
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 Velocityand Editorially; presentation work happens in Keynote, and with ScreenFlow at the ready. But regardless of what I’m doing, I’ve probably gotiTunes and Things open, with xScope at the ready.
Brought to you by Aplus Plastic Box Co supplying all your #plastic storage solutions, Plastic Storage Containers, Plastic Boxes, Plastic Bins, Plastic Storage Boxes, First Aid Cabinets, Air Tools, Tools, Wheels and Castors.