Responsive and Adaptive Web Design

Google has always recommended that a website should be accessible on mobile devices, with a good UX and overall performance. However it doesn’t specify how you should go about this, do you use a responsive design, an adaptive design or a standalone mobile site with its own m. URL.

For the purpose of this post let’s forget about the standalone mobile site, and just focus on responsive and adaptive design.

The Differences Between Responsive and Adaptive

To put it simply, a responsive layout is a fluid design that “responds” and is able to adjust to the size of the screen it’s being viewed on regardless of the device. By using CSS queries to change the style of elements based on the target device it allows the overall appearance of the site to change accordingly.

An adaptive design on the other hand uses a number of static layouts based on specified breakpoints that won’t respond once loaded. An adaptive layout is able to detect the size of the screen it’s being viewed on and then load the most appropriate layout for it. In most cases an adaptive design uses the six most common screen widths.
Now it may appear that an adaptive site requires more work to create as you need to design at least 6 different widths, however a responsive site can be a lot more complex due to improper use of (or not using) media queries. This topic has created a lot of discussion over the past few years on what is the better choice.

Which Is Best

Firstly an adaptive site is useful if you are retrofitting an existing site in order to make it a little more mobile friendly. You will be able to take control of the design and development for each version of your site depending on the specific dimensions; however this will of course depend on your overall budget. In some cases it can lead to a lot of extra work designing and developing an adaptive site from scratch and so this technique is usually used for retrofitting an existing site.
The vast majority of modern sites will now use a responsive design, due to needing less work to build and maintain. Because of the fluid nature of a responsive design you won’t get elements “jumping” when the window is resized like you do with an adaptive design. You will have to consider ALL layouts when designing a responsive site and it can confuse inexperienced developers and in turn make the process a lot more complex than it needs to be.

Considerations

As mentioned earlier, a responsive site can suffer in terms of loading speed if not implemented correctly, it also requires more in terms of coding to ensure the site fits every screen size. However the extra work is debateable as modifying an adaptive design is more complex because you need to consider all other aspects of the site like SEO, content and links.
There are no corners to cut to either technique; both require complex work that comes naturally with a site that is built too basically “fits all”. The advantage has to go to responsive design due to a lot less time being needed for any future maintenance.

Responsive design will continue to be the most popular format until such time that an effective solution is discovered for the heavy maintenance an adaptive site requires. For now though, responsive design still remains the obvious solution.