Warning: Illegal string offset 'output_key' in /nfs/c11/h04/mnt/200948/domains/ontrackdigital.ca/html/wp-includes/nav-menu.php on line 604

Warning: Illegal string offset 'output_key' in /nfs/c11/h04/mnt/200948/domains/ontrackdigital.ca/html/wp-includes/nav-menu.php on line 604

Warning: Illegal string offset 'output_key' in /nfs/c11/h04/mnt/200948/domains/ontrackdigital.ca/html/wp-includes/nav-menu.php on line 604

Warning: Illegal string offset 'output_key' in /nfs/c11/h04/mnt/200948/domains/ontrackdigital.ca/html/wp-includes/nav-menu.php on line 604

Warning: Illegal string offset 'output_key' in /nfs/c11/h04/mnt/200948/domains/ontrackdigital.ca/html/wp-includes/nav-menu.php on line 604

Warning: Illegal string offset 'output_key' in /nfs/c11/h04/mnt/200948/domains/ontrackdigital.ca/html/wp-includes/nav-menu.php on line 604

Read our blog

Jan 20, 2015

The difference between responsive and adaptive design

  • Posted by Tim McLarty
  • Comments Off
responsive website

You have heard so much about the trends towards mobile viewing of your website.  You only need to stop your car at any traffic light and watch people, completely oblivious to everything around them, walking across the street with their heads buried in their device.


Since we all agree, having your website mobile friendly is a no-brainer, what are options in going from desktop to mobile?

We have a client who we won’t mention by name for competitive purposes, but they had a desktop site they loved.  We impressed upon them the importance of making it mobile and tablet friendly to maximize views and conversions.  The first question every client asks is, what’s the difference between desktop and mobile?

Let’s start with a look at the responsive desktop version of a typical site design.  Notice in the graphic below how everything flows horizontally and logically across the screen.


Now let’s look at the template when viewed on a mobile phone. If you look at the  graphic, in this particular instance an i-Phone, you’ll  notice how when the phone retains the desktop look when viewed horizontally.

But when you flip the phone vertically, all the items line up in a vertical stack.  This is the sign of a true responsive template.


Now in this view of the mobile presentation you’ll see information and icons are stacked on top of each other. A true, responsive site should automatically resize in a percentile basis and move items to scale and stack for any mobile or tablet device.


As we look at responsive verses adaptive, the easiest way to tell is by dragging your desktop browser as narrow as you can take it.  A responsive design should expand fluidly and automatically, where as adaptive designs hitch as you expand a browser. You can almost see them mechanically rejig themselves as they refresh for the new browser configuration.

Responsive Web Design – Constantly Changing

Responsive Web Design provides the optimal viewing experience of a website, no matter what type of device you’re viewing it on.  This type of design builds sites that provide a preferred viewing experience—easy reading and navigation with a minimum of resizing, scrolling, and panning—across a wide range of devices (from desktop monitors to mobile phones). This is done by using fluid grids, which means the design  works no matter what the screen size is. So no matter how much you resize the screen, that same layout will automatically respond to that size.

Adaptive Web Design – Various changes

Adaptive Web Design is different from Responsive Design in that there isn’t one layout that always changes. It’s planned out so there are several distinct layouts for multiple screen sizes, and the layout used depends on the screen size used. There is most commonly  a specific layout for mobile phones, tablets, and desktop computers. These three designs take turns depending on what device the viewer is viewing the site through. The site detects the type of device used, and brings up the pre-set layout for that device.

Which Should You Choose?

If a premium viewing experience is your desired result, responsive is the way to go.  It automatically resizes and loads faster than an adaptive site.  Granted it is a bit more expensive because it’s somewhat more difficult to build, depending on whether you are building from scratch or adapting an existing responsive theme.  But, as screen sizes constantly change, you won’t require a new adaptive layout.  The responsive will do just that, respond.

About the Author

Tim McLarty - Ontrack Communications Toronto
  Tim McLarty is owner and creative director of creative Video & Web boutique Ontrack Communications in Toronto.  When he’s not designing video and websites with    senior designer Heronymo Allen, he’s writing and performing in short films, and cursing the Toronto Maple Leafs.