So you’ve just signed a client that's commissioned you to create a new website. Of course, it's not as simple as desktop these days. So one of your first challenges will be figuring out how to make your design seamless on any screen. That's where choosing between a responsive and adaptive design approach comes in.
Both methods help make the site look and act excellent across different viewports, yet there are significant differences in their workflow—and even end results. This article compares responsive vs adaptive design, examines the use cases for each, and shares practical tips on how to design responsive or adaptive websites, so your next project will look great—no matter which screen it’s on.
Responsive vs adaptive design: what we'll cover
What is responsive design?
Responsive web design is a design approach to creating websites that fluidly adjust to fit any browser or screen they’re viewed in. Responsive websites scale to achieve an optimal fit for the available viewport size. When browsing a responsive website (like this one), you can see how it rearranges its design and content based on how you drag the border of the browser window and resize it.
So on desktop, you might see a three-column layout that fully utilizes the horizontal orientation of the screen, and likewise, a proportionate two-column layout on tablet, and one-column layout on mobile. But no matter what device you will use, you’ll see the same content.
Responsive design is a design that responds to any browser or screen its viewed on.
The concept of responsive design was first introduced in 2010, in Ethan Marcotte’s article “Responsive Web Design”. In it, he correctly anticipated a shift in devices that would be used to access the web and, as a result, proposed a new device-centric way of designing websites.The web design community quickly adopted responsive design approach, and today it's one of the most popular approaches for building new websites.
Responsive websites exist in different styles. If you’re creating a responsive website and looking for inspiration, check out these 15 responsive website design examples.
How to design a responsive website
To create a truly responsive website, a designer must specify key breakpoints for device categories (i.e., desktop, tablet, mobile) and then adjust the design to those breakpoints. Breakpoints are also used as a reference when web designers optimize content. They help designers choose correct dimensions for visual assets like images. The browser will then load the master image and adjust it to the user’s specific screen.
You can also resize images using CSS to make them look perfect on different screens and resolutions. These breakpoints can be defined using CSS media queries or using advanced web creation platforms like Editor X.
When web designers create responsive websites, they rely on responsive measuring units (like percent, viewport height and width, and minimum and maximum values) to ensure that their layout can change across browsers and devices. If you’re interested in learning more about implementing responsive design, check the following step-by-step guide on how to make a responsive website.
Benefits and downsides of responsive web design
Responsive design is by far the most common web design approach. Web designers choose a responsive design because it offers a few significant advantages:
1. Easy to create and maintain.
Responsive design can save designers a lot of time because there’s no need to create a separate layout version for a particular breakpoint. Once you define a layout by setting specific breakpoints, you can use it as a foundation for your website and adjust it to different mediums. Design will automatically adjust to the user screen to offer a good experience.
2. Responsive design accommodates all possible types of screens.
Responsive websites utilize the screen space the viewport offers to arrange content. In responsive design, the layout, sizing and measuring units of UI elements are fluid and relative to the viewer, helping to create a design that seamlessly adjusts to any viewport. As a result, web design is relative to the screen dimensions.
3. Responsive design is better for search engine optimization (SEO).
Responsive design allows a website to show the same content for all devices. Technologies like Flexbox, a CSS web layout model, can auto-stack and wrap the content in containers automatically to prevent content from overlapping and thereby offer users the best possible browsing experience.
However, responsive design has a few downsides too:
1. Responsive websites have complex CSS source code.
Since web designers use the same CSS codebase for all types of devices, the codebase for a responsive website can easily become super complex. That makes it challenging to introduce new CSS styles or modify existing styles without breaking the logic.
2. Longer loading time.
Loading time is a critical metric in web design. The best practice is pretty obvious—provide the best browsing experience by making the loading time as short as possible. But, this can be surprisingly challenging for responsive sites.
When the browser renders a responsive page, it loads all source codebase and, after that, matches the rules applicable for the viewport using the media query. And since the browser has to load all source code, it can negatively impact the loading time. This problem can be particularly noticeable on mobile devices that are generally less powerful than desktop computers.
3. Content needs to be optimized for different screen sizes.
Poor content optimization is not the problem of a responsive design per sé, but rather the content. Designers often start with large viewports such as desktops and then try to scale the design to mobile. At the end of the day, this can cause a bad mobile experience since the content was originally designed for a large viewport.
For example, you will see a desktop website that was shrunk to the size of a mobile screen. To avoid this issue in the first place, web designers should practice mobile first design. Designers should start with the small screens first and then move toward the larger screen sizes.
What is adaptive design?
As the name suggests, adaptive design is a design that adapts to a viewport. With adaptive design, a website snaps into place using static designs that match the current width of the browser.
Aaron Gustafson introduced the concept of adaptive web design in 2011 in his book Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement. His goal was to teach designers and developers how to create truly accessible, usable, and future-proof websites. However, due to the complexity of the adaptive design approach, only a small fraction of websites created today are adaptive.
How to design an adaptive website
Unlike responsive design, which uses a single website design that rearranges its content to fit each new viewport best, adaptive design uses a different version of a website for each device. This is accomplished by developing a selection of fixed layouts for the most common browser breakpoints: 320, 480, 760, 960, 1200, and 1600 pixels.
In contrast to responsive design, which uses breakpoints to define categories of devices (i.e., desktop, tablet, mobile), in adaptive design, web developers create a tailor-made layout for each of the selected breakpoints. When someone visits an adaptive site, it will choose the corresponding layout from the ones created.
As a result, an adaptive site realistically ends up with 6 different versions of the site: 320 px, 480 px, 760 px, 960 px, 1200 px, and 1600 px. When you open an adaptive site on a desktop and drag the browser window, you will see that the layout stays the same.
Benefits and downsides of adaptive design
The significant benefit of adaptive design is that it allows the creation of a tailored experience for a particular viewport. It can be valuable when you design for a specific screen size and resolution. If you have a static end use, adaptive design requires less code and can therefore be easier to create. For example, adaptive design can be a good option when you create an interactive kiosk for a cafe.
But if you design a website that will be browsed on all possible types of devices, it's better to avoid adaptive design. It has too many downsides: