2017 was the first year in the history of the internet where website traffic from smartphones and tablets exceeded that from non-mobile devices worldwide. Perhaps unsurprisingly, this figure increased again in 2018 and will likely continue trending upwards for some time to come.
To reflect the growing prevalence of mobile traffic, techniques in web design have had to shift substantially. Search engines like Google have begun to primarily index mobile versions of a website, and will actively penalise websites which are not compatible with smaller screens. As a result, it’s more important than ever for businesses to have a mobile-optimised website.
The two primary methods of mobile optimisation are known as responsive web design and adaptive web design. While both methods serve the same purpose, their implementations and outcomes can differ hugely.
What is the difference between responsive and adaptive?
Some projects might be more suited to responsive web design, whereas others will better fit adaptive web design. But how do they compare?
Fundamentally, the difference between responsive and adaptive web design is in the fluidity. If you take your web browser and drag the corners to adjust the size of the window, note what happens to the content of the page.
If text, boxes and images scale down or shuffle around fluidly as you decrease the size of the window, then the design is probably responsive. However, if nothing changes until you reach certain “jump points” – where everything moves suddenly together – then the design is most likely adaptive. (Though it’s worth noting that responsive web design can also have jump points).
Adaptive web design
When building an adaptive website, developers will usually create a handful of different static layouts for the page, and tell the website to load the relevant one based on the resolution or screen size the page is being viewed on. For example, there might be a defined layout built for screen widths of 320 pixels, or 960 pixels, or 1200 pixels, and so on. Then, a user sees a different device-optimised version of the page if they visit the website on an iPad or a Google Pixel, or on a desktop PC with a widescreen monitor.
One drawback of this method is that new devices, and thus new screen sizes, are being developed and released constantly – just think of how many times the size of the iPhone screen has changed over the years. With an adaptive design, you have to build a new layout for each individual device, and that work adds up. You could just approximate the layout that gets served to be as close as possible to an existing device, but that leaves you open to imperfections and inconsistencies. And nobody wants that.
Responsive web design
The solution to that problem is to build a website with responsive web design. A responsive design is built from one layout, and scales down (or up) appropriately based on device resolution through techniques like media queries and CSS manipulation. For example, you could build it so that an image on a page always takes up 30 per cent of the webpage, regardless of the width of the screen, and the other 70 per cent scales accordingly as well. This way you’re guaranteed to catch all possibilities, and serve a webpage that’s optimised for each individual device.
Although it sounds like a lot of work to design, say, six or seven individual layouts with an adaptive approach, a responsive approach is also a lot of work because you’re theoretically designing infinite layouts for infinite screen sizes, and that requires a whole lot more code work – at the beginning, at least.
One important factor to bear in mind is that once a website is up and running, it’s far easier to maintain a responsive design than an adaptive one. This is because any changes to the content of a responsive site only need to be made to one version and, if the implementation was successful, the changes will work seamlessly across all resolutions. Updating an adaptive design is much more work, because you have to check all the various iterations of the site to ensure that nothing breaks across your multiple layouts. So although it’s more work at the outset, the overall effort of a responsive design is counterbalanced by less need for ongoing maintenance.
Retrofitting vs starting from scratch
Because of this, if you’re starting a new website from scratch, responsive web design is usually the better choice. However, if you’re just looking to retrofit an existing website with mobile optimisation, an adaptive approach is easier to implement, and you’ll see just as many benefits.
If you have an existing site and are looking to retrofit with an adaptive approach, it’s a good idea to do a device audit to see which devices are most popular among your visitors. Software like Google Analytics can show you which devices are being used to access your website, giving you a basis from which you can begin building your first device-specific layouts.
It’s worth remembering that most hosting companies now offer DIY website building services where you can build a website by simply choosing from one of many templates and dragging and dropping the components into place. If you’re fortunate enough to be building a brand new site, but don’t have the budget for a professionally built website just yet, these services are a great place to get a new site up and running quickly. What’s more, their templates are usually always responsive, so all the hard work has already been done for you.
Responsive vs adaptive: what method should you use?
Ultimately, the ideal method will come down to the individual use case. If you’re starting a website from scratch, consider a responsive approach from either a hosting company’s website builder solution, or hire a developer to build you something truly unique. If you’re just trying to make your current website work on smaller screens, an adaptive approach is likely to be the most pragmatic approach for you.
Neal Thoms, campaign manager, Fasthosts