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

Further Reading

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:

• Abberdein
• Cats Who Code
• Information Architects
• The Sweet Hat Club
• Teixidó

Examples of Responsive Designs

In these examples, notice how the layout changes almost immediately to fit the browser size:

• Earth Hour
• Hicks Design
• Lapse
• Laufbild Werkstatt
• Stephen Caver