What's the difference between responsive, adaptive and mobile-friendly sites?

Mobile adaptive sites and mobile responsive sights are the same, and both are synonyms for mobile-friendly… right? Not quite. Here’s a breakdown of the differences.

Last year, Google shook up the industry by switching up its mobile search algorithm to favor mobile-friendly sites. A fairly self-explanatory term, “mobile-friendly” refers to, well, a site that works on the smaller screen of a mobile device.

Mobilegeddon was a natural response to the natural shift in people’s browsing preferences, which are increasingly moving toward mobile devices. In an uncharacteristically transparent move, Google let everyone know about the update nearly two months ahead of time, even including tips for increased mobile-friendliness: avoiding software like Flash, which isn’t common on mobile devices; text that’s big enough to be read without zooming; links and buttons spaced far enough apart to accommodate fingers.

But while it’s clear what constitutes a mobile-friendly site, there’s still a level of confusion around what makes a mobile-friendly site different from a mobile responsive site, and what makes that one different from a mobile adaptive site.

Friendly vs. Responsive

Mobile-friendly sites aren’t necessarily designed specifically for a mobile device. Rather, they’re versions of sites that work across different devices. Think of a mobile-friendly site as mobile-optimized, whereas a responsive site is mobile-first.

A site that’s mobile responsive changes – or responds – based on the device it’s viewed on. For example, a desktop site may have a multi-column layout, which a mobile-friendly site may have on a smaller scale so users can see everything without having to scroll. But a mobile responsive site will have a single-column layout that translates better to the smaller screen.

See how Spirit Airlines’ mobile website is just a smaller version of the desktop site?

Contrast that with H&M, whose mobile site is completely different. The desktop site’s layout wouldn’t translate to mobile very well. On a smaller screen, those six tabs across the top would either be visually overwhelming or too small to read.

Responsive sites have many of the same characteristics that make a site mobile-friendly, such as having the right kind of navigable spacing. But they differ in key ways. Responsive sites are reliant on mobile operating systems, in addition to having dynamic content that changes depending on where it’s viewed.

In other words, every responsive site is mobile-friendly. But not every mobile site is responsive. If you want to test a site’s responsiveness without having to look it up on multiple devices, simply change the size of your browser to see if the site alters itself.

To keep the Spirit and H&M examples going, I looked at both sites on my browser before making it narrower. I made it so much narrower that it’d be impossible for either site to fit perfectly, but notice how the tabs along the top of H&M’s kept getting closer together so they all fit. And speaking of tabs, yes, I know I hoard them and that I should be using the OneTab extension.

Responsive vs. adaptive

Mobile responsive and mobile adaptive sites are similar in theory, but different in practice. Both change their dimensions based on the browser and device where they’re being viewed.

Responsive sites adjust to any layout. Adaptive sites, on the other hand, only adapt at select points. The webmasters behind those want to ensure that the browser is a certain width, and the content will snap into place, rather than fluidly change sizes. In other words, an adaptive website has several different layouts, which can be deployed based on the size of the browser.

This GIF from Froont, a Latvian startup specializing in responsive web design, illustrates the difference perfectly:

Steve Madden is an example of a brand with an adaptive site. Log onto the retailer’s website from your desktop and change the size of your browser.

Here it is, when my browser is at the normal width:

Here, my browser is a little narrower. See how some of the tabs disappear, but the logo looks the same? 

And now at this new width, the font has readjusted its size. Look at how much bigger the logo is.

Which one is best for me?

At this point, everyone should have a mobile-friendly site. Not everyone necessarily needs a site that’s mobile adaptive or responsive, but you probably should, if a significant portion of your traffic comes from mobile devices.

Adaptive is easier and significantly cheaper to deploy. Since the images are scaled down, rather than resized, adaptive sites often load faster, too.

But if your site is complex, you should think about going the responsive route, particularly if you have ecommerce offerings. Look at H&M’s desktop site; there are so many different things you can click on that it’d risk looking too busy on a smaller screen.

You should also have a mobile responsive site if your website features articles telling people to make their sites mobile responsive, obviously.