Skip to main content

Throughout their existence Adaptive and Responsive Web designing approaches were confronting one another.

Some consider them to be synonymy; others think that these are different concepts. But as always, the truth is somewhere in between. Originally, both notions provoked misunderstandings especially in what they denote. Adaptive web design is much broader that the Responsive one.

When speaking of the Responsive design we mean only the page layout (“rubber” layout, flexible media queries and images). As for Adaptive design, it is something more than a “rubber” layout. In practice, this is almost the same as the progressive enhancement, in a nutshell, this concept means that we strive to provide the best opportunities for the widest possible audience. Also, we must not confuse the concept of “adaptive web design” and “adaptive layout”, as these are completely different things.

Here you go

And, finally, “An adaptive model” (each screen size has it’s own styles, which are the hard-coded and fixed-size elements) refers to the layout, made by combining a set of fixed horizontal sizes (width). If done correctly the fixed-width blocks are combined with the “rubber” blocks, the adaptive model can be considered a form of responsive web design, and not just an alternative.

In plain language: responsive web design = “rubber” layout, the adaptive web design = “rubber” layout + progressive enhancement.

To keep everything clear you can check the following Responsive Web Design Interactive Infographic. Guys who created this piece of work did a great job. They’ve included all necessary notions to get thorough the responsive design, all types of grids, manuals on how to create a responsive website, numerous articles on how to get things clear and what’s more important they hand-picked a toolkit that is perfect for beginners. Click on the screen shot to see the Full-size Animated Version.

Adaptive vs Responsive: What's the Difference + Infographics 1

How Young Entrepreneurs Are Securing Funding After the Credit CrunchInspiration

How Young Entrepreneurs Are Securing Funding After the Credit Crunch

Ryan KhRyan KhJanuary 25, 2020
20 Eye-Catchy Digital Space PaintingsShowcase

20 Eye-Catchy Digital Space Paintings

Dibakar JanaDibakar JanaSeptember 21, 2018
Designing Websites with Security in Mind: 7 Essential Tips for Web DevelopersWeb Development

Designing Websites with Security in Mind: 7 Essential Tips for Web Developers

Editorial StaffEditorial StaffJune 27, 2023