The Five Stages of Responsive Web Design

For the past 15 years or so I’ve made a living building carefully handcrafted, pixel-precise websites. I’ve absolutely loved the challenge of tackling even the most daunting visual designs handed to me by talented web designers. You know the kind of websites I’m referring to…. They look more like a printed work of art and less like a simple word-processed document with text and decorative clip art. Irregular column widths, multiple overlapping graphics, endless variation from one page to the next, all wrapped in a fly-out navigation structure three levels deep—and it needs to look the same in a dozen browsers. No problem… how soon can I start?

After finishing a particularly difficult website build, I secretly enjoy hearing the comforting praise from a designer who marvels at how my web page looks “exactly like the original Photoshop comp.” I also like the occasional, “Wow, is that the comp or the HTML?”

Learning to let go

A few years ago I realized those same fixed-width, tightly controlled layouts were increasingly difficult to “get just right” in the quickly expanding universe of mobile devices and user contexts. And it wasn’t because Internet Explorer couldn’t quite keep up with Chrome and Firefox (but, let’s face it—that was also true). Almost overnight those clever works of visual design and code were being viewed on tiny phones, tablets of all sizes, small laptops and smaller netbooks… and even huge TV screens via game console browsers.

I just couldn’t keep up. I felt like I had lost control. I felt angry and frustrated. I briefly considered other career options. Surely there’s got to be a better way! At about this same time, I read Ethan Marcotte’s original responsive web design article published on A List Apart. But honestly, I was having a really tough time getting a grip on this new way of thinking. It was like I was going through the five stages of grief:

  • Denial: “Surely this will never work. It will go away if I just ignore it.”
  • Anger: “I’m not giving up pixel-precise control! That’s my specialty!”
  • Bargaining: “We’ll make minor adjustments so that it looks good on tablets. We can build a separate mobile site for the rest.”
  • Depression: “I don’t want to go through this again. I already gave up table-based layouts.”
  • Acceptance: “Hey, maybe this could work after all. I’ll try it out and see what happens.”

I had enjoyed Ethan’s presentations at a couple of web design conferences and was immediately impressed with his quiet confidence and broad knowledge of, well… pretty much all things web. I was also more than a little intimidated by the fact that he can do so many things so well. He’s an accomplished conference speaker, published author, web designer and front-end developer. Those last two skills, designer and developer, are key to this whole thing working because responsive web design (RWD) requires true collaboration between the web designer and the front-end developer. Ethan can do both… which must be a big advantage.

Let the healing begin

But in my world, I could see this might be problematic. How is this going to work in a typical agency workflow where someone else creates the design, and I write the code while they move on to another project? The truth is, it probably won’t work like that… at least not without some changes to our processes and mental models of how we think about and ultimately design for the web. With RWD we’ll need more collaboration during the design and development phases of the project to allow minor course corrections along the way. We’ll need to rely less on static Photoshop comps and perhaps even start to design in the browser . We’ll need to try things out in the browser to see what parts of the design work and what needs slight modifications in order to be more flexible. In Ethan’s original A List Apart article, while borrowing from the field of architecture, he challenged us to embrace the inherent flexibility of the web. Move with the ebb and flow, as it were. Instead of building a single device-specific display of our website, we should create a “flexible foundation” in which the content can adapt to the capabilities—and limitations—of the vast array of devices available today and in the future. His original RWD recipe includes the following three technical ingredients:

  1. Fluid grids
  2. Flexible images
  3. Media queries

How does that make you feel?

About now, maybe you’re feeling some of the same anxiety I initially felt about RWD. Well, I’m here to tell you it’s OK. Lately I’ve discovered that it’s more of a journey than a destination. It’s simply a method of designing and building websites, and there are a lot of things to consider. We’re still trying to figure out how to make it all work. And like most things, there’s no single right way to do it. So we’ll take it one step at a time and experience it together.

Next up

Next time we’ll dive into each of the three basic components of RWD and explore each one in detail.