Adaptive vs Responsive

Responsive design is fluid; using CSS3 media queries to respond to any screen sizes, where text can wrap and images can shrink to adjust along with your browser whereas Adaptive design uses a series of static layouts based on breakpoints.
– Excerpt from an article by Ryan Boudreaux

I think the above definition is self-explanatory; however I will try describing both with examples and used cases without getting into it that who started what and when.

Adaptive Design

Adaptive design detects the device and the features supported, and then provide the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics. Take the example of Faceebok website.

This can affect the uniformity across platforms and devices. In other words, the design may change due to device size or if certain feature not supported like use of Flash or HTML5 components. Facebook uses the HTML5 upload feature with fallback to Flash in desktop website, however on basic mobile it present native HTML file upload component.

The load time tends to be faster as only relevant and optimized resources are sent.

It can be either a fixed layout or fluid (Responsive design). For example, Facebook uses same content layout for iPhone as well as iPad which is responsive.

Example Adaptive Design

Responsive Design

Responsive design works on the principle of flexibility. The idea is that a single fluid design based upon media queries, flexible grids, and responsive images can be used to create a user experience that flexes and changes based on a multitude of factors. The primary benefit is that each user experiences a consistent design. One drawback is a slower load time.
– Excerpt from Mozilla Developer Network

Take an example of Mozilla Developer Network website. The same content is sent to all devices, however the visibility and presentation varies based on viewport (device width).

Example Responsive Design

Based on above to definitions, we can say that Responsive Design is a subset of Adaptive design.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.