Responsive and Adaptive Design: Defined

We’re a funny ol’ bunch in our industry. We push and push to make things better but never seem to define what is the correct terminology or definition for that ‘thing’. In the same way we fell in to calling something ‘The Fold’, which is still causing problems now.

It’s been a while now since ‘adaptive design’ and ‘responsive design’ were brought in to mainstream discussion and implementation but we’re yet to provide a definitive definition of what they are. The evening before DIBI Conference 2011, I was sat having dinner with the speakers and entered in to a discussion with Jeffrey about what adaptive and responsive design were when you defined them. I’m not sure I did a very good job of explaining myself over the many discussions which were happening that night, either way we certainly didn’t come to any kind of agreement.

I’m in no doubt that everyone has their own interpretation of what they both are, and I’m not about to start saying you’re wrong either. I’d prefer to try bring all views together in one agreed collective view.

The question which I’d been asking of myself around that time of the DIBI Conference was, “If I was to look at a site, why would I define it as responsive over adaptive and vice-versa.” As, if they were the same thing, how did we come to two different phrases. Surely we couldn’t get stuck in a ‘lost in translation’ type game again.

The Confusion

I believe that one thing which has caused a lot of confusion is media-queries. In their simplest form, media-queries are just a tool. We use them to get to an end goal of creating a responsive or adaptive design.

The Differences

If we take a look at the words ‘responsive’ and ‘adaptive’ and look more in to their meaning we get a step closer as to why they are whole-heartedly different.

Responsive – “Acting in response to its surroundings in a sympathetic or ready manner.”

Adaptive – “Serving or Able to adapt, like the coloring of a chameleon.”

What is Responsive Design?

Responsive design revolves around how content is represented on the screen. No matter if the browser is at full size on a 27″ Cinema Display or on a mobile device, the content has been thought out and coded to display gracefully using a combination of percentages AND media-queries. If you change the browser size to something smaller than its most outward boundary the content will begin to respond to your movement immediately. The media-query changes should almost not be identifiable or at the very least act as a secondary tool for the achievement. Below are examples of responsive design.

Happy Cog Hosting

Happy Cog Hosting gracefully responds to the size of the browser and/or the device which you’re using it view it.

Hicks Design

Hicks Design is a further example of how sites which aren’t held to a constraint of 960px respond as soon as the browser size is changed in both larger and smaller sizes.

What is Adaptive Design?

Adaptive design is just that, it is design which adapts to its surroundings. Adaptive design is something which relies much more heavily on media-queries. A site itself will ultimately not adapt or change until it hits a media-query marker such as 320px or 768px. I’d personally say that Adaptive design revolves around how a site is presented on a screen rather than the content. Below are examples of adaptive design.

Colly.com

Colly’s site is a perfect example of ‘adaptive design’, when playing around with moving the browser to different sizes you can instantly tell that the visible changes are from the media-query markers being hit.

Adam Polselli

Adam’s recently launched new site design also shows ‘adaptive design’ rather than responsive design. As it hits the media-query markers, the design shifts to adapt to the smaller screen size.

Which is the right one to use?

There is no right or wrong answer. As I’ve explained, responsive and adaptive design are two entirely different things. Do what you feel is right for the job at hand. And remember, not every site has to be responsive or adaptive (although some might say otherwise).

Your site isn’t responsive or adaptive so why should we listen to you?

You’re right, it isn’t. Well observed. I’ve merely attempted to define both adaptive and responsive design, so we as an Industry/Community can be clear on what both are as if they are not defined we’ll be having this discussion in two years time instead of now.

I also like things to be defined.

NOTE: Please feel free to leave any comments/observations or opinions in the comments. It would be great to hear everyones thoughts.

16 thoughts on “Responsive and Adaptive Design: Defined”

Hey, both your examples of responsive and adaptive talk about browser sizes, and although its a part of it, I think we should be going further than the screen size. We can’t yet detect the connection speed effectively, but responsive web design should be about maybe your location or how you have arrived at that point, etc, that is responding to the user as well as the viewport. To me both responsive and adaptive are fairly similar in meaning and should be focusing on the responsiveness to all aspects. If your site is responsive to a browser or device then thats is a small part of it. What about someone on a rubbish edge (or something) signal are you going to serve them up the ‘full’ site, media queries and all? Thats not being responsive to their needs for it to load quicker using less bandwidth. I wrote something similar a while ago, so its on my mind too.

I wouldn’t see that as being an argument per-se. I think changing a site from normal to responsive/adaptive like dribbble would have been a business decision more than anything else. Dan’s article was very good indeed.

First, you did a wonderful job of placing definitions on these two blanket-like terms, Gavin.

My only issue with this sort of classification is that it treats responsive design and adaptive design as two separate entities. This seems like it would only serve to continue confusion and awkward classification in the future.

In reality, these aim to achieve the same thing, providing tailored experiences for different device widths. They actually describe two different flavors, two different approaches, too responsive web design. Responsive design encompasses fully fluid responsiveness, while adaptive design encompasses multiple fixed width responsiveness.

I think the best way to sum up what I am saying here is that we shouldn’t have to classify what “flavor” of responsive our designs are when describing that they are responsive (in general). Example:

My site is responsive (parent term). It uses an adaptive approach (classification).

I think that we need to look at “responsive” and “adaptive” design as umbrella terms that define a similar objective. Although they might not be truly identical, they are, as Tyler mentioned, “providing tailored experiences for different device widths.”

I’m really interested to see how these terms evolve as more and more people start to incorporate these capabilities into their designs.

I really don’t see the need to invent two different terms to define the differing flavors of making web site reflect the viewing needs to the various users. To me it seems like merely various options for doing the same thing. While I would generally prefer to make a site “responsive” as designed here, I can forsee situations whereby that is not possible and one has to merely rely on media queries or rather those JavaScript tools that emulate the behavior of media queries. I even so some examples where it was necessary to use media queries to determine which of several stylesheets to use.

(Since all of my Web Browsing is done in IE (IE7 at work and IE8 at home since the work I am mandated to carry out must be written for IE), many of these examples do not seem to respond at all to changes in the viewing window, only to changes in the device. Seems to me that because of this that form of designing should be call device reponsive since it only responds to a change in the device, not the window size when the user isn’t using one of the accepted browsers.)

While I have seen the discussions on this task describe it using one term or the other, it seems that all of those discussions are presenting the multiple ways of achieving this goal not simply designing around media queries. However, this post is now over a year old. I would be interested to know if there has been any movement towards adopting this definitions as an official definition, since most of the posts I’ve seen discussing the issue are the same age or older.