Responsive Web Design vs Adaptive Web Design

With internet usage by mobile exceeding that of desktop, it’s more important than ever to have a website optimised for mobile and tablets. You will have heard the terms “Responsive Web Design” and “Adaptive Web Design” as the two ways to make your website more accessible across different devices, what do they mean and is there any difference between them?

What is Responsive Web Design?

Responsive web design is simply when a website can respond to the screen resolution and dimensions it is being viewed on. The practice includes various breakpoints where a websites’ layout may change. This is achieved by using CSS media queries and fluid grids and layouts. This means when viewing a website on desktop and then switching to view it on your iPad or iPhone, you are looking at the very same website, which has simply re-adjusted to your device size.

What about Adaptive Web Design?

Similar to responsive web design, the adaptive approach helps the user experience of a website across different devices. However adaptive websites are a thing of the past and here’s why. This solution re-adjusts your website to specific limited breakpoints. For example an adaptive website may have 5 or 6 main screen widths it will re-adjust at, as opposed to responsive, which will reform at each and every different dimension. The disadvantage of adaptive design is that there are many devices out there, and new ones always arriving that have many varied dimensions.

 

 

In conclusion responsive layouts will be fluid, seamless and always ready to adapt to newer and older devices. Adaptive web design is restricted and doesn’t offer the same guarantee of a great user experience, no matter what device a website is being viewed on. Additionally, google now rewards responsive websites so it’s a no-brainer for SEO reasons too! If you’re a business looking for a website update or a new one altogether, make sure you make it clear you want a ‘fully responsive website’ and if you’re a developer out there, make sure you are following the best responsive practices to make sure you and your clients aren’t getting left behind!

Share this post

Back to blog