What is a responsive website? And what is an adaptive website? We explain responsive vs adaptive, and examine whether responsive or adaptive is best for your website.

Like most tech subjects, web design is packed with jargon that works as a wonderful shorthand for those in the know, but can baffle outsiders. Two terms you’ve probably heard bandied a lot about recently are adaptive and responsive: but what do they mean and why do they matter when you’re designing your own website or getting a professional to do it for you? Here we consider the argument adaptive vs responsive: which is right for your website's design. Also see: Get web design help from our Helproom angels

Adaptive vs responsive: adaptive and responsive website design explained

Adaptive and responsive are two of the four main ways you can arrange elements on a web page (text, images, video, etc) to work across when viewed on everything from a smartphone to a desktop computer. The other two are fixed and fluid. Also see: web design packages buying advice

A fixed site makes no attempt to modify itself to the device you’re viewing it on. The size of every element is fixed, though there’s usually flexibility to allow certain elements to get pushed around to accommodate the length of text and depth of images. Also see: Broadband Advisor

The down sides to a fixed site are obvious. With no flexibility, they can be hard to read and use on both high- and low-resolution monitors, as well as on big and small screens – especially on tablets and phones.

Until recently, this is the way all sites were designed, but improvements to browsers and the emergence of ways to make sites more flexible using CSS code, JavaScript or jQuery behaviours mean that things have got a lot easier and better – both for users and for those building the sites (whether as web design professionals or people using templates from a service like Moonfruit. See also: How to build a small-business website with Moonfruit.

(PC Advisor is essentially two fixed sites – one for ‘desktop' and one for ‘mobile'. If you come here on a desktop, laptop or tablet, you’ll get the desktop site – if you’re on a phone, you’ll get redirected to the mobile version. It’s not very graceful, but it’s been the most popular way for many sites to accommodate phone viewers – who have the most problems with desktop layouts – without a complete responsive redesign. We’re working on a better version using a similar framework to our sister site Macworld, which we should launch over the summer.)

Adaptive vs responsive: Adaptive design explained

Adaptive design uses a single site, but arranges the content into different fixed templates based on the type of device. At its simplest, a site design that might have three columns on in a desktop browser might have two on a tablet and one on a phone. More complexity is added by trying to accommodate not just the resolution of a screen, but its size and pixel density too. For example, while type of a certain height (in pixels) would work on a desktop monitor, you’d need to increase its size on a Retina-display iPad as the smaller size of its pixels would mean that your designed-for-desktop type would be too small to be comfortably readable on the iPad.

Adaptive design is the way to get sites that look their best on the devices and screen sizes you specify – and inherent in that is it main flaw: you can’t design for every screen resolution, every device, and ever browser window size someone might have. This is where responsive design comes in.

Adaptive vs responsive: Responsive design explained

The simplest form of responsive design is called fluid design. The page is divided up into areas of sizes relative to each other, so a two-column grid would be split 50:50 or 70:30 no matter what the screen size, and the text, images and video would resize automatically.

Fluid design alone doesn’t work. A website based on a three-column grid will likely be unreadable and unusable on a mobile phone. Truly responsive design is both fluid and adaptive. This means you’d have a series of adaptive templates based on different types of devices and how you’re holding it: a smartphone held in a portrait fashion, smartphone landscape, tablet portrait, tablet landscape and desktop – but each of these templates is fluid to allow for differing resolutions, screen sizes and pixel density between an iPhone 4 and a 5 and a Samsung Galaxy S5 (and that you’re rendering in different browsers, but that’s a whole other article).

Check out Macworld for a good example of this. For more on responsive design, read this guide on how to design responsive websites on Digital Arts.

This mixture of approaches is the best way to present information in a way that’s tailored to the highest number of devices, delivering an effortless experience that lets the user get on with using the site (and you get on with whatever product or service you’re trying to sell them).

Site (top) designed by Andy Clarke.