The Blog

Adaptive vs. Responsive Web Design

custom_buddypress_developer

You’ve most likely heard  the term “Responsive” when discussing the build or redesign of your website. Since the term was coined, the concept has been accepted as a best practice and the process has matured, so much so it’s all but expected for any new website project. For those that haven’t, Responsive web design (RWD) is an approach to web design whose purpose is to provide an optimal viewing experience — easy reading and navigation with a minimum of resizing, panning, and scrolling, and it does so across a wide range of devices (from desktop computer monitors to mobile phones). However, as hugely successful and user oriented as RWD has proven to be, it is not without its shortcomings, and those shortcomings are unfortunately a general misunderstanding it seems, as to what Responsive is and is not – and that misunderstanding can negatively impact your expectations as a client if you use the term inappropriately with your new design/programming team.

Adaptive Web Design vs. Responsive Web Design
Let’s debunk the misunderstandings. Between the two, Responsive (in it’s default state) is the less expensive technique. While you can expect to pay an extra 10% – 50% of markup, this is largely due to the time it takes a designer to correctly design a site that can work responsively (working within the constraints of a stackable grid). The programming end of Responsive is less time intensive then Adaptive because Responsive uses ‘Fluid CSS Grids’ to resize and fit to each device screen whereas Adaptive serves separate HTML, using CSS to modify the page based on screen size. Translation: Responsive designs respond to changes in width of a browser window by fluidly adjusting the placement of elements on a web page to best fit the available space via s stretch/shrink auto technique.

Adaptive, on the other hand, calls upon the server to make decisions that determine what should and shouldn’t be sent to the user, downloading only the appropriate graphic/content for each device. Instead of using a scalable version of the same site, an Adaptive Web Design relies on the server to determine how to optimally render each page based on scripts that identify the user’s platform. AWD then delivers only the elements which are necessary for the ultimate experience on that specific device and operating system. Images are resized, elements like JavaScript are likely to be discarded entirely, and load time is greatly enhanced… all of which culminates in the user getting a much different (and more robust) version of the site than they would if they were viewing it on a desktop.  For example, the Adaptive website will display your site according to one  layout if it detects a screen of 300 pixels, according to another layout if it detects a screen of 600 pixels and yet another  layout if it detects a screen size of 1000 pixels. Each layout will use a different version of the same image/graphic which has been pre-sized and loaded to the server for this purpose.

 

For those tech savvy readers the differences can be summed up with this chart:

 

Screen Shot 2015-02-10 at 3.41.08 PM

 

Determine Your Expectations Upfront
If you’re looking for a modified experience per device or a pixel perfect experience per device Responsive isn’t your girl – there are just too many devices, scales and orientations in the equation for this “fluid” technique (one design that enlarges and shrinks) to ever cut the mustard. You can get close, but to do so you will need to customize your “Responsive” site extensively (in breakpoints, scaffolding and content manipulation), which costs a lot more and is no longer “technically” responsive. The core tactics of responsive are:

Responsive Breakpoints
Breakpoints (sometimes called adaptation points) are the pre-defined ranges of browser width where a change in layout is programmed to take place (typically by calling a media query). In simple terms, these are the points that your website will display differently. It’s an important concept to understand, because the more breakpoints that are required, the more your Responsive design site will theoretically cost. Twitter Bootstrap uses the following default break points for responsive design:

Custom, iPhone Retina: 320px
Extra Small Devices, Phones: 480px
Small Devices, Tablets: 768px
Medium Devices, Desktops: 992px
Large Devices, Wide Screens: 1200px

Looking at a modern high traffic site like nike.com, the 4 major breakpoints they use are 480px, 768px, 960px, & 1280px but they have minor breakpoints at 1440px and 1600px. If Nike is satisfied with 4 major and 2 minor breakpoints, do you need 20? To understand how many breakpoints are *actually* needed you should review your visitor data and be sure you’re using a web tool like responsivetest.net to test the responsiveness of the site vs snapping your browser to imaginary sizes never to be duplicated by any default screen size/device (and thinking your customers will replicate these non standard sizes beyond happenstance, while also expecting the user experience to be optimal).

 

Responsive Scaffolding
Keep in mind Responsive is a fluid site that simply resizes (through stacking called “scaffolding”). In short, as long as a site is designed with this in mind, you get what you get. The default Bootstrap grid system is 940px wide without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically – across the board. If you’re going to want to edit the stacking specifically for many devices you’ll need to discuss the extra time and cost with your web team or consider Adaptive.

 

Responsive Content Conundrums
Once you understand the core tactics or Responsive, you’ll find yourself dealing with the bigger implications. The first of which is how to get all the content you’ve accumulated on your desktop version to fit on the smaller screen. You may want to edit the mobile version to strip away what doesn’t make sense to the mobile user (typically on the go) and what he’s really looking for when accessing your site from this device (phone, directions or a summary of your services and products). We typically always count this “one” (mobile) edit into our quote for Responsive because a complex footer on a desktop of tablet will scroll 3 screens deep on a mobile. But the more content edits you make (for various different sizes), breakpoints and stacking edits, the more things will go wonky and require more reviews and more edits – it is, after all, intended to be an autoresizing experience and editing one can throw off another.

 

Is Adaptive Right for You?
Adaptive Web Designs are built for the end goal – creating a site that is truly applicable to a variety of different mobile platforms and layouts and improving end-user experiences via better performance. Sounds great right? Beyond the cost (which is obviously a lot more then Responsive) there are indeed some drawbacks:

 

  • It’s not future-proof (is anything?). The more hand held devices that emerge, the more variety there will be with regard to screen sizes to design experiences for. An Adaptive design for a screen that’s 300 pixels wide might look great on most phones (now), but what will happen to the website on a 500 pixel display when the next breakpoint is 700 pixels? Adaptive design requires a customized layout for each screen width, making keeping up with new devices a hard fought battle given the rate of growth in the industry.
  • If a visitor isn’t using one of the devices your Adaptive design is targeting, they may have a non-optimal viewing experience. Many times, site traffic statistics are used to figure out which devices your visitors use most on average and the Adaptive site is designed around these devices. Do you want to design for less than 10% of your audience? All things to consider.
  • True Responsive web design creates “one website to rule them all.” In other words, designers only need to create one layout, which will then automatically adjust itself to fit every device. Adaptive website development requires customizing several site layouts to suit different devices.
  • SEO must be carefully configured and attended to when designing an Adaptive site which is time intesive. Each site served has different url links and graphics, which all need to be optimized, while Responsive serves the same set to many.

Weighing the Differences and Costs
There really is no right answer. Whether you need an Adaptive solution or you can make do with just a Responsive site or a heavily tweaked Responsive site, it’s a decision you need to make with all the facts. No solution is perfect. But hopefully you now have a better understanding of the constraints, advantages/disadvantages and cost differences of Adaptive Web Design vs. Responsive Web Design. Understanding these terms (correctly) will lead to a better experience for all involved.

Comments are closed.