Responsive Design: An interview with Ethan Marcotte

An edited version of this interview appears in Chapter 7 of A Web for Everyone.

Ethan Marcotte is a designer who codes and a coder who designs. While many web professionals have this combined skillset, Ethan brings a high level of mastery to both disciplines. And like all great masters, Ethan is also a teacher. Ethan literally wrote the book on a flexible design approach called “responsive design.”

We wanted to learn from Ethan how a flexible approach supports accessibility.

Ethan started his career in the late 1990s, and has worked in design studios for most of his career, including several years as Interactive Design Director for the award-winning design studio, Happy Cog. Currently, he runs his own web practice, and has worked for a variety of clients including Stanford University, Sundance Film Festival, and New York Magazine. He recently finished a large-scale and groundbreaking design of the Boston Globe, with Filament Group, in which he employed the “flexibility in use” principle in a design approach he invented, and he literally wrote the book on “responsive design.”

Balancing control and flexibility through responsive design

“Flexibility is near and dear to my heart.” Ethan’s early career was spent creating flat graphics in Photoshop or Illustrator, vetting the designs with clients, and then implementing the design in code. “I started off building sites that were 620 pixels wide, then 760, then 960. Every couple of years there was a universal consensus established: ‘Okay, now it’s safe to upgrade.’ But natively, the web doesn’t understand width or height or anything like that.” This disconnect got him thinking about a more flexible approach.

The essay by John Allsopp, “A Dao of Web Design,” helped Ethan see that by bringing preconceptions to the web based on a completely different medium–print–designers were getting in the way of the flexibility inherent in the web. And that flexibility was key to accessibility. Ethan began to explore ways to achieve “controlled flexibility” in web design, a place somewhere between absolute flexibility and absolute control.

What is so fundamentally powerful about the web is that promise of access. We have the technology and approach in place to design sites that are as viewable on a feature phone as they are on a 27-inch monitor with the latest Chrome browser. Flexibility doesn’t require a sacrifice in the quality of the experience on one end or the other. It’s all about delivering content to people.

Ethan says that content delivery is the primary goal of a responsive design approach: making sure that content is universally accessible, regardless of how it is accessed. It starts with structured HTML for content, and then uses CSS and JavaScript to progressively enhance the experience. HTML5 media queries provide the opportunity to “tune the display,” adapting elements such as color and size, depending on the needs of the user.

“Responsive design is really just a new name for a lot of old thinking about capitalizing on the flexibility inherent in the web. We use flexible layouts by default, but then get some of the control and constraint we need as designers using media queries and other approaches to enrich the experience.” It’s an approach that looks at flexibility “not as something we need to work around or constrain, but rather as an opportunity to enhance the design.”

In essence, responsive design is about “bringing the design to meet the users.”

Redesigning the Boston Globe website

Ethan and his colleagues at Filament Group implemented responsive design on the Boston Globe website. “It was a seriously fun project. There were a lot of interesting problems to solve. And the Globe was really committed to the idea of making their content as universally accessible as possible.”

“We didn’t want to think about accessibility at the end of the project, as is usually the case. We tried to think broadly throughout the process, and work proactively rather than reactively.” Rather than work from a list of browsers and devices, they focused on characteristics, such as the size of the screen, the input model, and the availability of technologies such as CSS and JavaScript. “Those kinds of categories really helped when we were thinking more broadly about the design, both from the layout perspective and an interface perspective.” For example, rather than test how a carousel would work on a specific device, they asked how it would be accessible to someone who didn’t have JavaScript. Working from a master list of categories, they established a baseline for accessible content, and used progressive enhancement techniques to enhance the experience for more capable systems.

The new bostonglobe.com, launched in September of 2011, has been cited as a “major step in the evolution of website design,” (Beaconfire) providing an “elegant, readable website no matter what screen size you’re using.” (Webmonkey) Ethan has been getting positive feedback on the site’s responsiveness, including in some scenarios they did not even consider during the design process. “Somebody posted a screenshot on Flickr after the site launched of the Globe as rendered on an Apple Newton. It’s structured HTML–there are headings, paragraphs, lists. You can still browse the site. That’s a testament to the portability of the technologies we work with.”

Supporting responsive design in the design and development process

The design process for responsive design is a departure from more commonly used methods. “It’s common in web shops to finish a design and then throw it over the wall to the development group, and those two groups never interact.” With responsive design, the approach needs to be more collaborative and iterative, testing ideas in a responsive framework and then iterating as needed.

Also, with responsive design, it’s critical to move to HTML and CSS early in the design process, allowing for testing across browsers and devices, and using the built-in capabilities of different devices, such as VoiceOver on iOS devices. “If you treat mock-ups in the design phase as a ‘catalog of assumptions,’ and move quickly to responsive prototypes, you can test those assumptions directly in the browser. That cuts down the number of surprises.” And testing is key to accessibility, making sure that content was accessible and legible at the baseline and then enhancing up. For the Globe, they used Blackberry 4 as one such baseline: “If you give that browser more than a couple kilobytes of JavaScript to parse, it completely falls on its face.” In considering the experience of the site at the baseline, “You could argue that some of those experiences are less rich. What we found was that they matched the readers’ expectations for the device they had in their hand.”

In some ways, the key to a successful responsive design is not the design or the technologies used: it’s the content. A “mobile first” approach is a great way to regulate the content requirements. “We talked about whether the content was useful to our mobile users. It the answer was ‘no,’ then we asked if it had value to anyone. Making a commitment to content across every device and every context was key.” The content management system and publishing workflows are important considerations as well. “If you are hoping to deploy the same content in different scenarios, then you have to look at the quality of the markup.”

Ethan is a designer who appreciates the fine details of the craft, such as the rhythm and measure of a well-set block of text. In discussing design, he invoked Robert Bringhurst in speaking about “tuning the measure to the distance between the eye and the screen.” At the same time, he acknowledges, “We have no way to predict that.”

But Ethan does not feel limited as a designer by web technologies. “Some people see HTML and CSS as a limiting factor. For me, there’s always been a way to do what I need to do.” In large part, that is because Ethan does not try to control his designs: “The notion of control is foreign to the web.” He finds that “letting go of the assumption of what you expect your design to look like is actually liberating.”

I like thinking about how a design is going to read on a Kindle or a feature phone. Those might not be the most visually arresting experiences, but there are still opportunities for things to be designed. Even if someone is having content read aloud on a page, that experience is something we can design–we have the technology to do that now. For me it’s a process of discovery, trying to establish ideas on a page and then moving into code to finish the design process. That’s been fun for me.

Ahead: More opportunities for responsiveness

Looking ahead, Ethan sees more opportunities to build responsiveness into websites and web applications, including new CSS3 modules like flex box and grid layout, which will allow greater control over the display order of elements. But in order to move forward with a responsive approach, he believes that we need to revise our expectations about control. For so long. our efforts have been about “slotting paragraphs into specific positions on pages.” For universally accessible content, Ethan urges that designers work with the native flexibility of the web, rather than trying to constrain it. “If your web app is a call to one JavaScript function that spits out HTML to the page, think about what that experience is going to be like for less capable browsers and readers. If you think flexibly from the outset, it makes a lot of things much easier.”