Infographic Differences Between Responsive and Adaptive Web Design

Are they two different concepts or two similar concepts?

Here is the conundrum related to the difference between the two concepts of web designing solved. You can take a look at the difference as well as the advantages and disadvantages of the concepts explained.

Quote on Responsive web design– “Creating a Responsive Web Design is about using HTML and CSS to automatically resize your web design to make it look good on all devices irrespective of its size”. Diana Long

Quote on adaptive web design – “An adaptive web design is about smartly using a GUI design that adapts to different screen sizes on its own.”

Definition of Responsive web design-

The idea of having a responsive design is to have one design, but with several different elements that are optimized to respond differently when they are viewed on devices of different types and sizes.

Keywords– Single Design, Optimized to respond, devices of different size and types

Definition of Adaptive Web Design-

A varied range of designing strategies that can be collated with responsive web design to promote the several versions of a web page or site to enable it to better fit the user’s device.

Keywords– Designing strategies, collated with responsive web design, to better fit user’s device

Differences Between the Two Types of Web Design

Responsive	Adaptive
Single design optimized for the use on any device	Single design optimized for the use on one particular device only
This design is device independent	This design is device dependent
All the elements of the page are downloaded to optimize it for standard use.	Only the elements on-page that are required are downloaded to suit the particular user device
Single Template for all the devices	Separate Template for separate devices