Evolving Responsive Web Design

In What We Mean When We Say “responsive” and Defining Responsiveness, Lyza Danger Gardner and Jason Grigsby cut to the heart of a disagreement I had three years ago with Ethan Marcotte, the creator of Responsive Web Design and author of Responsive Web Design, a book I published in 2011.

Ethan told the world that Responsive Web Design required, and was defined by, fluid layouts, flexible images, and media queries. All three elements had to be present. If they weren’t using all three, you might be doing something interesting, but you were most definitely not doing Responsive Web Design.

Ethan invented all of this. Without him, we would likely be arguing whether it was time to consider 1280 pixels the new default fixed width for all desktop websites, and sending anything that wasn’t a desktop browser to a function- and content-limited “mobile site” whose URL began with the letter m. Ethan is a brilliant, multi-talented innovator; I am but the shadow of a hack. And yet, before he began creating his book, midway through the writing, and even a year after I published it, I continued to urge Ethan to rethink #RWD as “a bigger idea”—a concept rather than a single set of techniques.

I’m no genius. What I meant by “bigger idea” was limited to the notion that we’d one day be able to create responsive layouts with different techniques—so let’s not restrict the concept to a particular execution. I wasn’t thinking about other meanings of responsive, wasn’t considering problems of responsive content, and so on. I’m not that forward-thinking and it was three freaking years ago, come on.

I lost my gentle argument with Ethan, so the industry is having it now. And that’s just as it should be. Everything worked out for the best. Here’s why:

If Ethan hadn’t included three simple executional requirements as part of his definition, the concept might have quickly fallen by the wayside, as previous insights into the fluid nature of the web have done. The simplicity, elegance, and completeness of the package—here’s why, and here’s how—sold the idea to thousands of designers and developers, whose work and advocacy in turn sold it to hundreds of thousands more. This wouldn’t have happened if Ethan had promoted a more amorphous notion. Our world wouldn’t have changed overnight if developers had had too much to think about. Cutting to the heart of things and keeping it simple was as powerful a creative act on Ethan’s part as the “discovery” of #RWD itself.

We’ve only become ready to think about things like “responsible” responsive design, adaptive content, and a standard approach to responsive images now that we have built our share of first-generation responsive sites, and encountered the problems that led to the additional pondering. Baby steps. Brilliant baby steps.

Some commenters want to use initial-capped Responsive Web Design to mean responsive design as Ethan first defined it, and lowercase responsive design to mean an amorphous matrix of exciting and evolving design thinking. Lyza says soon we’ll stop saying Responsive altogether, a conclusion Andy Clarke reached three years ago.

Me, I like that Ethan stuck to his guns, and that the classical definition will always be out there, regardless of how web design evolves thanks to it. Kind of like there’s HTML 5, a defined and scoped W3C specification, and HTML living standard, an evolving activity. Our industry needs roots and wings, and, lucky us, we’ve got ’em both.

