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.

Apple Web Design Guide circa 1996

A great find by Graham Smith (@imjustcreative). The Apple Web Design Guide circa 1996 containing beautiful words such as the paragraph below;

The design of your Web site should be determined by the information you want to communicate. Define your content before you spend a lot of time on page design. You don’t want to invest a lot of time and effort in page layout and navigation design only to later find that your design doesn’t work for your content or purpose of your site.

Check out the original article on Graham’s website. The link to the PDF is in the article.

The Manual: Issue 1

Something I’ve been waiting for, from a friend, for some time. It arrived at lunch time today.

The amount of planning, preparation and sheer effort that has gone in to The Manual: Issue 1 is quite incredible. Just short of a year ago, Andy McMillan, Founder of Build Conf and an amazingly passionate fellow and friend announced The Manual. A curated set of articles from well respected professionals from our industry formed in to a well produced, well thought out book. Along with the articles the book holds within it some amazing illustrations from designers from around the world.

I can only congratulate Andy on his first The Manual, and thank the people who got involved as well as everyone who supported him on Kickstarter. I would hope a lot of other professionals in our industry will continue to support him by buying a copy of The Manual today.

Thanks, Andy. I look forward to Issue 2.