The difference between responsive and adaptive web design

http://www.responsys.com/blogs/nsm/cross-channel-marketing/difference-responsive-adaptive-web-design/

by Tanya Williams

When working with customers and developing scopes for projects, we often present two options for web design: responsive design and adaptive design. The two are commonly confused, and some may refer to responsive as a subset of adaptive technologies. Therefore, it’s helpful to make sure all parties involved are using the same terminology when talking about site implementation. Understanding the key differences between responsive and adaptive design will keep everyone on the same page and help you select the best approach for your project.

Responsive vs. adaptive

True responsive design is fluid, using CSS3 media queries to respond to any screen sizes. With the use of this CSS3 module, you can create a flexible grid where text can wrap and images can shrink to adjust along with your browser.  For designers, this is similar to adjusting a text box in Photoshop and having the copy adjust to fill the height and width of the box.

Adjust the browser size of this responsive website to see how the page contents responds.

A Flexible Grid

With responsive design, the use of media queries also opens up a range of options that allow for layouts (along with colors, images, fonts and text styles) to change based on screen size.

Adaptive design uses a series of static layouts based on breakpoints. For example, you may design a webpage at three different sizes: 320 for mobile phones, 760 pixels for tablets, and 960 for desktop browsers. Unlike responsive (where the design responds while you adjust a browser window), adaptive files don’t respond once they are loaded. It detects the device and calls up the properly sized layout to view.

For a straight-forward visual example of how these both work, check out this site by Nick Davison.

Tip: Choose an option from the drop-down menu in the top right corner to view each sample.

Adaptive Layout

Deciding on the proper approach

Responsive fluid design may give your user an optimal experience no matter what device they view the design in. It also allows for one HTML file to optimize for more than one environment. You may, however, have less control over how everything looks if you’re taking a fluid approach by using percentage based scaling. In this case, media queries still open up a range of possibilities for layout as previously mentioned.

The adaptive design approach may work better for clients with a smaller budget as you would only need to develop layouts for a few screen sizes rather than planning for an optimal experience for all. This approach can also be considered if a site uses a lot of images that won’t scale well.

Once you know what resources are available and which approach best suits your client’s needs, it’s time to get started. See the list below for helpful hints to keep your project on the right track, whether designing responsive or adaptive.

Quick tips for designers:

• Invite your developers into the conversation as early as possible. Discuss coding restrictions and align your visions for the project.
• Determine the differences and similarities between page elements and develop common patterns for page templates. This approach will save time and give a consistent feel to the site.
• When designing adaptive, design for these six common screen widths: 320, 480, 760, 960, 1200 and 1600.
• Provide your developer with a style guide like this one along with your PSD’s.
• Be available for QA or an initial walk-thru of the coded files to ensure that each page renders as you had envisioned.

   

Quick tips for coders:

• Media queries do not work in Internet Explorer 8 and below. Use a Javascript polyfill like CSS3-MediaQueries.js to support media queries in old legacy browsers. Consider though that polyfills can add to the file size and that Javascript can be turned off by users.
• For flexible grid layouts in Responsive design use ems or percentages.  Avoid fixed widths.
• In responsive design, use max-width:100% to make images, videos and HTML5 canvas scalable. As the viewports get smaller any media will scale down according to its container width. However, max-width does not work with embedded media. Check out this article for the work-around provided by A List Apart.
• Keep in constant communication with your designer. If you’re confused, ask now so you don’t have to fix anything later.