Adaptive vs Responsive Design - A super quick overview

In this mobile-heavy world, making sure your website works for a variety of different form-factors is of ever-growing importance. Having a central column fixed at 1024 pixels wide just won't cut it any more. Both adaptive and responsive design provide their own solution to this problem, but researching them online can be confusing, since a lot of the descriptions are long-winded, and sometimes use the verb "adapt" when referring to responsive sites and "respond" when referring to adaptive. What's more, adaptive design is often conflated with, or used as a synonym for "Progressive enhancement".

But it needn't be complicated, the concepts can actually be distilled to a bullet point each:

* A responsive site will have a single design that adjusts to fit the screen on which it is displayed.
* An adaptive site will have many designs, one of which will be selected for the device being used to view it.

Which is better?

As with many design/development philosophies, these is no "right" or "best" option between the two camps, although with individual projects, one approach may be better suited than the other. A quick comparison can be made based on two stereotypical team members

Your engineer may prefer a responsive approach, because a single design will be easier to maintain.

Your UI or UX designer may prefer an adaptive approach, which would allow for a tailored design and experience for each device.

That said, the two aren't even mutually exclusive, and it's perfectly reasonable to combine the two as your requirements dictate. Taking a non-web example, Storyboards in XCode allow a combination of the techniques, with constraints providing responsive behaviour, and size classes being adaptive.

Some Resources

For responsive design, Bootstrap is a great HTML/CSS framework that provides a fluid layout model. It's been my starting point for pretty much all of my web projects since version 2.3.2.

Progressive Enhancement with CSS is an older, but interesting article on organizing one's CSS files for a PE approach, which in this case illustrates adaptive design quite effectively.

This isn't meant to be an exhaustive list, but more of a springboard to trying out the two approaches (or realizing you were doing so already). Please feel free to recommend other resources in the comments!

Conclusions

There's often a lot of argument about whether responsive or adaptive is the way forward. From my own experience, it seems that responsive design is more in vogue right now, for a number of possible reasons, which I'm not going to dive into here.

But rather than considering which approach to adopt and which to ignore (or scorn), I think it's better to be able to recognize them when they show up, and make more effective use of the ideas as a result.