Design Ninja

Design Ninja

By David Moore

Thursday, 13 September 2012

Responsive Layout vs. Adaptive Layout, Whats the difference?

Responsive Layout vs. Adaptive Layout, Whats the difference?

There seems to be some confusion about these terms and what they mean, in fact it was my own confusion which led me to look for an answer so you are not alone.  I am going to share my own thoughts and findings with you to hopefully clear up any confusions that you may also be having - keep everything crossed, I might just make it worse.

Firstly * this is a biggie * Adaptive Layout should not be confused with Adaptive Design, which is in essence another term for Progressive Enhancement - Aaron Gustafson's book titled Adaptive Design is a great place to start on this subject. 

Secondly * this is equally biggles * Responsive Layout should not to be confused with Responsive Design, which is in fact a subset of Adaptive Design and a responsive or adaptive layout are just two techniques that can be deployed to achieve a Responsive Design, now Ethan Marcotte's seminal article 'Responsive Web Design' is partly responsible for my confusion as when he coined the phrase 'Responsive Web Design' the technique put forward to achieving this was purely a responsive layout.  Moving on from that groundbreaking moment the realisation is that Responsive Design is much bigger than this one technique, Jeffery Zeldman (in my humble opinion) quite correctly points this out in his blog post 'Responsive Design. I don’t think that word means what you think it means', for an interesting insight into Adaptive Layout techniques Marc van den Dobbelsteen's article 'Switchy McLayout: An Adaptive Layout Technique' is also a fantastic read and puts an interesting slant on the should I use a responsive or adaptive layout tussle.


What is a responsive layout?
In simple terms a responsive layout utilises fluid grids, flexible images and breakpoints which are set using media queries.


What is an adaptive layout?
Again in simple terms an adaptive layout utilises fixed + fluid grids, fixed + flexible images and media queries.

I do think it's easy to get bogged down in this is 'this' and that is 'that' BUT for my own sanity I felt I needed to research further and clarify the difference between these two terms, uncovering allot more on my journey.

So in conclusion it is my opinion that our understanding of Responsive Design should be to embrace any technique (of which responsive and adaptive layouts are two) which works towards presenting users with a visually graceful experience regardless of the screensize this is being viewed on or the device this is being viewed with - in essence use the tools / techniques available to create the best experience possible - how we get there to some extent is no more than a means to an end.

Comments (4)

  • Stacy Williams

    22 September 2012 at 08:47 |
    Lots of helpful information. I have bookmarked your site.
    • David

      23 September 2012 at 20:32 |
      Hi Stacy, glad you are finding our blog useful. We will keep dropping that knowledge.
  • Frankie

    04 October 2012 at 17:12 |
    I've been looking for a post like this for an age
  • Mike

    08 October 2012 at 16:28 |
    Glad we could help you out Frankie

Leave a comment

You are commenting as guest.

Search by Date

Latest Big Bad Blog Post

ExpressionEngine Force HTTPS For Selected Sections with Htaccess

ExpressionEngine Force HTTPS For Selected Sections with Htaccess

Have you ever wanted to force a HTTPS connection for your ExpressionEngine website? If so, you may have also wanted to 'unforce' that connection for other areas of your website, either for performance issues or because maintaining both HTTP and HTTPS for the same section can be tricky. Avoid those pesky browser warnings about unsafe (non HTTPS) assets with this htaccess rewrite.

Continue Reading

Latest twitterings

  • @reverseRett proud Daddy and Uncle!!xx-- Delivered by Feed43 service

    27 May 2014 | 11:40 am View full tweet
  • Check out "Internet Archive" on Vimeo  #Vimeo-- Delivered by Feed43 service

    24 May 2014 | 1:03 pm View full tweet

Fill in our contact form

  • Please complete all the fields

Thanks for your message! We will get back to you ASAP!

* indicates a required field