Articles

Back

Mobile Sites: Adaptive vs. Responsive

Brad Cannon | 12/19/2016

Something that has really been interesting to see this Christmas season is that shopping via mobile devices has pretty much become mainstream. I’ve seen several reports on television in the past two months advising that mobile sales are up by as much as 30% over last year. That’s a pretty big deal.

 

With mobile beginning to play a big role in retail, a lot of dealers have questions about how the technology works, and how they can capitalize on it.

 

One of the biggest questions I hear is about web sites being “mobile ready” and what does that mean?

There are two main schools of thought: Adaptive design and Responsive design.

 

Before we get into those two design methods, let’s clarify who they actually apply to. 

 

 

Devices basically fall into two big camps: Desktop and everyone else. When you think about everyone else, that includes all of the different mobile devices out there, plus all of the different tablets, and anything other than a desktop. (Anything that browses the web.) As you can imagine, that’s a lot of different sizes, resolutions, and display capabilities.

 

The adaptive school of design takes the approach that the site has a specific design for each screen size for potential visitors. In other words, a layout is programmed for each device that could be used to browse the site: a layout for iPhone 6, 7, Samsung Galaxy 6, 7, Kindle Fire 7HDX, etc.

 

If a specific device shows up that doesn’t have its own layout, the site displays what it thinks is the closest. This means the visitor may have to do a lot of scrolling – both up and down as well as left to right. In any case, there is potential for a visitor to have a less than excellent experience on the site which could lead to people leaving.

Adaptive is not particularly ideal, in that it involves a lot of up front programming to try and account for all the different screens and devices that exist – and new ones are being added every day.

 

The responsive design school takes a different approach. Rather than creating screens of fixed sizes that correspond to a particular device, it can best be thought of as elastic. All of the elements that make up a page are based upon percentages of available screen size. 

 

When a visitor to a responsive site first arrives, the site checks to see what the visitor’s screen size and display capabilities are and displays the pages based upon what it finds. In other words, the code for a page might say that the header width equals 100% rather than 650 pixels. A screen that is 400 pixels wide would display the first header just fine.  But, because the width of the second is dictated to be 650 pixels wide, the visitor would have to scroll left and right to see the whole thing. If there were links across the entire header, the second would be pretty clumsy. 

 

This is the big difference between responsive and adaptive design. Adaptive designs pages for specific devices using fixed element sizes (like images, headers, borders, etc.), and if it doesn’t have the exact one required, it serves the closest thing it has.

 

Responsive sites don’t care what device you use to browse. It checks what is available display wise, and uses predetermined percentages to create the page drawing the elements according to what percentage of the screen they should take up. Other things may happen as well, like if the page has three columns, as the available real estate gets smaller (like viewing on an iphone instead of an ipad) it may display as two, or one column. (All dictated by the code up front.)

 

Responsive design really is the better way to design a web site, although it might take a little more up front planning to accomplish. The end result is a better overall user experience.  

 

The good news is that most of the major players in the web provider world are now designing using responsive design.  A big reason for this is that Google announced a few months ago that after the first of the year, sites that weren’t responsive wouldn’t be as visible in search results. In other words, if you aren’t delivering the optimal user experience you’re going to have a harder time showing up.

 

If you’re concerned about whether or not you have a responsive web site, or would like to talk about Google Adwords or Reputation Management give us a call. We have the best digital marketing department in the business and would be happy to help.

 

Talk Soon,

Brad