Adaptive vs Responsive design

This discussion is very prevalent these days as the way people browse over the internet is changing.

The devices are changing from desktops to all forms of hand held devices. Many a times the website owners or the designers find it difficult to cater to this growing demand. During the recent times, responsive design happened to be the buzzwords among them .

Responsive Web Design

The term ‘Responsive Web Design’ was phrased by Ethan Marcotte  and is mentioned in his book  ‘ A Book Apart – Responsive Web Design .

The responsive design starts with the following tasks

  • incorporation of CSS3
  • media queries
  • the @media rule
  • the fluid grids
  • flexible medias – images and videos
  • fluid type

The above mentioned allows a responsive website designer to have a layout that matched with the viewing device and the environment.

Adaptive Web Design

The term ‘Adaptive Web Design’ was phrased by Aaron Gustafson  and is mentioned in his bookAdaptive Web Design .
The adaptive design uses a predefined set of layout based on the size of the device’s screen size. This way adaptive design approach caters to the device.

The adaptive design uses the below to achieve it’s objectives

  • Rich HTML markup
  • CSS and styling
  • JavaScript or jQuery behaviors

If you look adaptive is same as responsive and has the same idea of responsive, but the main difference is that it uses the changes made on server side rather than on the client side.

In adaptive design the server that hosts the website can detect the device from which the request came from and uses this data to render the information on the screen based on the properties of the device from which the information originated.