Things were simpler before we could get the internet on mobile phones and tablets. Having an online presence meant designing a website that would only need to display on a desktop, and maybe a laptop, computer screen. Now, though, a plethora of screen sizes need to be considered and accommodated, from larger desktop and laptop screens to smaller mobile phone and tablet screens—especially since, if a webpage doesn’t display correctly on a given screen, a user will quickly move on.
There are two approaches to ensuring a website is optimized for mobile, tablet, laptop and PC screens: responsive design and adaptive design. While both are intended to solve the same problem, they use different strategies.
Knowing the difference between these two approaches will help you decide which one makes the most sense for your next UX project.
In this article, we’ll define responsive and adaptive design and then explore the pros and cons of each.
- What is responsive design?
- What is adaptive design?
- The pros and cons of responsive design
- The pros and cons of adaptive design
- Key takeaways
1. What is responsive design?
A website created with responsive design serves up the same site to every device, but that site is fluid and will change its layout and appearance based on the size and orientation of the device.
Developers use CSS to ensure each page of the site can reformat based on the size of the user’s viewport and only need to create one codebase for the site. They use something called breakpoints to tell the site when to adjust to accommodate different screen sizes.
The result? The same site may have a four-column layout on a large desktop computer screen, a three-column layout on a smaller laptop screen, a two-column layout on a tablet screen and a single-column layout on a mobile phone. No matter what device you look at a responsive website on, you’ll find the same basic content and design.
According to Amy Schade of the Nielsen Norman Group, UX designers involved in creating a responsive design will need to work closely with developers to ensure the layout is usable across screen sizes. The user experience will shift along with the page elements, so it’s important for the UX designer to ensure that the site maintains its usability as it reformats. One way to do this is to make sure the most important content is prioritized on different devices, especially at the smallest screen sizes.
2. What is adaptive design?
In adaptive design, a different website layout is created for each device’s screen. As it loads, the site recognizes the size of the screen and serves up the layout that was made for that viewport. In fact, you can create a different user experience for each of six common screen sizes from very small to very large: 320px, 480px, 760px, 960px, 1200px and 1600px.
However, because it would be incredibly time consuming to design a website for six different screen sizes, the work can be limited by referring to user analytics for an existing version of the site to determine the screen sizes on which users access it most. For example, if the analytics show that a majority of users utilize the site on their Apple iPad and their Samsung Galaxy mobile phone, you would design the user experience for those two screen sizes specifically instead of all six possible screen sizes.
3. The pros and cons of responsive design
From the perspective of a UX designer, the greatest advantage of responsive design is that it takes significantly less work than adaptive design—both to create it initially and then to maintain it. In addition, responsive sites will accommodate an infinite number of screen sizes, which is good news considering it seems like devices with new and strange screen sizes are released regularly. Responsive sites also do better in search engine rankings because they’re considered mobile-friendly.
On the other hand, responsive websites require developers to do more coding, and even when a UX designer and a developer work together closely to make sure the layout is usable on as many devices as possible, it’s impossible to control the layout on every single device. As a result, there may be certain devices on which a webpage isn’t arranged to create the best user experience. Furthermore, because the code for the entire website is delivered no matter what device the site is accessed on, a responsive site can be slower to load. This can also compromise the user experience.
Due to its flexibility, responsive design is often the preferred solution for optimizing a website across devices, especially when that site is being created from scratch and consists of a lot of webpages.
4. The pros and cons of adaptive design
For a UX designer, it can be easier to design the various layouts required for an adaptive design because it simply requires creating wireframes for the fixed width of each screen size. That means the UX designer has total control over each layout and can ensure the user experience is optimal for each screen size. As a result, if the UX designer believes it makes sense to include different content for different screen sizes, they can do so.
For example, an adaptive site for a food delivery service might include a home screen for a desktop computer that surfaces restaurant options and different categories of food along with a restaurant location search feature. Meanwhile, the home screen for the same site on a mobile phone might include only the restaurant location search feature.
Adaptive sites are easier for developers to implement, and because they only deliver the code necessary for the given screen size, they tend to load much faster than responsive sites.
That said, adaptive design can be a lot to take on for a UX designer. While it’s possible to limit the work by designing for only two or three of the six common screen sizes, that will mean if users access the site on a device that it wasn’t designed for, the site won’t format correctly. And even if all six screen sizes are designed for, uncommon screen sizes still won’t be covered.
Adaptive design is often best used for a website redesign or enhancement. For example, if a client needs a mobile layout for an existing website that they have no intention of changing, adaptive design may be the best option.
5. Key takeaways
You should now have a basic understanding of what responsive and adaptive design are and the pros and cons of both approaches. As you decide which approach will work best for your next UX project, remember that:
- A responsive design can change its layout and appearance based on the screen size of the device it’s accessed on, from a large desktop computer to a small mobile phone.
- An adaptive design requires the creation of a different layout for each device the website will be accessed on.
- Responsive design often takes less work for a UX designer to create, but they will have to work with the developer to ensure the layout of the site is usable at each possible screen size.
- Adaptive design requires a UX designer to create up to six different versions of a single website for different-sized screens. While this is a lot of work, it enables the UX designer to optimize the user experience for every device these layouts cover.
- Responsive design often works best for bigger sites that are being designed from scratch.
- Adaptive design often works best for smaller sites that are being refreshed.
Now that you know the difference between responsive and adaptive design, you might want to learn more. If so, you’ll find these articles useful: