hostmonster-Host Unlimited Domains on 1 Account   coolhandle offering reliable webhosting since 2001
Unlimited Hosting Space - FREE Site Builder   Smart Website Solutions for Your Small Business=

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?

spirit-desktopp

spirit-mobile

Contrast that with HM, 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.

hm-desktop

hm-mobile

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 HM 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 HM’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.

spirit-responsive

hm-responsiev

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:

gif-responsive-adaptiev

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:

steve-madden-adaptive1

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

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

steve-madden-adaptive3

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 HM’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.

clickz-mobile-site

Related reading

google mobile

The convergence of SEO and UI goals for mobile users

Mobile devices are the new norm. We do everything on them from making dinner reservations, finding a date, managing our bank accounts, to hailing a ride. Mobile has changed the very foundation of how consumers communicate, connect, and discover online.

3-devices-very

How mobile transformed an 80 year-old catalogue retailer

In four years Shop Direct has gone from selling the majority of its products via twice yearly catalogue to an entirely digital operation that sell the majority of its products via the mobile web.

clickz intelligence main objectives for mobile advertising

Paid search rules for ROI on mobile: report

Lead generation and direct online sales represent the two most important objectives for mobile marketers and paid search is is the key mobile channel to achieve these objectives.

tech keywords

Article source: https://searchenginewatch.com/2016/04/26/whats-the-difference-between-responsive-adaptive-and-mobile-friendly-sites/

Tags:


Submit a Review




If you want a picture to show with your review, go get a Gravatar.

1&1 has shared hosting and dedicated hosting solutions for every budget and free domains with all hosting packages!  StartLogic - Affordable hosting: Free setup/domain, unlimited emails, PHP, mySQL, CGI, FrontPage. As low as $3.95/month
Cloud ecommerce platform delivers more traffic, higher conversion and unmatched performance

© Copyright 2008 Tyconia International, Inc. All Rights Reserved.