Responsive vs. Adaptive Design: What’s the Difference?

Responsive vs. Adaptive Design: What’s the Difference? was originally published on Springboard.

There was a time when UX designers only had to consider the screen size of desktop computers when designing web layouts. But with the proliferation of smartphones, tablets, laptops, and wearables, and diversity of ways in which people are accessing the internet, designers have had to come up with new strategies to ensure a consistent and functional user experience, regardless of screen size.

This is where adaptive and responsive design comes into play. Both forms of design achieve the same goal—to help designers cater their web designs to different devices—but take different paths to get there.

What Is Responsive Design?

What Is Responsive Design?

First coined in 2010 by Ethan Marcotte, responsive web design, or RWD, describes a website where pages are fluid and adapt to the size of the user’s screen. Responsive websites use CSS media queries to change styles based on the size of the browser window—page elements such as images, text, videos, and links will dynamically shift and optimize themselves for a browser’s height and width, ensuring that a site is usable and has a consistent design regardless of whether a user accesses it on a mobile device, laptop, or desktop.

responsive web design - fluid website layoutsSource: Smashing Magazine

Among the upsides of responsive design is that it’s widely regarded as easier and cheaper to implement because UX designers only need to build one website that will adapt to any number of different devices. For this reason, it’s currently the preferred method for most UX designers. Many content management systems such as WordPress also offer web page templates that enable anyone to cheaply pull off responsive website design.

That said, there are some downsides to websites that use responsive design. Because page elements are constantly shifting and arranging themselves in a fluid layout, and the code for the entire website has to load regardless of browser size, a responsive website can have a longer load time. Download times can also vary depending on the type of device used to access a website because the page would have to scale images to accommodate screen size. And, most importantly, designers have less control over how a page looks when it resizes, which can negatively affect the user experience.

What Is Adaptive Design?

What Is Adaptive Design

Coined in 2011 by designer Aaron Gustafson, adaptive web design, or AWD, describes the design of a webpage for multiple viewports/browser sizes. Where a responsive design is dynamic and will arrange itself to fit any number of screen dimensions, an adaptive site will load static layouts based on different breakpoints.

adaptive web design - fixed website layoutSource: Smashing Magazine

Although there is no limit to the number of viewports designers can cater to, adaptive websites commonly cater to the following dimensions:

  • 1600px
  • 1200px
  • 960px
  • 760px
  • 480px
  • 320px

There are several upsides to adaptive sites. First, they give UX designers full control over how a web page will look because each template and layout has been intentionally built for the designated browser width. This is particularly useful where advertising is concerned because it ensures that images and banners are placed where the designer intended for them to appear. It’s also a useful method for organizations that want to retrofit existing websites so that they can be optimized for mobile phones.

That said, adaptive website design presents a lot of work to UX designers because they have to build so many separate pages; and if a user tries to access a page on unsupported browser size, a site might not correctly format and appear broken.

What Is the Difference Between Responsive vs. Adaptive Design?

Responsive vs Adaptive Design

While both responsive and adaptive design have the same end goal of making web pages accessible, functional, and consistent across devices, their complexity, flexibility, and implementation approaches are different.

A responsive site usually requires less work from UX designers because only one design needs to be created—its layout and appearance changes as it shapeshifts to take the form of a mobile site, a tablet site, or a desktop browser page. Although it is less work on the design front, designers typically work with developers to ensure that the page remains usable as it scales. Responsive design also tends to work better for websites that are designed from the ground up to be responsive.

An adaptive site is more labor-intensive because it requires UX designers to create a new layout for each device that will be used to access a website. Design teams might use analytics to determine which screen dimensions are most popular and design specifically for those layouts, although it is common for adaptive web designers to build six different versions to serve the above-mentioned dimensions. Despite the increased workload, though, the adaptive design gives designers the ability to optimize every version of a page.

Who Should Use Each Approach?

Responsive design is the preferred approach of many UX designers because a responsive site will cater to an infinite number of screen sizes. Responsive sites also perform better in SEO rankings because search engines give preference to mobile-friendly sites. If a website is built from scratch and contains many pages, responsive web design is usually the recommended method.

Adaptive design is ideal for web redesigns and enhancements because they don’t require an overhaul of a website’s code. They also tend to load faster because they only deliver the necessary code to load a page. If users primarily access a website on a certain type of device and the design team feels that it is important to build an experience that is optimized for those dimensions, adaptive design is the recommended approach.

Which Approach Is Easier To Use?

Responsive vs Adaptive Design - Simple content illustration

Both approaches are largely unnoticeable to web visitors unless something goes wrong, such as an adaptive site loading in an unsupported browser size, or a responsive site lagging or having advertisements displayed in the wrong place.

On the backend, response design is widely regarded as the easier approach because it requires designers to do less work. But UX professionals caution against defaulting to what’s easier because the main consideration for any UX designer should always be the user experience—which approach best serves the user?

“Choosing between a responsive and an adaptive design takes careful consideration,” the Interactive Design Foundation writes. “While it might be prudent to stick to a responsive design for the sake of expedience…it’s crucial to check the pros and cons of both designs in full.”

Responsive vs. Adaptive Design: How Do They Score in the Real World?

Responsive and adaptive design is used by many companies, big and small, for websites both simple and complex, and with users accessing websites across an array of different devices. Below are some notable examples of websites from each category.

Responsive Web Design

  1. Slack. Enterprise software company Slack has a website whose flexible grid responds and adapts to an infinite number of screen sizes. The three-column structure of its desktop/laptop web page collapses to a single column when viewed on smaller mobile devices, and its features remain clear, easy to access, and easy to use.
  2. Dropbox. In addition to dynamically responding to the device on which its website is accessed, storage company Dropbox also adjusts font color, background color, and image orientation as users scroll and shift from desktop to mobile dimensions.
  3. Wired. Technology publication Wired makes strong use of flexible images to make sure its articles and layouts are easy to read no matter the device used.

Adaptive Web Design

  1. Apple. Known for being a perfectionist, Apple uses adaptive design for its cleanly designed website. The version of the site that loads depends on the device on which it is being accessed.
  2. Amazon. Amazon has a dedicated mobile shopping app that it encourages users to download, which explains why the organization doesn’t need to invest in a responsive site. The adaptive site also gives users an opportunity to use the full desktop site on mobile, and experience faster load times.  
  3. USA Today. News organization USA Today uses adaptive design to provide a tailored experience to users depending on the device on which they’re accessing the site. Based on the device size and capabilities, the website will serve different news formats.

Ready to switch careers to UI/UX design?

Springboard offers a comprehensive UI/UX design bootcamp, as well as an Introduction to Design course. No design background required—all you need is an eye for good visual design and the ability to empathize with your user. You’ll work on substantial design projects and complete a real-world externship with an industry client. After nine months, you’ll graduate with a UI/UX design mindset and a portfolio to show for it.

This post was written by Tracey Lien.

The post Responsive vs. Adaptive Design: What’s the Difference? appeared first on Springboard Blog.

By Springboard
Bridging the world's skills gap through affordable, high-quality, online education.