Ecommerce Tips From A Magento Expert: The Differences Between Adaptive and Responsive Design

ecommerce-responsive-designA few corporations simply haven't gotten the message yet that the online world has changed profoundly due to the introduction of a plethora of connected mobile devices. If they don't make the switch to a responsive design solution soon, these corporations are going to get left behind when it comes to making the most of their websites for online marketing, social media and eCommerce.

Most, if not all, of the Fortune 500 companies have it figured out already. Most of the Fortune 1000 companies also have it figured out. There are still hold-outs in the corporate world, however, when it comes to responsive website design. 

Old Excuses Don't Work Anymore

Up until a few years ago, companies that hadn't yet incorporated a responsive or adaptive element to their websites might have been able to explain their inaction by claiming that their customers or clients simply weren't using mobile enough to justify the expense of a major website overhaul. Those old excuses no longer work. Here's why:

The overwhelming switch to Internet-capable smartphones is old news. Nearly two-thirds of the 94 percent of Americans who own a cell phone own a smartphone (Source). In other nations, including Australia, the United Kingdom, South Korea, China and Italy, the percentage of smartphone usage is even higher than it is in the United States. In China, which is the most populous nation on Earth, 66 percent of cell phone users own smartphones (Source).

What do people do with smartphones once they have one? Using a website browser accounts for 20 percent of the total time a smartphone user spends on his or her phone. While 20 percent might seem to be a small percentage compared to the 80 percent of time smartphone users spend on apps, 20 percent still means that one out of every five minutes is spent looking at a website (Source). Furthermore, 82 percent of American smartphone owners state that they use the device to browse the Web at least sometimes (Source).

A significant proportion of mobile device owners are becoming "mobile-only" users. Pew Internet, a subgroup of the Pew Research Center, discovered back in 2012 that more than a third of Americans accessed the Internet primarily through mobile devices rather than desktop computers. The percentage of mobile-only Internet users climbs even higher for certain demographics; 50 percent or more of people in the 18 to 29 range, African Americans, Hispanics and low-income adults report that they mostly use mobile devices for accessing the Internet (Source).

The data above explains why most major corporations redesigned their sites to adapt to mobile devices at least a year or two ago. For those businesses that haven't yet incorporated a mobile or responsive website design, consider the remainder of this article to be a responsive design primer.

Taking the First Steps: What is Responsive Design?

Responsive website design, or RWD in the vernacular of website designers, is a technique used by website designers in which the way the website is displayed automatically adjusts according to what kind of device the viewer is using.

Great Corporate and Non-Profit Organization Examples of RWD

Who's doing a good job with responsive website design? Take a look at some of the following examples on a tablet or a mobile phone:

Newspaper Example: The Boston Globe 

Entertainment Example: Disney.com

Education Example: Harvard.edu

City Government Example: Greenville, SC 

Food and Beverage Example: Starbucks.com

Online Shopping / Retail Example: Amazon.com

B2B Example: Paychex.com

What is Adaptive Design?

Adaptive design can be considered to be a subset of responsive design. "True" responsive design is fluid; it automatically adjusts things like text columns on the homepage by detecting the size of the device. Adaptive design also responds to the size of the device but is not quite the same as a fluid responsive design. Adaptive design displays the website according to certain predefined layouts for different devices and different screen widths. For example, the website will display according to one layout if it detects a screen of 300 pixels, according to another layout if it detects a screen of 600 pixels and yet another way if it detects a screen size of 1000 pixels.

Advantages of adaptive design

  1. Page-load time is generally faster
  2. User experience is, broadly speaking, usually better than true responsive design
  3. Sites can take advantage of device-specific features by creating templates customized for certain devices, such as the iPhone
  4. Depending upon the way the site was designed, users can still choose to opt-out and use the desktop version of the site

Disadvantages of adaptive design

  1. It's not future-proof. The more mobile devices that emerge, the more variety there will be when it comes to mobile screen sizes. An adaptive design for a screen that's 300 pixels wide might look great on most smartphones today, but what will happen to the website on a 500 pixel display when the next breakpoint doesn't take over until 700 pixels? Adaptive design requires a tweaked layout for each screen width, making keeping up with new devices a losing battle given the rate of growth in the mobile device industry.
  2. If a viewer isn't using one of the devices the adaptive design is targeting, he or she may have a less-than-optimal viewing experience. A web developer might use site traffic statistics to figure out the top three types of mobile devices visitors use and design an adaptive site around these three devices. What will happen to all the other users who don't use one of those three devices? Adaptive design will often leave these users in the cold.
  3. It requires more work up-front. To borrow from Lord of the Rings, true responsive web design creates "one website to rule them all." In other words, designers only need to create one layout, which will then automatically adjust itself to fit every device. Adaptive website development requires customizing several site layouts to suit different devices.

Another Major Disadvantage of Adaptive Design

Not all corporations rely upon high quantities of search engine traffic to make their websites productive but many do. When marketing departments deliberate between an adaptive site and a truly responsive site, there's one post from Google's official blog that they should definitely keep in mind:

When building a website that targets smartphones, Google supports three different configurations:

  1. Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.
  2. Sites that dynamically serve all devices on the same set of URLs, but each URL serves different HTML (and CSS) depending on whether the user agent is a desktop or a mobile device.

  3. Sites that have a separate mobile and desktop sites." (Source)

In other words, as far as Google is concerned, indexing pages for searches is easier when companies use true responsive design. The second option is an example of adaptive design; the third option is the old-fashioned, outdated way of creating separate mobile and desktop sites. Therefore, from an Internet marketing and SEO point of view, true responsive design is widely considered to be superior over adaptive design.

However, the choice between adaptive and responsive website design comes down to the individual corporation's needs. There certainly may be situations in which SEO is not a priority for a company's website, and there are also certainly good reasons to choose an adaptive strategy over a true responsive strategy.

master inbound marketing hubspot academy class

subscribe to inbound ecommerce articles

Don't forget to share this post!