Have You Gone Responsive or Adaptive Yet?

Pasquale  Scerbo

April 11, 2014

Related Topics

responsive

As a senior developer for Extractable, I’ve been involved in many assignments that have to do with our clients wanting to “go mobile.” And you may be shocked to know that many businesses have yet to have a mobile site or even a mobile presence of some sort. Late last year I remember reading an article stating that if you don’t have a responsive site by 2014, (or are planning to do so in the near future), you’re going out of business. Now that’s a pretty bold statement, but one that is not that far off.

The fact of the matter is that mobile usage is increasing on a daily basis, in fact, mobile internet usage is projected to overtake desktop internet usage by 2014. (Source: Microsoft Tag). Consumers use their mobile devices to check email, get quick info about a company, search for products or services or just to do browsing as they do with their laptops. If these consumers don’t find your site to be mobile friendly, stats show they will immediately “jump ship” and move on to your competitor’s site whose site may be much easier to use.

So how can you meet the needs of this mobile user? By creating a mobile experience that works best for your content. There are two ways this can be done: Develop a Responsive site or develop an Adaptive Site.

You may have heard these terms written in many articles and blog posts with the direction that one method is better than the other. I believe it’s a case-by-case decision. What may work for one website may not work for another.

Below is a brief description of each along with pros/cons.

Responsive Website

A responsive website automatically changes to fit the device you're reading it on. A key difference between Responsive and Adaptive is that Responsive design is client-side which means the page is sent to the device browser (the client), and the browser then modifies the way the page looks in relation to the size of the browser window. The website initially serves the same content to every device but the layout will change depending on device size. This may result in content that is removed or a layout that looks rearranged in order to better fit the screen size at hand.

Advantages:

  • Single Website (one URL)
  • Adjusts to screen size on page load
  • Only one place to make changes

Disadvantages:

  • All content is downloaded whether it’s used or not
  • Pages will load much slower because of #1
  • You can typically triple the time it takes to build the website due to the complexity of accounting for all screen sizes

Adaptive Website

In Adaptive design, we develop a redefined set of layout sizes based on device screen size, then what is served is “adapted” to the detected device. The web server detects the user’s device and will load the appropriate version of the site that is optimized for that particular device. This is a “server-side” approach because the server determines which version of the site to send to the user.

Advantages:

  • Single website (one URL)
  • Faster loading as it only receives content specific for that device
  • Can have completely different content for each device

Disadvantages:

  • Completely different sites
  • In most cases it will require more maintenance

In comparison, the visible difference is that responsive design will  alter its layout while you resize your browser window while the adaptive design will load a specific layout for the device you're viewing the site on. If you resize your window with an adaptive website it will jump to a different breakpoint when you reach a screen size that suits another predefined layout.

Adaptive or Responsive – What’s The Right Choice? 

As mentioned previously, the decision to make a responsive or adaptive site should be a decision that is made case-by-case. Responsive websites generally work well for content-heavy websites with not a lot of difference in what the user should be experiencing between mobile and desktop.

An Adaptive website is the winner most cases where user intent on mobile differs significantly, and website performance becomes a crucial factor. While both responsive design and adaptive both have their advantages it’s best to determine which one is right for you by putting your customer's needs as the primary concern – (all while keeping in mind your own business goals.)

One more important note: As a developer that has seen countless sites… LESS IS MORE. Just because you have a desktop site that is packed with information and interactivity does not mean that all that content and interactivity should be scaled down to the mobile website. Simplicity, ease of use, and getting the necessary content to your user is critical and should be your number one priority. 

The future of the internet is no longer associated with just your desktop or laptop computer. Phones, tablets, game consoles, TVs, watches, glasses, etc., are all being used to browse the web. Is your site ready for these devices? If not, you should get to it!