Web design is an ever-changing field that’s always developing new and better methods. If you think back to the 2000s, you probably remember very text-heavy, static websites. At that time, we only thought about creating a site for one screen size because desktop computers were the only type we interacted with.
As technology has advanced, we began to see websites on smaller screens like tablets and smart phones. As technology has gotten more complex, so have the problems with designing for user experience (UX). Responsive and adaptive design are two solutions to these problems.
The quickest and simplest way to differentiate the two is to understand that a responsive site uses a single fluid layout that changes to fit any screen size. Adaptive sites use multiple static designs with breakpoints that signal the appropriate layout for various screen sizes. Now that we have a very simple, overarching view, let’s get into the pros and cons of each approach and how to know which to use for your specific needs.
Adaptive web design is less popular than a responsive design approach, but it can be beneficial for many sites. Adaptive sites use multiple fixed designs that automatically appear on corresponding display screens. So, resizing the browser does not have any impact on the design itself. A design is created for the six most common screen widths, ranging from large desktops to mobile devices. This way, the designer can create specifically for the needs of users that are most likely to use a mobile device over a laptop or vice versa.
Adaptive web design has the potential to look the best since it displays tailor-made designs for multiple screen sizes. The downside is that this usually creates a lot more work for the designer. On the other hand, sites that need specific capabilities for mobile sites (such as hospital sites that need user-friendly appointment schedulers), an adaptive design can feel more intentional since it requires more active planning.
Let’s say a restaurant chooses to use adaptive design for their site. They know that people coming to their site on their mobile device are usually looking at the location of the restaurant or even the menu to see if that is a place they would like to go.
But a user coming to the site on a desktop or a laptop might be looking for more background information since they are more likely to be in the awareness stage. With an adaptive design, you can display different content on the homepage based on the screen the user is on.
A responsive site is built on a flexible grid so that whether the user is on a desktop, tablet, or mobile device, the elements of your site remain constant and line up on that grid. For example, a desktop design is usually on a 12-column grid, a tablet would use 4 to 8 columns, and the phone shows in a single column. As screens decrease in size, the elements stack on top of each other. You can think of it like water taking on the shape of its container.
Designers and developers need to keep the user in mind first and foremost. Considering who your specific users are will give you insight into their habits, including what devices they generally use to look at websites. If you know whether users tend to look at sites like yours when they are commuting and on their mobile device or like to look at content-heavy pages on their desktop, it becomes much easier to decide which method to use.
Time is another thing to consider when choosing your style of the site. On the surface level, adaptive sites require more up-front work since you're technically designing 4–6 different sites. On the other hand, responsive sites are more complex. This leaves more room for performance and display issues, which could result in more work later.
Are you considering a website redesign? Click here to read more about what you should consider during the review process.