The differences between an adaptive and a responsive design approach are crucial things to consider when designing a web page or an app. Choosing which way to go based on a thorough understanding of each option empowers you to plan and execute your design with greater precision and purpose, leading to better results.

With how pervasive and diverse mobile devices are these days, designers are forced to cater to a wider variety of screen sizes than ever. Every web or app designer is currently facing this challenge and there’s no way around it.

There are numerous ways that we can access information online nowadays, so designers are tasked with bridging the gap between devices. To do this, there are two options for a design: adaptive and responsive.

There is some confusion around the two terms as to how exactly they are different from one another, but there are in fact some very clear differences which we will explore in this article.

Responsive design

Ethan Marcotte, a web designer and developer, first coined the term “responsive design” in his book, ‘Responsive Web Design’.

These types of designs are called “responsive” because they respond to the browser’s changes in width, adjusting and rearranging design elements to fit in the space available to them.

A responsive website shows users content based on the space available to the browser. If you open a responsive website on a desktop and change the browser window’s width, the website’s content will shift and resize itself dynamically for an optimal user experience. This process is automatic on mobile devices; the website checks to see what available space it has and appears in the ideal arrangement for that device.

Responsive design is fairly straightforward and because it is fluid, users can access responsive websites on any device and know that they are getting the full experience and not missing out on anything, regardless of whether they are viewing the site on a large monitor or on a handheld device.

For this to be true, however, responsive design means that designers need to have a very good conceptualization of the website and a good understanding of their users’ needs and wants.

Adaptive design

Aaron Gustafson first introduced adaptive web design in his 2011 book titled ‘Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement’. It is also known as progressively enhancing a website.

While responsive designs rely on dynamically arranging elements to fit the amount of available real estate, adaptive designs work by having several fixed layout sizes. When a website detects the space available to it, it chooses one of its layouts which is most appropriate for that space.

Opening an adaptive website on a desktop means the website chooses the best layout for that screen size. If you resize the browser window, the layout does not dynamically change, but simply “jumps” between layouts when it reaches certain thresholds.

For example, if you open an adaptive website on a 1920px wide monitor, you will see the layout most appropriate for that width. If you begin to make the browser window smaller, at some point, for example 1400px, the layout will suddenly switch to something more appropriate for that smaller width.

Many websites have been quick to adopt adaptive designs, becoming mobile-optimized sites, or mobile-friendly. It’s important to remember that the layout you see on a mobile website which is designed to be adaptive may be different from what you see when accessing it on a desktop. That is a conscious choice made by designers to present different layouts on phone screens instead of relying on the websites to try and rearrange themselves based on their available space.

The most common screen widths to design for in adaptive design are as follows:

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

While adaptive design initially meant simply designing an additional, separate page optimized for mobile devices, typically found under an “m.” prefix, this is no longer common practice. Instead, server-side scripting dynamically decides which version of the same static page to serve users. This eliminates many initial issues and allows designers to work on even more layouts since they are not all separate pages with their own URLs but rather variants of the same page.

Standalone mobile design

There is a third option, however, and that is designing a second, mobile-only version of your website. These are usually denoted in their URLs by a “m.” prefix.

This used to be a great approach to mobile design. Designers created websites tailor-made for mobile devices, tweaking elements and layouts for that specific format. Search engines like Google even delivered rankings to mobile sites, but for a while now, the same preferences are given to responsive and adaptive websites.

The main downside to this approach over using multiple layouts or a dynamic design is that this requires much more maintenance in order to maintain parity between the mobile website and the desktop version. As such, this approach to design has fallen out of favor for quite some time now and it is safe to say that almost no one does this anymore, and neither should you.

Responsive or adaptive design?

Responsive design is typically easier and faster to implement. It doesn’t give as much control over your design on each screen size, but as of right now, it is the preferred and most popular method for designing new websites. This may also be somewhat due to the large amount of free or cheap templates available on most Content Management Systems (CMS) like WordPress, Joomla, and more.

Responsive designers create a single design which will be used on all screen sizes and typically begin somewhere in the middle, using media queries to decide what adjustments need to be made for the lower end and higher end of the resolution scale. This is especially pleasing to users, as the design they are familiar with is guaranteed to translate across any device they use. Consistency and familiarity are particularly important to providing people a good user experience.

One important thing to keep in mind when designing responsively is your project’s visual hierarchy. You need to try and maintain it as your elements rearrange themselves around the page. This involves a lot of testing on multiple devices to ensure that you are accurately presenting your website. The simple your site’s design is the less work it will need to ensure it translates well across devices.

Another great argument for responsive design is search engine optimization (SEO). Given that most web traffic today comes from mobile devices, search engines favor responsive websites much more than those which are not mobile-friendly.