15 thoughts on “Evolving Responsive Web Design

  1. Speaking as a young designer and I feel I speak for the rest of the next generation of web designers coming through, we understand about the roots of the web including table layouts and IE compatibility issues , but never really had to deal with them. As a result, we see responsive web design as, well, just web design. I feel we now need to grasp the roots Ethan laid out and further it again, and again exploring new concepts and ideas etc. Ethan’s stamp on the industry was needed for fresh creatives and developers to build from. And until we have holographic devices, or technology along those lines, Ethan’s foundation for responsive web design will be taught everywhere.

  2. Some really great points that you’re not alone in thinking. Perhaps it only needs a name before it becomes default (if it does). Perhaps what constitutes responsive design will always be that 3-part recipe or maybe that will change as we figure more out?

    It’s given us a means to really explore the uniqueness of the web. This fluid medium. Feels like we’re a long way off fully understanding it…in part because asny time we feel we do, it’ll’ve moved on again and again.

    While responsive is a simple recipe, we’re already seen how many ways it can be interpreted and implemented. I hope it won’t settle down and become a regimented process…half the fun is figuring it out!

  3. I’ve been to countless conferences where panel discussions about RWD have taken place under titles like “Is RWD dead?” or “Time to rethink RWD” etc. The discussions are always the same and they all miss the point. What is a discussion of definition should be a discussion of solutions. The Responsive Web Design Police who strike down any claim of RWD that also included server-side generation or other crimes against Capitalized RWD with furious vengeance are not forwarding the conversation but hindering progress. I’m pretty sure Mr. Marcotte will agree when I say RWD was never about militantly controlling how people accomplish the job but rather that the job be accomplished in a simple, standards compliant, reproducible, and content friendly way. And if that is the case then the definition should like other definitions evolve along with the reality framework it lives within.

    To put it in shorter terms, yes to all of this.

  4. It’s taken me a little while to figure out an approach that I favored. At first it was fixed width grids to try to maintain a sense of control, but I eventually found that I could do better work by adjusting elements ad hoc (typically in a fluid sense).

    It also deserves mention that responsive web design alone can be a mess if not done in tandem with best practices such as “mobile first” and “content first”. I get so sad every time I’m greeted by navigation instead of content, when I’m on my phone.

  5. @Morten Rand-Hendriksen:

    There is always a (healthy) tension between those who advance an industry with sweeping visions, and those who advance it by following rules and processes. Both kinds of thinking (and thus both kinds of people) are necessary to give birth to a movement and keep it alive.

    When Mike Davidson (then a designer at ESPN), launched the first standards-based version of that website back in 2000 or 2001, I praised the achievement and said it showed that web standards could and should be part of any site—not just a personal site.

    But a colleague of mine from The Web Standards Project refused to call the new ESPN site “standards-compliant” because it failed to validate.

    Third-party advertising content beyond Mike Davidson’s control caused the HTML validation to fail.

    To me, the validation failure was unimportant, and my colleague’s take seemed fussy and over-critical to me at the time.

    But if my colleague hadn’t been a stickler for rules and clarity to begin with, The Web Standards Project never would have succeeded; and if nobody had ever paid attention to validation, the movement wouldn’t have taken off.

    Validation was a simple, binary test for basic standards compliance. As such, it was a valuable tool not only for diagnosing problems in a website (which is the real point of validation), but also because its simplicity appealed to the kind of folks who advance the web via rules and processes.

    So be patient with the folks who argue. They may be helping the cause, just as you are—only in a different way.

  6. A wonderful example of how the expression of ideas can change the way they are implemented. RWD probably did need to be understood and implemented in terms of just three techniques before the implications of a bigger idea could be grasped. That you get this is why we continue to look to you for inspiration. Good on you.

  7. I really applaud and appreciate your approach to bettering our industry and supporting your colleges. Beyond the technical aspect of the conversation, I think the way you approached this post was nice. Thanks, again.

    Ps. Over the last few years or so, I’ve been learnin’ and growin with rwd, but haven’t always released ’em into the wild. I hate being hesitant cause of my concern for perfection and worrying about it not being dope enough. When you point out the trailblazers who “do” despite the challenges – not always a simple process, you’re moving other people (like myself), just that little bit closer towards attaining our own versions of that same greatness. Thanks.

  8. I believe that when a customer asks about responsive web design, they’re asking that the design work on multiple devices. But that’s just a part of the design. I’d say that the method used to implement responsive design shouldn’t be hampered by an inflexible definition. After all, isn’t responsive design about flexibility, responsiveness? The methodology should depend on the site.

    On my personal web site I’ve experimented making it responsive, but not in the “Ethan” way. It’s a blog with a single column that doesn’t even use a “mobile” width meta element. Since it only uses two small in size images it doesn’t even use responsive images. Since I believe optimal line width for a best reading experience on tablets and desktops should be around 10 to 12 words a line and that small devices should be less, a few media queries to set font size and line width are all I used. It’s an experiment.

    Setting a hard and fast rule for implementation limits flexibility and experimentation. What counts is giving the user the best experiance they can get based on the browser (not specific browser) they are using to read the website.

  9. Excellent points made here, and the title sums it all up. We must look at web design as a functional type of art – and since it is functional it is a living and breathing entity that must adapt and evolve to changing times.

    It’s not always easy to see a concept as it emerges – you are a forward thinker in that regard. I like the homage you pay to a great thinker in the web design community.

    Isadora Design – Handcrafted Web Design Company

  10. I’ve been designing websites for 9 years or so, and practicing responsive design for the last 3 or 4. I take a rather relaxed approach to what I design and build, and this means I don’t always follow the “rules.” I prefer to get a website out there and working, and then I can go back and fine tune anything I think is necessary.

    With that in mind, I probably followed Ethan’s 3 must haves often times accidentally, but rarely with it in mind. I’m pretty sure we can all agree there’s no one way to do anything in life, including web design.

    I think, if it responds to varying screen widths, then it’s responsive. You can easily have a fixed width element somewhere and still have it fit on a phone and back again to desktop. And if you think not having all three isn’t responsive, well this site proves that wrong: http://motherfuckingwebsite.com/

    We’ll always be evolving how we accomplish things, and there’s no wrong way to do that as long as you understand your goals.

Comments are closed.