Adaptive and responsive website: what’s the difference?

What do you know about such terms as “adaptive website” and “responsive website”? Some claim that they make websites with an adaptive layout and that is their competitive advantage. Others argue that it’s correct to call the layout a responsive rather than adaptive. Still others say that “responsive” and “adaptive” are one and the same. Despite the abundance of information on this topic, the number of delusions only increases. We want to finally clarify this issue.

Let’s remember some history.

Previously, websites were with fixed (static) layout. If the page had 800 pixels in width – it remained 800 pixels, no matter on which monitor it was opened, large or tiny. This approach has become completely outdated along with a tabular layout.

Then websites became “liquid”. It’s when you change the size of the browser window, the elements are shrinked or stretched. These websites looked nice everywhere – on the big or small screen or on a smartphone, only the scale was changing. Now, however, this approach is also out of date, since it takes into account only one type of device, and doesn’t care about how the content will look on the screen with the critically small or large width.

So two new approaches appeared.

Adaptive website

The website, which is based on the use of media queries for content adaptation for different parameters of screens. The page “jumps” on control points, moving and adapting content. That is, the monitor displays it in one way, the tablet do it differently and smartphone – again in a different way. Everything changes – the location of the blocks, sizes of buttons, fields and texts.

A key feature: the website has only a few options of display that depend on the width of the screen or type of device. That is, all tablets will display one website, without taking into account that they have different‐sized screens.

The disadvantage of this approach is obvious: we can’t predict how the content will look on all devices, because the distance between the control points can be quite big.

Therefore appeared responsive websites.

Responsive website

Responsive type of page layout in contrast to adaptive based on the principle of “liquid”, but also uses media queries to adapt content to the width of the device. As a result, the site also has several options of display, but transitions between them are smooth. When you change the window size – buttons slowly change in size, the blocks slowly shrinks, and when a checkpoint comes – the site changes the arrangement of blocks under the tablet or a smartphone.

Thus, if the site was optimized for iPad, it will also look good on Galaxy Tab, and nVidia Shield, on any device.

What is better? There’s no exact answer. Responsive layout is definitely more expensive, since it takes longer to implement. However, there are reasons to assume that Google is much more loyal to responsive websites, rather than to adaptive ones.

If you still feel that you poorly understand the difference between these approaches, here is a wonderful website, which will visually show you everything.

At SoftwareGarage we use adaptive or responsive layout – it depends on the needs of a particular project. Write to us and let’s discuss yours!

Also, subscribe to receive latest news and publications!