Hey, here’s a thing that’s fun to say:

Happy tenth birthday, responsive web design!

That’s right: the original “Responsive Web Design” article turns ten today. It feels odd to think the article’s been online for a decade; odder still to think of everything that’s happened since it was published.

To commemorate things, I’m working on a few blog entries that’ll be looking at different parts of responsive design: what’s changed in the last ten years, what hasn’t, and where the idea might be going next. If that sounds appealing to you, feel free to sign up to have new blog entries emailed to you.

But those are still in progress. Today, I’d like to talk about how responsive design came to be. It’s a story of a talk, and then an article. It’s also the story of the people who helped make those things happen.

…okay, so, yeah, look. Technically speaking, today’s not really responsive design’s tenth birthday. The article turns ten today, but the concept turned ten in early April. I coined the phrase for the first time at An Event Apart (AEA) Seattle on April 6, 2010, in a talk titled “A Dao of Flexibility.” (If you’re a glutton for punishment, you can watch a video of “A Dao of Flexibility” recorded later that year. Here’s AEA’s write-up from when they posted it.) In that talk, I showed folks how I created a flexible, device-agnostic layout using fluid grids, flexible images, and media queries: the three ingredients of a responsive design.

If you watch the talk, you’ll see the title’s taken to resonate with John Allsopp’s “A Dao of Web Design”. That article was an enormous influence on me as a young designer. And honestly, it still is: it really shaped the way I think about the web’s potential as a design medium.

But I didn’t start the talk with a title. In the years leading up to the talk, I’d been working on more design projects that’d asked me to work on separate, standalone mobile websites. Heck, not even that: frequently, they’d ask for an “iPhone website.” And something about that didn’t quite feel right to me. And it definitely didn’t feel sustainable — were we going to create separate websites for every new device that came along? Besides, I’d always been interested in creating layouts that were flexible and beautiful. So I thought I’d use my AEA talk to suggest an alternative.

Before I started working on the presentation itself, I designed a fluid, grid-based layout for a simple web page, and started looking for ways to adapt it for differently-sized screens. There’d been JavaScript-driven approaches in the past, sure, but I wanted to see if there was a way of adapting the design where I’d defined it: inside my CSS. After poking around a bit, Craig Hockenberry’s “Put Your Content In My Pocket” set me on to media queries as the solution. I had a fluid layout that, thanks to a sprinkling of media queries layered on top, could look good on my phone, on my desktop monitor, or on anything in between.

But I still didn’t know what to call it.

Around that time, my partner Elizabeth visited the High Line in New York City shortly after it opened. When she got back, she told me about these wheeled lounge chairs she saw in one section, and how people would move them apart for a bit of solitude, or push a few chairs together to sit closer to friends. We got to excitedly chatting about them. I thought there was something really compelling about that image: a space that could be controlled, reshaped, and redesigned by the people who moved through it.

I remember spending that evening reading more about those chairs and, from there, about more dynamic forms of architecture. I read about concepts for walls built with tensile materials and embedded sensors, and how those walls could bend and flex as people drew near to them. I read about glass walls that could become opaque at the flip of a switch, or when movement was detected. I even bought a rather wonderful book on the subject, Interactive Architecture, which described these new spaces as “a conversation” between physical objects or spaces, and the people who interacted with them.

After a few days of research, I found some articles that alternated between two different terms for the same concept. They’d call it interactive architecture, sure, but then they’d refer to it with a different name: responsive architecture.

A light went off in my head. Responsive felt right for what I was trying to describe: layouts that would just know the best way to fit on a user’s screen. A user wouldn’t have to tap or click on anything to get the best design for their laptop or smartphone; rather, the design could fluidly adapt to the space available. It’d just respond.

I don’t remember much about giving the talk, other than being terrified. (New talks are the worst.) I remember thinking that it went over well, and that attendees seemed excited. I had a brief but lively chat with Mark Boulton in the hallway about the possibilities. But if Mandy Brown hadn’t been there, responsive design wouldn’t have found an audience larger than the few hundred people who were in that lovely auditorium.

At the time, Mandy was an editor at A List Apart magazine, and a cofounder of A Book Apart. She came right up to me after I stepped offstage, and said, “that talk needs to be an article.” As soon as I got home, I pulled together a draft, along with a new example design. And exactly three weeks after Jeremy Keith’s HTML5 For Web Designers was first published, “Responsive Web Design” went live in A List Apart.

Nothing’s been quite the same since.

Responsive design couldn’t have happened without Elizabeth or Mandy. The talk, the article, and the books that followed — they couldn’t have happened without their help, their time, and their work. I’m grateful to them, deeply.

And of course, I’m grateful to you. If you read or shared the article, read my book, thank you. For the beautiful responsive things you designed or built, thank you. Because I just met a publishing deadline, and you took it much, much further than that. I can’t believe it’s been a decade; I can’t wait to see what happens next. I can’t wait to see what responsive designs you make next.

As always, thanks for reading. I’m glad you’re here.