This article was written in 2013. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

The definitions of responsive and adaptive web design

Yesterday I wrote a little post about the exact definition of the terms responsive and adaptive, in which I asked for comments. And I got some comments, and all of them were excellent. It’s clear that my hypothesis at the end of my post — it could be that I haven’t thought about it long enough — turned out to be true.

But first this: When I reread the article I noticed that one remark I made may sound a bit harsh. I wrote that I think that Ethan’s definition is a little outdated and unnecessarily restrictive. This is unnecessarily rude. His definition made perfect sense back when he introduced it, and back then it was not restrictive at all. On the contrary, the term responsive design changed the way our industry looks at the web. Finally. For this he has my eternal gratitude.

As Ethan mentioned in his comment, he currently uses a broader definition. Which is logical, we’ve been only designing responsive sites for a little over two years, we’re still learning. And one of the things we learned is that there are more features you can optimise for than just screen size. So, with this out of the way, let’s see if we can come up with a definition of the terms responsive web design and adaptive web design.

Attitudes

There were three different attitudes towards my question. The first one considers these terms to be somewhat the same. I used to have that attitude. Another one considers these terms to be jargon, and as such to be confusing an sich. These terms should simply be replaced with a sentence like making the best possible product. And then there’s the third attitude which considers a clear definition to be valuable and which thinks a distinction between these terms actually makes sense.

Attitude one: it’s all the same

This attitude exists because everybody has his own definition of the words responsive and adaptive, often meaning completely different things, and often meaning the exact opposite of their original definition. This is a clever solution for large agencies with many clients, I think. Instead of using clear, distinct meanings for these terms, we use them as a catch-all definition for a set of web design best-practices. In this case, I use them as a synonym for progressive enhancement and accessible design. Most commenters did not agree with this attitude, and I think I agree with them. But I do think that within a large organisation this might actually be a clever idea.

Attitude two: kill jargon

This attitude doesn’t care about these terms and considers it a waste of our time to discuss in length about them. It should really only be about providing an experience which takes advantage of all the features of the platform people are using […] whether it is based on web standards or technologies provided by the vendor, like Cyriel wrote. In other words: Stop wasting time about trivial matters, and start making good stuff. I definitely like this sentiment, but it’s not going to end the confusing use of these terms.

Attitude three: we need a clear definition.

There are some excellent reasons for using clear, distinct definitions. For example, David reminds us that our clients are starting to use that jargon, and we need to be sure that we are talking about the same thing with our clients. Or as Aaron puts it: I feel nomenclature is incredibly important to ensure accuracy in our communications. They both mention the confusion around the term HTML5 which has a different meaning for marketers and developers, which makes things unnecessarily complicated.

The definitions

A few commenters tried to come up with clear definitions. Simon came up with some fantastic, short definitions.

Responsive web design is about browser (viewport) sizes and Adaptive web design is about browser (use) context

I like that. Even though the term context is equally confusing as these two definitions. Maybe we could use features instead of context here.

And I think Aaron came up with a nice description of responsive: it’s concerned with layout, hierarchy, and creating an optimal reading experience regardless of device.

Proposed definition

Responsive web design is about browser (viewport) sizes. It’s concerned with layout, hierarchy, and creating an optimal reading experience regardless of device.

Adaptive web design is about browser (use) features. It’s concerned with responsive web design and with creating an optimal user experience depending on different devices.

I need your help with this one, especially with the definition of adaptive. I don’t think it’s good enough yet.

Conclusion

There is a difference between the terms responsive and adaptive and we have to be able to make a clear distinction. To prevent confusion with clients we should make sure that we are talking about the same thing when we use these terms. There are practical approaches possible, where the exact term used doesn’t really matter as long as we know we mean the same thing, but a more thorough solution is probably to use the right terms in the right moment.

Thanks all for your fantastic feedback. If you have some time left maybe you could help me out with finding the definite definition for both terms. Comments are open again.

Comments

  1. Responsive design is about creating an optimal reading experience, regardless of browser or screen size in my opinion. Of course, this depends on the way it’s determined in the source code, but from what I gather, in most cases the display depends primarily on screen size or browser window size instead of on the device you use (it’s different on your phone, because the screen size is different).

    As for adaptive web design, maybe you should say it’s concerned with creating an optimal user experience depending on the device, since whole new features or buttons can be introduced depending on a certain device that are not visible on other devices (so it definitely regards the device).

    • Vasilis
    • #

    Thanks for your great feedback, dxtr. I should have asked a lawyer for a solid definition in the first place (-:
    But I think that browser/viewport size is more accurate than screen size. The *physical* size of the device does matter, but since we can’t really detect it, the viewport is the best guess.
    Your suggestion for the definition of adaptive web design is excellent and I changed my previous version. Thanks again!

  2. You’re welcome and you’re right. I’m also saying it’s about the viewport/browser size, that’s why the last word in the definition (‘device’) bugs me. Shouldn’t that be viewport size as well? Even on a single device the viewport size can change (e.g. Tilting your phone or resizing your browser window). So maybe it should become this?

    Responsive web design is about browser (viewport) sizes. It’s concerned with layout, hierarchy, and creating an optimal reading experience regardless of viewport size.

  3. It’s a great article but I am still left with a certain amount of confusion. As an industry we still seem to be confused by adaptive. Many people refer to the range of client-side techniques available (progressive enhancement and/ or graceful degradation techniques).

    Some (I think) confuse the two. For example this response on Stackoverflow:
    http://stackoverflow.com/questions/14831530/responsive-design-vs-adaptive-design

    When I am talking to clients about this stuff I use the following generalisations:
    1. Responsive is all the media query / fluid grid / fluid media stuff that has been well defined by Ethan.

    2. Any clever JS stuff to load things in or turn stuff off we can call progressive enhancement or graceful degradation (or just “whizzy JS stuff”).

    3. Adaptive is more about doing things on the server-side. Detecting devices / connection / screen sizes etc, etc and serving up different templates (or removing hi-res images and banners).

    Of course all of the above is just part of have “a great adaptive strategy”. It’s just that the more I read, the more that this stuff is so badly defined (apart from RWD because Ethan did a good job there!).

    I fully accept your definition of adaptive (clearly different to mine). It’s just hard to talk to marketing teams about this stuff in those terms.

    What would you call the server-side part in all this or would you argue that your definition is general enough to encapsulate client and server-side techniques?

    • Vasilis
    • #

    Hi James, thanks for your comment. I think the definition of *adaptive* is general enough. I don’t think it is about client or server-side, I think it’s about user experience. While I do believe that client-side feature detection is usually the best way to enhance the user experience, I also know that clever client-server strategies exist. Sure this is part of an adaptive design/development approach.

  4. Why not meld the two? Adaptive + Responsive = Intelligent web design. If that could be implemented, coding and designing could be a lot easier, I think…