Adaptive vs. Responsive for Mobile

Recently, PINT was approached with this question about mobile web design:

*“Which is better and why – responsive or adaptive?” *

Our experts from the Creative and Production departments weighed in, and we wanted to share the answer.

There are various opinions about the exact definition of responsive web design vs. adaptive web design (also known as RWD and AWD). They are both types of progressive enhancement for web pages. For PINT, the real question is the actual delivery of content to the user and creating the best user experience for visitors on all types of devices. But before deciding which approach is the most appropriate for your project, it is important to understand the difference** **between the two.

Adaptive Sites

In an adaptive site, you sense the target user’s environment or device on the server, before the page is  loaded. This allows you to serve an optimized version of the site or a page specifically set up for that configuration. For example, if you sense the user is on a mobile device, you could serve a mobile-developed version of the page. This version might have a heavy JavaScript banner rotation removed and a limited amount of PDF files to download. Certain content may be simplified or removed completely. The goal here is to minimize the physical amount of information they need to download. Since you have the ability to remove and modify the markup and assets, the load time often is lower. For that reason, this can be considered an optimization.

One site that has been using adaptive design in some innovative ways is Etsy.

From a development standpoint, adaptive has a significant drawback: you typically need to create and maintain separate versions of the site, which can add to development costs and pose problems after launch if your organization is ill equipped to handle maintaining separate codebases.

It is worth noting that some people believe adaptive design is not limited to implementation on the server.  In fact, certain descriptions define adaptive as anything that uses JavaScript for specific breakpoints. This definition can make it look a lot like responsive, just without the fluidity.

Responsive Design

With a responsive site setup, no considerations are made before the page is fetched by the user. To put it simply, you are downloading the same content on a phone as you would on a desktop computer. The ‘responsive’ part comes in when it comes to displaying that content.

The NPR site is an example of delivering across devices using RWD.

Typically with a responsive solution, you set resolution breakpoints or listeners via media queries in the CSS file (which is run in the client browser on page/DOM load). Depending on where your device lies within these media rules, the CSS will dictate how the site is visually displayed to the user. You can still choose to show or hide content with responsive, but in terms of the actual content served, nothing has changed. The same information is there for any user. At times this can make sites somewhat bloated: a recent survey of responsive e-commerce sites showed their homepages tipped the scales at an average of 1.9MB, which could lose some visitors on slow connections.

While that is a downside for using the responsive approach, the upsides tend to outweigh this for most sites. Typically, all you need to do is maintain different CSS rules, often all in the same CSS file. Why is that preferable? Fewer headaches, less manpower requirements, and lower costs for maintaining the site. For most sites, the performance saving of the adaptive approach is negligible and not worth the costs, unless many pages are asking the user to download massive amounts of data.

The PINT Approach

Because most sites do not differ enough between mobile and desktop to justify the cost of adaptive design and development, most would argue that responsive design is better. Its barrier to entry for developers is typically easier as it only requires HTML and CSS to create a continually changing website for all screen sizes. However, responsive can be complicated if the client does not have a redesign in the works, since retrofitting code to be responsive can be problematic. Adaptive can be beneficial in these cases, as different website views are designed around specific devices or screen sizes. However, this requires much more knowledge of JavaScript in order to do all of the sensing on either the client or server side.

At PINT, we want the best of both worlds! We lean responsive, but typically blend some adaptive and some responsive features. One example is the Nylabone site:

We design websites to be responsive, but we also create ‘break points’ with JavaScript and so the site changes more specifically in an adaptive way for different scenarios. One is not ‘better’ than the other. Selecting one of these tools is highly dependent on the project and user interface requirements, user experience goals, as well as the client’s budget, timeline, and priorities.

Which approach do you favor? Still wondering what would work best for your site? Reach out in the comments below or drop us a line.