Adaptive vs. Responsive Web Design: The Basics

Adaptive and responsive web design are two commonly used approaches to display websites on multiple devices. The approaches get confused sometimes because of their similarities, but they aren’t exactly the same thing. Let’s compare the two.

Responsive Web Design works regardless of the resolution of the device, and it’s more fluid. It bases the width of a website on percentages instead of exact pixels. This percentage ratio is also translated to the size of images and videos.

Because of that, as you resize browser widths, the layout and images change gradually, following the size of your screen widths. It uses media queries in the site’s CSS (Cascading Style Sheets). See gov.uk for an example of this.

Adaptive design uses predetermined, specific resolutions based on specific sizes. You can see this in action by resizing the browser window width. As you resize the window down or up, the layout snaps into the predetermined widths. (See screamingfrog.co.uk to see this in action.)

Adaptive design uses server side scripts to detect the specific devices, and then delivers the correct code for that device. The technique allows you to be very specific and prescriptive. You can also gradually add or disable code and functionality according to what devices users are accessing your site with.

Web designer Jeffrey Zeldman, whose company published the book Responsive Web Design, says that our understanding of Responsive Design should be broadened “to cover any approach that delivers elegant visual experiences regardless of the size of the user’s display and the limitations or capabilities of the device.” In short, adaptive web design is a subset of responsive web design.

Adaptive and responsive web design techniques are very similar. It’s important not to get caught up in the terminologies. Look at your analytics and determine what is best for your site:

• If you notice that your audience is mostly using a few devices with specific resolutions, then you might want to use adaptive layout. Also, if you want to target specific behaviors on devices such as enabling touch gestures and location capabilities, then you’ll want to use adaptive design.
• If you want to make sure that the user experience is consistent across all devices, Responsive Design is the better alternative.

You can also combine the two techniques to provide the best solution for your site. For example, you can use responsive layout and combine it with adaptive techniques, such as having smaller images snap to a predetermined size for mobile devices.

Always remember this:

• Content first.
  Treat layout as an enhancement. Optimize your content for mobile devices.
• Mobile first.
  Mobile design starts with lowest common denominator: the smallest mobile device (think old cell phones) with slow internet connection and bandwidth. Make sure it works in those devices, and progressively build more complex functionality only as needed.

Related to: 

• Responsive Design