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’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.