Adaptive vs. Responsive for Mobile
by Merrily Chopp | October 8th, 2013
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.
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.
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
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:
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.