Ethan Marcotte on how responsive web design came about

Ethan Marcotte is a keynote speaker at

Generate New York

, which will take place on 20 June 2014. Enter the code

generate100

at

the checkout

this week to get $100 off your ticket!

If there's one man in the web industry who probably doesn't need an introduction, it's Ethan Marcotte. But as he sits in his white-walled office and sips his morning coffee, it seems the most logical place to start.

"I'm an independent designer, based in Boston," he says, reclining, sipping and smiling. "I've just been living and working in the northeastern United States for the last 15 years or so. Throughout my career I've been fortunate to work the likes of New York Magazine, the Sundance Film Festival, The Boston Globe and People magazine. But I'm most recently known for coining the term 'responsive web design', back in 2010."

A career, not by design

Despite being one of the web's best-known designers, Marcotte's internet career began quite by accident. "I was a literature major in university," he tells us. "At some point during my four years of study I got a copy of Photoshop and just started messing around with web design. First it was for myself, and then some side projects. From there I did some freelance projects for student organisations."

After four years of study, Marcotte found himself needing a break from academia. "Back in 1999, everyone was talking about this internet thing," he recalls. "I thought, 'I know a few things about this internet thing', maybe I could get a job there? I got my first studio job a year after school, and that was where the web got its hooks into me."

During that time, Marcotte worked with an array of web professionals: photographers, fine artists and former architects. They were people, he tells us, who had just stumbled into this new medium. "It brought," Marcotte recalls, "a real multidisciplinary approach to projects... that just stayed with me. It probably sounds a bit hackneyed, but I fell in love with this industry because of the people." By way of a summary, Marcotte says, "So, I guess, I'm 15 or 16 years into taking a couple of years off before grad school."

Responsive's genesis

I have to ask the obvious question: how did responsive design come about? Was the idea - that we should stop trying to tame the wildness of the web and roll with it - already germinating in various corners of the industry? Or did he have a classic eureka moment? The name, he tells us, did indeed come about suddenly and unexpectedly.

The philosophy behind responsive, by contrast, crystallised more slowly. Back in 2000 Marcotte read John Allsopp's 'A Dao of Web Design'. "I stumbled across John's article," Marcotte recalls. "At the time, web design was something I enjoyed, but I saw it primarily as a job: something I showed up to, from eight to six every day. John's article showed me that the web could be a place for, I don't know, craftsmanship? That this could be a place where people can do really brilliant things."

In that watershed piece, Allsopp told designers it was time for the web to move beyond its controlled, pixel perfect, print origins. The web's strength, Allsopp wrote, is its flexibility and it should be embraced. Designers shouldn't strive to tame the web and make it work like print.

"John talked about designing 'for the ebb and flow of things', and that made a big impact on me. I got really excited about moving away from this notion of fixed-width interfaces," Marcotte tells us. "In other words, we should take the web on its own terms and stop defining it by the physical boundaries of the printed page. The industry kept having this discussion about when it was 'safe' to upgrade the width of our designs. [John's article] urged us to think about making designs that followed the shape of the browser, to letting the user's preferences take hold."

But Marcotte realised that flexible layouts alone weren't enough. "For a long time, fluid layouts were a nice-sounding theory, rather than something I'd be comfortable using on client projects. As a designer, there's nothing worse than maximising a window on a huge monitor and seeing uncomfortably long lines of text. So it wasn't until media queries began gaining some traction, I started to realise you could have the fluidity and also preserve a little bit of control over it."

You do need, Marcotte suggests, a middle ground between absolute fluidity and the strictures of print. And Marcotte's idea still needed a name, and this he recalls, is where serendipity played its hand. "I was in bookstore and picked up a book called Interactive Architecture."

Luck, labour and love

The authors, he tells us, were grappling with the tension between a building's fixedness and the ever-changing needs of its occupants. "In architecture, you're casting your decisions in stone and concrete, decisions that will last for decades, maybe centuries. But in recent years, there was this school of thought - these responsive architects - trying to rethink that permanence.

"They were designing spaces that could adapt to the needs of the people who occupy them: walls that could become concave, smart glass that could become opaque when a room gets to certain occupancy and afford some privacy. They talked about this more 'responsive' version of architecture as a conversation between the person and the space. That clicked with me. I loved that image: this idea of a conversation between the person browsing the design and the design itself."

