Responsive vs Adaptive Web Design
Update: A recent blog post by Brad Frost resurfaced this discussion. In the post, Brad proposes that “adaptive design” refers to the broad approach of creating interfaces that adapt to the needs and capabilities of the User. Responsive design is simply one technique within an adaptive design approach. Of course, this definition conflicts with the definition outlined below; it will be interesting to see how these concepts and their definitions evolve over time.
Here’s the quick and dirty difference:
- A responsive design fluidly changes to fit any browser size
- An adaptive design changes to fit a defined set of browser sizes
For a little more context and explanation (along with the benefits to either approach), here are some resources on the difference:
- Forget Responsive Web Design
- Responsive and Adaptive Web Design: Defined
- Responsive Design. I don’t think that word means what you think it means.
- Responsive Web Design Demystified
Examples of Adaptive Designs
At the end of the day, it’s best to see it for yourself. Here are some examples of adaptive designs. Slowly resize your browser and notice the sudden shifts in the layout:
Examples of Responsive Designs
In these examples, notice how the layout changes almost immediately to fit the browser size: