Until I joined Velocity Partners, all of my work centered on responsive web design, with the goal of building web sites that worked on every device and at every screen size. From my very first client engagement at VP, however, I had the opportunity to work with a different approach: adaptive web design.
At first, I felt like I had gone back in time five years. I had gotten so used to working with media queries or building for mobile first that those design patterns were my de facto method of building websites. There is more than one way to build a site, though, and I’d like to share a little of my experience working with each of these approaches. Let’s start with a quick introduction:
Responsive Web Design
Responsive web design uses fluid grids and media queries to change how the layout looks and display the content based on the size of the viewport. It’s mostly focused on screen width because the layout expands vertically when the available width changes size. It uses a single template for every available device and utilizes client-side detection.
/* Small size */
@media only screen and (min-width:320px) {}
@media only screen and (min-width:480px) {}
/* Medium size */
@media only screen and (min-width:600px) {}
@media only screen and (min-width:800px) {}
@media only screen and (min-width:1024px) {}
/* Look for screen Orientation */
@media only screen and (orientation:landscape) {}
Inside the curly braces on each condition are proper attributes to the layout components, which change the way they look.
Adaptive Web Design
This design pattern has two approaches: Client-side and server-side detection, each of which are designed to identify the user’s device and serve the correct layout, template, stylesheet and scripts for that device. Adaptive web design sends the client only what it needs and nothing more, reducing load time.
Simple example of device detection on the client side using JavaScript:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { // Add some code here. }
Many client-side frameworks provide built-in functions to detect the user device; when they do not, there are many plugins available on the web that you can play with.
Key Differences
Understanding the differences between responsive and adaptive web design can help you select the best design pattern for your project:
Adaptive Web Design |
Responsive Web Design |
| Can use client or server-side techniques to detect the user’s device | Uses client-side media queries to detect the viewport |
| Serves specific content to the client in separate HTML, CSS and JS filesCan use client or server-side techniques to detect the user’s device | Images and fluid grids are adjusted to fit the screen |
| Use if you are confident in device detection | You don’t have to rely on device detection if you don’t trust it |
| Enables maximum optimization of the content | A significant amount of rules have to be written to show/hide/modify the layout according to the screen size |
| Allows for different templates for each device | Uses a single template for every device |
| Serves the scripts after a successful device detection | Renders scripts to every device regardless of compatibility |
| You don’t have to rebuild an existing site from scratch | Existing sites will need to be rebuilt |
| Pages tend to load faster since you are not serving all the content, and the browser does not render/load the content it doesn’t need | Depending on the size of your site, loading times can increase because the browser renders/loads all available content |
| Requires more advanced knowledge of JS | Easier to code and implement |