Adaptive vs Responsive Web Design

Success blog.

 Jericho Phire

Chief Creative Officer

graphics by AJ Garms

 

When it comes to website design and development, many things must be taken into consideration. As any good web designer will attest, the process of making a website involves far more than just making an attractive site, throwing it online, and hoping for the best. So much more goes into the process.

 

Layout design, SEO, copywriting, keywording (yes, it's still used), meta tags, UI design, prototyping, CMS development, database setup, quality assurance testing, device testing, data analysis, and so much more must be considered. Basically, what goes on behind the scenes during the development of a website can either catapult a business's website to the top of the list, or can cause it to fall into internet obscurity. And for this reason, it's best to leave web design and development to the professionals.

 

In addition to all that, web designers must give special consideration to the fact that we are living in a post-PC world. Today, more and more smart phones and tablets are being used to view websites across the web. The first wave of moving away from desktop dependency came in 2010, at a time when mobile devices started becoming more readily accessible to the public-at-large thanks to phone companies including free smartphones and tablets in their service contracts. It's no wonder, mobile now represents 65% of all digital media time. By 2015, 80% of all internet users owned smartphones; and data collected in April 2016 reveals that 93% of all Americans aged 18-24 years old now own smartphones.

So how do web designers deal with this rapid paradigm shift in user behavior? Simple. We do it by designing with mobile in mind--not as a secondary effect of mobile use, but as primary concern for today and future use.

 

There are three primary methods in which web designers design websites for mobile use: Responsive Website Design (RWD), Adaptive Website Design (AWD), and the designing of standalone mobile websites that have an "m." qualifier preceding a site's URL. 

 

For our purposes, we are going to leave out any discussion of that last method, because stand alone mobile websites (while appropriate in some situations) tend to be the least favored option for designers and businesses alike. The reason for this is because the creation of stand alone mobile sites accrue more upfront costs and maintenance, and can cause a site’s SEO to suffer. So we're just going to ignore this method as it slowly fades from our lives. (And designers everywhere breathe a collective sigh of relief.)

 

Now, I could waste time struggling to find the right words to sum it all up in one short paragraph or two, but I think the guys and gals over at Mozilla said it best when they wrote:

 

 

"Both responsive and adaptive design attempt to optimize the user experience across different devices, adjusting for different viewport sizes, resolutions, usage contexts, control mechanisms, and so on.

 

"Responsive design works on the principle of flexibility - a single fluid website that can look good on any device. Responsive websites use media queries, flexible grids, and responsive images to create a user experience that flexes and changes based on a multitude of factors.

 

"Adaptive design is more like the modern definition of progressive enhancement. Instead of one flexible design, adaptive design detects the device and other features, and then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics."

 

Wow. Couldn't have said it better myself.

In this blog entry we will simply explore the pros and cons of both Adaptive and Responsive design with regards to performance and UX. Please note, however, as mobile technology advances more and more each day, the line between Adaptive and Responsive design becomes a bit blurry. In fact, web designers are starting to combine the best of both methods into what is referred to as Hybrid or Seamless design. But the method by which this blending occurs has yet to be 100% perfected in my opinion (even though I use it regularly in my own web design work).

 

Responsive

RWD infographicPros

Uses CSS media queries to change styles based on the target device and display type. Fluid grids and percentage parameters are used for width and height ensuring the site looks good across as many devices as possible. Mobile users will see a different layout from desktop users, however that is usually not a problem with most sites. Responsive websites require less maintenance when we consider the fact that only one design needs to be updated instead of multiple designs as needed with Adaptive.

 

Cons

Load time is a real concern with Responsive design, because as a site visitor loads a page with Responsive design, they are actually loading all the information for all devices at one time instead of just the information needed for their particular device. Images are also an issue as they have to be loaded at their original size then scaled down to fit whatever device is being used to view them. Overall, UX is compromised when one device experience is favored over another.  For example, if a Responsive site looks great on desktop, it might not look so great on mobile and vice versa. Responsive is also not the best solution for users with slow connections, or for sites running ads.

 

Adaptive 

AWDPros

While Adaptive also uses percentages to adjust to specific widths and heights, Adaptive goes a step further and uses static layouts based on breakpoints. It also auto-detects screen size, device, and operating system. Once these important factors are considered, Adaptive then goes on to load the appropriate, pre-determined layout necessary for a particular device. Generally, Adaptive designers will design for up to six common device widths. (I only use four widths when I use Adaptive design, but that discussion is probably best left for another day.) The Adaptive method allows the designer to optimize for desktop and mobile users individually, thus ensuring that each user gets the best experience. Load times are much faster with Adaptive than with Responsive. And with Adaptive, advertising monetization is a breeze.

 

Cons

Mobile users usually find Adaptive design to be easier to navigate, but tablet users sometimes tell a different story. Tablets are the “stuck in limbo” demographic. Tablets can range anywhere from 5” to 11” in size. Some tablets will tell an Adaptive website to call up a mobile or desktop version of the site in order for it to render comfortably, despite the fact that it’s neither of these devices. It really all depends on the tablet in question though. A major drawback to this—as I assume you already suspect—is what happens when a website MUST have a tablet version that is different from the mobile or desktop version? Simply put: It won’t render correctly. Unless careful attention is placed on tablet design, this area could suffer more than it does with RWD. *Side note for all you Adaptive designers out there pulling your hair out: Don’t worry. The fault here doesn’t fall in your lap. It falls more into the laps of device designers and manufacturers.

 

Right away we begin to see how each of these beasts has their own advantages and disadvantages. 

 

Due to the availability of CMS systems like WordPress, Joomla and Drupal, the majority of new sites today use Responsive web design, because it allows both web design veterans and less-experienced designers the opportunity to assembly-line websites quickly and easily. But this approach may NOT be the best solution for a client who desires a much more interactive, customized, tailored website, or a client who demands lightning fast load times.

 

Take, for example, a test done by Catchpoint. They built two websites, both in WordPress.

 

The first test site used a standard WP Responsive theme. This non-optimized site loaded much slower than the second site, because it had to first download everything that is required for desktop before adjusting for mobile. This approach (whilst tolerable in most circumstances) is not ideal, and can result in very dissatisfied clients who want fast loading pages.

 

The second site was also built using a WP Responsive theme but had an accompanying plugin called Wiziapp. The plugin—through the use of media queries—sent out a mobile theme that is catered to the device used to view the site. (Basically, the plugin is designed to function in much the same way as an Adaptive site does).  The result was an obvious uptick in speed and performance. But since the media query had to be sent out to bypass the standard theme’s inherent need to call up everything for desktop, it still resulted in a slower load time than an Adaptive site would have offered.

The test also reveals that, when compared with Responsive sites, Adaptive wins out...BIG TIME! (Pun intended.) Adaptive websites had a 40%+ faster load time than their Responsive cousins.

 

So what's the final verdict?

 

When choosing how to design for mobile, it all boils down to three main factors: budget, time, and user experience—with the final consideration being the most important. Web designers MUST consider a site’s audience as the key determining factor when it comes to designing a website. Once a website audience is established (as well as what devices are probably going to be used most to view a site), it becomes much easier to design with the user in mind.

 

Responsive design will probably remain as leader (for now) considering how many sites are designed using this method. But this might simply be due to the fact that we haven’t found the miracle cure for Adaptive’s heavy demand on maintenance and initial creation time…yet.

 

Adaptive design is seeing a steady increase in use, and more and more web designers are using it--either in place of or in addition to Responsive. I strongly suspect as clients and designers tire of the same ol' cookie cutter look of Responsive design, we will begin seeing Adaptive design taking the lead.

 

For me, I will keep both methods as part of my overall design arsenal in order to address as many of my client needs as possible.