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.
“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.”
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.
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