The melting pot of ideas - Allsopp, media queries and architectural thinking - all came together in Marcotte's essay 'Responsive Web Design', which was published on 25 May 2010. And with that, the touch paper was lit.

Responsive reaction

So, how does he feel about introducing the concept to the web industry? "When I'm on stage, I'm terrified," he laughs. "But, you know, at the end of the day, I just wrote an article. I wrote this article and I'm still amazed and terrified at how excited people are about it. All I did was hit on this idea that thinking about desktop and mobile as separate things wasn't going to scale. Tablets weren't a sparkle in anyone's eye yet but, how many separate versions of our sites were we going to make? If I hadn't come up with the idea, somebody else would have."

Marcotte isn't, however, determined to make responsive into the web industry's 'Little Red Book'. Quite to the contrary, he warns against absolutism. "I'm always suspicious of people who suggest there's one true way of working. And for me, that extends to responsive design. If there's a need for a more device-specific experience for your audience, if the research is there, if the demand is there, that's where you start your work. You don't need to try and make everything responsive.

"What we have to remember is, by some estimates, 60 per cent of the world's population are on networks slower than 3G, and people are using devices a few years behind the latest and greatest. My goal is, irrespective of technique, to make the web as accessible as possible and as beautiful as possible for the people who are trying to access it."

Defining beauty

So, how does Marcotte define beauty on the web? "You know, there can be a beauty to numbers, to relationships and to ratios," he says. "So much of what we think about in art, of proportion, of music and metre is driven from mathematics. But I see responsive sites on a daily basis that are staggering and aesthetically beautiful. People are sending links [to the @RWD Twitter account] that are beyond what I could have imagined when I wrote my article. People have taken this really simple formula of fluid grids, flexible images and media queries and are using that as a frame- work to design more flexibly for the web.

"Beauty is a challenging word on many levels because it's so caught up with our notion of aesthetics. But, there's this larger challenge with our work. The definition of 'the web' varies greatly depending upon where you are in the world. Sub-Saharan Africa, for example, has a massive mobile market, far larger than what we have in the States and Europe. In other countries, where infrastructures may have fallen apart, it's still easy to get access to the web, but their version is different from ours.

"How do we offer something beautiful to someone on a slower network, on a less capable phone?" he asks. "I wonder if we need to reframe our discussion about responsive design: we need to design responsively and responsibly. There has been a lot of criticism of sites that are two, three or four megabytes in size - just smaller than a PDF. That may be focusing on the aesthetic but, critically, that experience is going to be worsened if you're not sitting on a robust network. So I think we need to have a discussion about sustainability in our work."

We discuss the tools we have at our disposal to meet this challenge. Specifically, we talk about CSS features that Marcotte hopes to see ratified soon. "I'm really excited about the Flexbox and Grid Layout modules, which will allow us a bit more layout independence. They're trying to combine a lot of the strengths of floats and absolute positioning to give us a lot more control over the position of elements on a page.

"But there are broader, tooling considerations. We need more 'web native' design tools. Things like Photoshop or Illustrator are wonderful tools, but they're about filling a defined space with design; they're missing a flexible canvas. I can't wait to use a more flexible design application." At the moment, he explains, he gets his design to a point where it's 'good enough' and then moves to HTML and CSS. Sometimes, however, he'll need to jump back to Photoshop.

"It's like pogo-sticking between these two worlds. There's no great way to do that under one roof. Maybe that's OK, but with the interesting work from Macaw and Adobe Reflow, I wonder what tools may be available soon."

This leads to another question: how can you communicate a responsive design to a client? "I don't think anyone has hit on the perfect solution yet. When I was working on The Boston Globe we took the comps and moved them into HTML and CSS, [then] we built a prototype and made it responsive. For the [client] design reviews from that point, we didn't project fixed images on the wall. We'd bring a bunch of devices to the stakeholder meetings, hand them out, and have people bring up the site on them."

What's next?

As Marcotte finishes his coffee, we discuss the future. "In addition to some great client projects, I'm thinking about writing another book. Karen McGrane and I are collaborating on a workshop about responsive design, and I'm speaking at a number of conferences this year, such as Generate NY, so I'm working on a new talk about a more module-driven approach to responsive design and layout."

Enter the code generate100 at the checkout this week to get $100 off your ticket to Generate New York!