Adaptive ≠ Responsive

As I write this, responsive web design turns three years old, and as expected, the bandwagon is well and truly jumped on. But even now, I still find examples of people confusing responsive and adaptive; describing their websites or commenting on other projects and portfolios like these terms are interchangeable.

News Flash: They’re not.

Whilst their goals are the same, the key difference between responsive and adaptive is how they achieve their smartphone and tablet experiences. Fluidity and device agnosticism are at the core of responsive, whilst adaptive uses fixed values to cater for certain core device widths. It probably won’t be a popular opinion, but in my eyes adaptive is just a cheap imitation of responsive.

Perhaps the best way to illustrate the difference is through some real-life examples and snippets of code…

Responsive

Example: Smashing Magazine

Below is a typical example of a responsive container; no real restriction, just enough to pull a site off the device edge. If you’ve ever used Andy Clarke‘s 320andUp, you’ll recognise it.

.container {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
}

Adaptive

Example: Simon Collison

The following code is the core of how Skeleton (an adaptive framework) works.

.container {
    width: 700px;
}

@media only screen and (max-width: 767px) and (min-width: 480px) {
    .container {
        width: 420px;
    }
}

@media only screen and (max-width: 767px) {
    .container {
        width: 300px;
    }
}

As you can see, the adaptive approach has rigid containers, it’s what gives it that “clicky” feeling. It prevents content overflows by locking the container value to always be slightly smaller than that of the device width it’ll encounter.

Whilst adaptive and responsive both use media queries, responsive uses them to introduce change, whilst adaptive uses them to imposes rigidity to the device widths it defines. For example, Skeleton deems “tablet” to begin at 768px, so any tablet (or large smartphone) that falls short of that value is forced to inherit the structure of a smaller device.

With a device market that’s fragmenting itself on a monthly basis, it only takes a couple of minutes on screensiz.es to realise that quite a few devices sit in this ‘inbetween’ camp…

  • Galaxy Tab 1 & 2
  • BlackBerry PlayBook
  • Kindle Fire, 1st Gen.
  • Nook Tablet
  • Microsoft Surface
  • BlackBerry Q10
  • Galaxy SIII
  • Galaxy Nexus
  • Galaxy Note II

The impact is that with an adaptive site, the users of the above devices (and others) will be forced to consume the content at a narrower width. Put simply, it weakens their reading experience. Some of these devices are viewing adaptive websites with a container width of just 60%…I’m sure you’ll agree that that’s pretty ridiculous.

Even though responsive has been ‘a thing’ for three years, it’s still a buzzword to the wider world; and with that, there’s demand to fill. It explains the dozens of frameworks and thousands of themes out in the market.

I spent one afternoon conducting research into WordPress themes, I was curious as to how the market is being catered for (full data here). I took a sample set of fifty themes, some free and some premium, all considered “the best” and some being the top sellers on ThemeForest. I discovered that over two thirds were responsive, and of that an alarming majority of 27 said they were responsive but turned out to be adaptive. Many of these themes suffered from the very same oversight outlined above, zero code to cater for devices between the ‘smartphone’ and ‘tablet’ camps.

One possible explanation is that adaptive is simply quicker and easier to implement. So long as some basic pixel math adds up, you’ve got something that kinda works. To the untrained eye – perhaps the non-techy client or project manager – everything appears to be OK. It’s only when you get hold of the above affected devices that you see the reality; that the benefit of being quicker / easier isn’t worth sacrificing the user experience.

The end users – the people that have invested hundreds into buying a device – are the ones being short-changed. Perhaps they’ll find the website too frustrating to use, perhaps they’ll go elsewhere. The crux of it is that adaptive is just selling snake oil; it’s making your customer (or boss) believe they’re getting what the product they want, when actually it’s all smoke and mirrors to produce something on the cheap.