Adaptive, responsive, or progressive enhancement

What is the difference between responsive web design and adaptive web design? It’s a bit of a boring question, but I think we need an answer to it, since these terms are both used, and people mean different things by them. It causes confusion.

Responsive web design

In his book, Ethan Marcotte — the person who coined the term — writes that responsive web design takes three core ingredients:

  1. A flexible, grid based layout
  2. Flexible images and media
  3. Media queries

So basically, if we use the term as Ethan proposed it, responsive web design is about fluid layout for different screen sizes and related technical issues and solutions. I know many people use a much broader definition.

Adaptive web design

Around the same time that Ethan Marcotte published his book, Aaron Gustafson published another book called Adaptive Web Design. When I bought it, I thought it would be about the three points outlined above, about layout basically. But I didn’t really pay much attention to the subtitle of the book, which reads Crafting Rich Experiences with Progressive Enhancement. In this book, the term adaptive web design is used as an exact synonym for progressive enhancement.

Progressive enhancement

If I ask people what they mean when they use these terms I get as many different answers as there are people. Some reverse the terms and say that adaptive is just about layout and responsive is about everything. Others say responsive is about fluid grids, while adaptive is about media queries with fixed grids in them, both very limited definitions. And the opposite definition is used too, of course.

I don’t think there needs to be a difference between the terms. If it’s up to me, both responsive web design and adaptive web design are synonyms for progressive enhancement. I think Ethan’s definition is a little outdated and unnecessarily restrictive. I don’t think there’s a reason anymore to just talk about optimising layout, we should talk about optimising other features, and interactions too.

But what is it?

But, as is often the case, I could be wrong here. It could be that I haven’t thought about it long enough or that I don’t understand the reasons behind more restrictive definitions. I’d love to hear your opinion, since I’d love to be able to use these terms without causing confusion. Comments are open.