While responsive design seem to have a strong case going for it, there are a few things you should bear in mind:

  • because your site will “flow” from one device to another, based on screen size, the advertisements you’ve placed on it may not fit into the limited space on mobile devices. This will require additional tinkering to ensure all your visitors see the advertisements you’ve placed on the website.
  • since mobile devices often used different and slower connections to the internet, download speeds will vary. Large designs that render quickly on desktop devices will likely take more time to appear on mobile devices. As such, certain mobile optimizations will be required to ensure that mobile users have a pleasant experience when visiting your website and don’t get frustrated with slow loading times.

Adaptive design theoretically ensures that the user gets the best experience regardless of which device they are using. As opposed to responsive designs which “flow” from large screens to smaller ones, adaptive designs means that each screen is showing a tailor-made experience.

As the name suggests, these designs adapt to each user’s circumstances. Designers, for example, can show that they have taken every circumstance into consideration and make designs more touch friendly on mobile devices by increasing font sizes and buttons, for example.

The same can be done for desktop users as well, beginning at the lowest resolution and moving up to the highest one. While I mentioned the six current standard resolutions above, depending on your specific case and your users, you may get away with using fewer designs.

One strength of adaptive design is that it feels more relevant to modern user experiences, as opposed to responsive designs which seem to focus more on desktops while other devices take a secondary place. As mentioned earlier, however, most web traffic nowadays comes from mobile devices. People use their mobile devices whenever they are out and about to go online and often even at home because of the convenience they bring to the table.

We also like to feel that our devices are aware of our circumstances and are going through the same things as we are. Take, for example, a scenario where you’re driving guided by your phone’s GPS and you enter a long tunnel. Isn’t it nice when your phone adapts to its environment, detecting that there is less light inside the car and adjusting its screen brightness accordingly? This type of context-based usability is reassuring and confirms that your smart device is in fact smart enough to understand your circumstances and adapt for the best experience.

Adaptive design also allows you to optimize advertisements for each user interface. Because you’re designing for different resolutions, you can satisfy users’ specific needs. For example, the sophistication of a smartphone allows us to know more about our users than ever before. Each person has an advertising profile based on multiple things, such as the places they frequent, the websites they visit, the things they search for, and so on. Using these advertising profiles, designers have the ability to craft finely tuned ads that are more relevant to users than ever before.

Research also shows that companies with adaptive websites also outperform those with responsive websites when it comes to speed tests, often by 2 or 3 times, which is significant, especially considering how important website loading speeds are nowadays.

While adaptive design does have a lot of strengths and advantages over responsive design, you always need to take time and consider who your target audience is and what their needs are to provide them with the best possible user experience.

Adaptive design also has its drawbacks. For one, it requires a lot more work than responsive design does and that is why adaptive design is typically used to retrofit existing websites so that they can be successfully used on multiple devices.

Secondly, if you don’t design for enough screen sizes, adaptive design may leave out some users who are “in the middle” – those using tablets, for example. In these cases, it’s best to give users the possibility of switching between versions of your website, like mobile and desktop.

While responsive design is clearly the preferred and most popular method at the moment, don’t rule out adaptive design if you have the time and budget for such an endeavor.

Summing up

Modern web design gives us three options for designing our websites: responsive, adaptive, and standalone. While standalone design is no longer used anymore and I absolutely do not recommend it, I am mentioning it just for the sake of being thorough. It is an option, just not one you should choose.

Responsive design essentially allows designers to show users content based on the browsed space available. This means there is consistency between what users see on desktops versus what they see on mobile devices. While it is the most popular and widely used approach, let’s looks at some pros and cons to choosing a responsive design.

Pros:

  • seamless, consistent, good user experience
  • myriad of templates available
  • good for SEO
  • easy to implement

Cons:

  • less granular control over design elements
  • elements can shift in inappropriate or unwanted ways
  • potential issues with advertisements
  • longer load times on mobile devices

Adaptive design is a good alternative to the way responsive design works by stretching or squeezing a single design to fit multiple screen sizes. It is somewhat a more involved approach in that designers have several fixed layout sizes that hey have to individually design.

Pros:

  • offers the possibility of building the best possible UX for multiple devices
  • better and more deliberate mobile optimizations
  • advertisement optimizations

Cons:

  • requires more work
  • if not enough screen sizes are accounted for, some devices like tablets may display mobile or desktop variants which are not suitable

Choosing between responsive and adaptive designs should be done with careful consideration. While responsive design may be quicker and cheaper to implement, adaptive design may provide a better user experience across multiple devices.

It’s worth noting, however, that responsive design and adaptive design are not actually mutually exclusive. Many websites are designed using a combination of the two for the most universally readable websites which support a complete spectrum of hardware and software. It is essentially a “best of both worlds” approach.

Before making a decision, be sure to also look at your user data to see how people are accessing your website and what devices they are using. Consider their wants and their needs and choose the option that will result in the best UX for your specific audience.

Additional resources: