Responsive vs Adaptive Website Design: What’s the Difference?

 

So, you need a web site (or have one) and want to make sure it’s mobile-friendly. But have you ever wondered how that happens? Have you run across industry terminology of “Responsive” or “Adaptive” and wondered what it’s all about?

That’s exactly what I’m going to explain, as it’s an important distinction to consider when planning out how your site will be built and maintained.

Responsive Vs Adaptive Web Design Feature

Responsive vs Adaptive: A Quick and Dirty Explanation.

The basic answer is that they both do the same thing: make your site friendly to mobile devices. Ever look at a website on a smartphone and have to pinch and swipe in order to see and read that desktop based layout? That’s what mobile-friendly fixes—it saves your viewers from squinting, grumbling, and ultimately leaving your site for one with a better user experience. With over 90% of people moving between devices to view content (i.e. seeing something on their phone, and saving it for later to view on their desktop, or vice versa) it’s critical that your site is optimized for all devices: mobile, tablet, and desktop.


What is a Responsive Website?

The Quick Answer: a single site and a single set of content, optimized to display based on the viewing width of the device.

Responsive Web Design is an approach aimed at providing optimal viewing experiences across a wide range of devices. As the name implies, the site layout responds to the size of the screen.

Responsive websites are based on a fluid design grid, where widths are defined by percentages (i.e. 50% of the screen size for two columns), and utilize CSS @media queries to allow for refinement at various breaking points.

Responsive Web Design in Action

Responsive Web Design Illustrated

We recently launched a new site that is a perfect example of a responsive design.

To see responsive in action, view the site and resize your browser window (yes, I’m assuming you are on a desktop for this exercise!). Now watch as the site responds to your browser size:

  1. Images resize as your screen width narrows or expands.
  2. Multiple columns of the content stack into a single column as your browser width narrows.
  3. The site navigation truncates into “tappable” groupings at smaller widths, and expands to fully exposed lists at wider sizes

What about an adaptive design?

The Quick Answer: a single site with different content and layout requirements served to the client, based on the type of device they are using.

With Adaptive web design, there are distinct layouts for multiple screens sizes. With server-side code to detect the device size, you are in essence able to serve a different site to your users, based on their device.

Adaptive Web Design in Action

Adaptive Web Design a unique layout for each device

One of our design clients opted for an adaptive layout in order to reduce the upfront investment cost on their site development, and to deliver reduced content to mobile users.

Try the same exercise from above on this site.

As you resize your browser, nothing happens (well, technically something does happen: you see a scroll bar when you reduce the browser width). But this is intentional: the site is adaptive, and the layout was loaded based on your device.

When you visit the site on your phone, you will notice a different layout, and streamlined content.


Responsive vs. Adaptive: A Side-by-Side Comparison


Scalable for various screen sizes (i.e. a mobile friendly site)

Yes, yes, and yes! Both Responsive and Adaptive Technologies are design specifically to effectively display content on various devices.


Content Delivery

Responsive:
A fluid grid allows your content to resize and be positioned based on the device.

Adaptive:
Server side scripts deliver specific content and layout based on detected device.


Future Focused

Responsive:
A percentage based layout will still respond when the “next great thing” enters the market.

Adaptive:
New layouts will need to be created as new devices, with custom widths, are launched to the market.


Speed

We’ve seen expert reports and detailed number crunching that support both RWD and AWD being the winner here. What it really comes down to is how the site is built, and what optimization techniques you use, regardless of responsive or adaptive. i.e. they can both be speedy if well built and optimized.


Complexity of Creation

Responsive:
Your design and development teams need to be top notch in order to make responsive really work. Depending on their workflow and your design requirements, responsive can be simple, or complex.

Adaptive:
Unique layouts must be coded for each media size you are supporting – this can be a simple or complex task depending on that number.


Complexity of Maintaining

Responsive:
This really depends on the CMS you are using – but generally speaking RWD serves the same content, regardless of the device, and is thus easier to maintain.

Adaptive:
You create unique content for each layout you are supporting. Depending on your CMS, this could be quite simple – but you will need to create content for each layout. Additional time and effort will be needed to address SEO concerns, as well as creating new layouts for new devices.


Cost

This is another area where the ball can be seen in either court. If you are building a responsive design from scratch, yes it will be more expensive, and adaptive could be easier on the budget if only a few layouts are needed. However, if Adaptive is being used to serve up very specific content to mobile users, the site planning, design, and development could equate to the same cost as 3 unique sites. It really depends on your specific site requirements.


Which is better for your business, Responsive or Adaptive Web Design?

To make it really simple, I’ll give you a really quick answer:

  • Responsive is best for developing and delivering a standard site for your business. e.g. your main concern is that your site works regardless of the device.
  • Adaptive is the only solution to serve unique content based on device. e.g. you have a mobile audience with very specific needs.

But the real answer for you is what does your site, and your audience require? It’s all about wisely investing your budget, figuring possible ROI, and factoring in future site maintenance time. For those of you seeking more education, here are a few specific factors to consider.

Development time and investment.

Even though you will see many articles in the industry stating that responsive is more expensive, it doesn’t have to be. We recommend Responsive web design.

About 5 years ago, we decided to only build mobile friendly sites. In order to do so, and still work with the wonderful small and local businesses that we cherish, we needed to make this affordable. Over the years, we refined our techniques, implemented proven industry standards, and have developed a responsive gridwork that we base 95% of our sites on.

So yes, it was difficult and took time to ensure a great responsive site, but we already did that part! In fact, some sites we launch today require a lower budget and have a quicker deployment schedule than simpler sites did 5+ years ago.

Those darn new devices.

Consumers love them and developers hate them, but you can’t get around them. The main consideration here is to be aware of how your site is built, and be ready to act. If a snazzy new kitchen gadget with wi-fi takes the U.S. by storm, and you have a recipe site, please be sure it works on that device!

For adaptive web sites, this means you may need to develop a new layout for the device. But this also means you get to deploy a new layout, specifically for that device and provide an optimized experience for the savvy chef.

Speed.

While it’s not my intent to go over every item that comes into play with site speed optimization, this needs to be addressed because there are varying viewpoints on which technology is better for developing speedy sites. As I briefly touched on above, your site will serve your audience regardless of responsive vs. adaptive. Some things to keep in mind for site speed optimization:

  • Develop with speed in mind, either way
  • Consider leveraging a quality CDN (content delivery network) such as CloudFlare and/or other caching services
  • Use quality hosting (no, this does not include GoDaddy)
  • Consider other tools such as Adaptive Images to further optimize your site for each device.

A Hybrid Approach?

My personal take on the question of responsive vs. adaptive (which happens to be based on designing and planning many many many sites!) is to always always go responsive… and incorporate adaptive technology where appropriate.

Responsive and Adaptive Playing Together

Example 1: A Responsive Layout with Adaptive Technology

Consider that you are going to be selling ad space on your site. You offer a wide banner on your desktop site, but there’s no way that will fly on a smartphone. Even though your site is built on a responsive grid, wide desktop ad spaces just don’t perform well on a smaller mobile device.

The solution? Leverage adaptive technology to display a wide ad on a desktop, and a square mobile friendly ad on a smartphone.

Example 2: An Adaptive Site with Responsive Layouts

Adaptive sites are generally developed with six common screen widths in mind:

  • 320px
  • 480px
  • 760px
  • 960px
  • 1200px
  • 1600px

Let’s say that a new device with a screen with of 1400px is all the rage, and while serving up your 1200px layout technically works, a better experience can be gained by leveraging the extra 200px the new device offers to present your content with a wider layout, and a larger font size. If your layouts were built on a responsive grid, you would already have exactly what you need – a layout that is unique to desktop style (wide width) devices.

Take the concept a bit further, and you could reduce the number of layouts required by half, just by leveraging responsive layouts for your adaptive site (i.e. percentage based layouts which would allow the 320px layout to display equally effectively on a 480px device).


Still have questions?

Responsive vs. Adaptive technology is a big question, and with so many technical hooks affecting the final decision, sometimes you just need to talk to someone who has experience building sites and has seen where one technology really does outshine the other.

I invite you to read about our website design process, which includes customized site planning, or simply call— I would be happy to discuss your specific site with you and, to help with the decision. 303-995-1472


Leave Your Comment