Comments

  1. I have understood Responsive Web Design to be a ‘part’ of Adaptive Web Design. Both, in turn, fit in a ‘philosophy/methodology’ of Progressive Enhancement.

    I don’t believe they are synonyms for PE, but can be parts of it.

    In my mind (maybe mainly because of Ethan’s definition) RWD is concerned with the more technical layout-aspects (fluid grid, mediaqueries, etc) while AWD deals with more ways in wich a web design can adapt to provide an optimal experience.

    E.g. I see the option of auto-centering a map on one’s current location (when geolocation is available) as part of AWD more so than RWD.

    However: ‘proper’, accessible and future-friendly web-design deals with both RWD and AWD but always keeps a strong focus on Progressive Enhancement as the main guiding principle. (We know it is quite possible to design a _sub-optimal_ experience with RWD/AWD techniques.)

  2. Thanks for the blog entry!

    > I don’t believe they are synonyms for PE, but can be parts of it.

    I tend to agree with this, personally. It’s possible to make a responsive design that isn’t PE-friendly, or that isn’t accessible. The best ones manage to do both of those things, of course, but that’s left to the discretion of the designer.

    My own definition of responsive design is, as you say, probably a little too layout-focused, and broadening it to be more, well, _design_-oriented is something I’ve been speaking about pretty extensively over the past couple years. But then, I think most of us are; it’s early days yet, and we’re all still trying to figure out how this stuff works. :)

    (For what it’s worth, Aaron’s use of “adaptive” is a bit new to me. I first encountered it in [John Allsopp’s “A Dao of Web Design”](http://alistapart.com/article/dao), which has influenced [my own use of the term](http://unstoppablerobotninja.com/entry/on-being-responsive). But as Aaron uses it, I believe “adaptive web design” is indeed a synonym for “progressive enhancement.”)

    • Cyriel
    • #

    I think the question is about at adaptive as the answer. Ethan has a definition, for example but if you follow that definition, you could say that LukeW’s RESS methodology isn’t responsive while in fact it definitely is.

    And as web developers we can discuss and fight for hours and hours on Branch, Twitter and whatnot, we could write hundreds of blog posts about it and it still wouldn’t be clear to our clients. Why? Jargon.

    In my humble opinion they are all terms coined up to describe one and the same thing: to provide an experience which takes advantage of all the features of the platform people are using; now and in the future and whether it is based on web standards or technologies provided by the vendor (Apple, Google, whatnot) — yes I am pulling in native apps as a first class citizen here.

    Products that can, and (likely*) will work everywhere and anywhere.

    As web developers we can stand behind this with all the research done and publications written by trailblazers such as Ethan, John and Aaron and our clients have a definition even they can grasp (“So you are saying my experience will look great on mobile? Yes! on TV? Yes! on consoles? Yes! It will look great everywhere you want it to look great!”).

    *) Because like with all other things in life ‘It depends’ :-)

    • Simon
    • #

    I personally tend to separate them like this:

    PE is about browser features
    RWD is about browser (viewport) sizes
    AWD is about browser (use) context

    Perhaps it’s short-sighted but it defines them with clear responsibilities and their real-life use.

  3. @Cyriel I agree about the (problem with) jargon but I feel there is some value in defining these terms. Especially since our clients are starting to use that jargon (RWD especially reminds me of HTML5ALLTHETHINGS).

    While your answer (paraphrased – “It’s all simply ‘providing an optimal experience’…”) might be technically ‘correct’ I feel it’s too abstract. We need to define what we talk about (with clients) when e.g. RWD is mentioned.

    I like the simplified distinction @Simon uses, with one exception: Progressive Enhancement, IMHO, should be clearly communicated as a guiding principle and, therefore, distinct from the ‘technical’ aspects of RWD/AWD. Apart from this I like the (simple) distinction between ‘context’ (I know… :) ) [AWD] and ‘size/layout’ [RWD]. Good one!

  4. When I wrote Adaptive Web Design, it had been many a moon since I had read John’s piece, but his vision for the web perfectly aligns with the progressive enhancement philosophy Steve Champeon began pushing for in 2003 and that I focus on in my book. I chose the primary title of “Adaptive Web Design” a way to succinctly express the ideas presented in the book while simultaneously differentiating my title from “Designing with Progressive Enhancement” by Filament Group.

    I have always maintained Ethan’s definition of “responsive web design” as he was the one who came up with the term. It only seems fitting that he should govern its meaning. And, for what it’s worth, I don’t see it as overly strict, but rather very focused; it’s concerned with layout, hierarchy, and creating an optimal reading experience regardless of device.

    Overall, I see the two concepts as complementary, but, as Ethan says, not all responsive sites are accessible or progressively enhanced. Responsive sites built “mobile first” are more likely to be accessible and progressively enhanced.

    I feel nomenclature is incredibly important to ensure accuracy in our communications (e.g. What is HTML5 now?) which is why I tend to be a bit more of a stickler for definitions than others are. That said, I think as long as what you are doing on the web puts users in control and focuses on creating great experiences for them, it does not matter what you call it.

    • Cyriel
    • #

    @David: When mentioned yes, no doubt. But in the years I’ve worked on apps and the web I’ve seen it is way too easy to fall into the ‘Jargon Trap’ because as a designer and/or developer you are so accustomed to the language spoken in your profession you think *everyone* will easily grasp it.

    Even driving the advantage of RWD home itselves is often a challenge; For us as designers and developers it’s pretty much a normal part of our toolkit nowadays but for many customers who don’t think in terms of HTML and CSS but in pretty web pages bringing jargon to the table will make communication quite difficult. This is why many visualizations dumb it down as: a page with desktop layout, a page with tablet layout and a page and a phone layout because that’s *way* more easier to understand for people not involved with web design.

    When clients do come up with a *specific* question such as “what is this Responsive Web Design thing I’ve been reading about” (because someone decided to fill a article targeted at marketeers with jargon to make it a bit more impressive — one the main cause why non-designers/developers are starting to use jargon without fully comprehending it IMHO) I agree that you’ll need some simple explanations to explain each term (and I do think Simon has some terrific explanations there) but for a *general* explanation I don’t think you need to make it much harder and likely more confusing than it needs to be.

    • Vasilis
    • #

    Thank you all for your fantastic, thoughtful comments. More than enough food for thought for another blogpost.