Note these differences between the responsive and the adaptive web design

Design, web design in particular, is an ever evolving field as it is closely related with the new technologies and the associated changes that the design has to undergo with the change in technologies. Not long ago, responsive design was something not heard of. Since the last 2 or 3 years, this is something which has grown to become the hottest trend. Designers and developers must know what a responsive design is and how is it different from its close brother-the adaptive design. This article brings out the difference between the two.

The very fundamental difference is that the responsive design makes it possible for the website to adapt its layout to viewing device, user agent and the environment. The coding is done on CSS 3 which enables developers to create grids based on percentages and which are flexible. An important part of this type of designing is that use shall be made of images or videos which are flexible in nature. This is different from the adaptive one where the flexibility of layout is not based on browser but on the user. It makes use of predefined set of layout sizes along with the CSS and Java script which makes it possible for it to adapt to detected device. This is something which the developers call as progressive enhancement. There are basically three layers of this enhancement:

1.    Content which is nothing but rich semantic HTML markup.

2.    Presentation layer (also called the front end) which is controlled by CSS and styling.

3.    Client-side scripting layer which is done by java script or jquery behaviors.

Since the responsive design makes use of fluid grids which are change according to detection of the screen size, the adaptive design makes use of predefined layouts for various devices. This means that there is a lot more work done in terms of coding while developing a website based on responsive design than adaptive one.

Another important difference between the two is that responsive design is client side whereas the adaptive design is server side. The key meaning of this difference is that, in adaptive site, even before a page is delivered the website hosting server detects site attributes and brings up the right version whereas, in responsive one, it is the browser of the device which determines which page is shown as per the device on which it is run.

You can determine whether the site is responsive or adaptive depending on breakpoints as well. Breakpoints are the values of dimensions which define the limits for a particular layout before it changes to another. You can check this on responsive website which makes use of fluid grids by just altering the size of window and noticing how many times the layout changes. This is not possible to check on an adaptive design where the server first determines which is the right size of website to deliver to a particular device.