Responsive vs. Adaptive Sites: What's the Difference?

Moving through your website, whether it’s on a tablet or desktop, should be as smooth as floatin' on a cloud. Ensuring that the user experience (UX) on your site is pleasant and seamless is just as important as the content you put on it. Responsive and adaptive are two concepts that are crucial in web design. It can be difficult to differentiate between the two, as they are often conflated and confused together to mean make my site look good on all the devices. While it's true that responsive and adaptive design techniques have that goal in common, the two concepts go about it in different ways. 

What is Responsive Web Design? One-size-fits-all Design

Ethan Marcotte, a web designer, coined the term responsive web design in 2010 to describe new technique. He defined fluid grids, media queries (also known as breakpoints), and flexible media as the three technical design ingredients that makeup the framework for responsive design. In lay terms, responsive is a site designed to resize itself to maintain aesthetic consistency on any screen size. It simply responds to the adjustments in the browser’s width and modifies the arrangement of your designs to fit. Those development principles (or ingredients) are essential to make content viewing easier for the user. With responsive design, you can expect an easier and less-complicated implementation process. Since it uses one URL for all the devices, it is SEO-friendly, and, here's a big one: Responsive design is Google’s recommended design pattern.

Drawbacks:

In responsive design, you don’t have much control over how the design appears on specific screen sizes. The flow from device to device can cause problems for any ads or images. Those media elements that fit great on the desktop may not fit on a mobile screen. Another problem is the difference in load times: a large design loads faster on a home or office computer but will take more time to come through on a mobile device.

What is Adaptive Web Design? Tailor-made Design

Adaptive design doesn’t flow from desktop design to mobile screen—it takes on a more tailor-made approach. The website recognizes what space is available then selects the layout most suitable for the screen. Web designers create different versions of the site specifically for different devices based on the screen size and resolution. There are fixed layout sizes for adaptive design, but of those the most common screen widths are: 320, 480, 760, 960, 1200, and 1600 pixels. With adaptive design you can also optimize your images and ads for each interface your users are viewing. Businesses that use adaptive web design tend to have noticeably different views between desktop and mobile versions. That’s because a different layout was selected to make user’s experience better rather than leaving it up to the design to rearrange itself. The driving principle is that people's expectations and behavior differs from device-to-device; therefore, so should the content that we're displaying to them and the actions we're asking them to take. What you can expect in comparison to responsive design is a faster load time and a more relevant experience.

Drawbacks:

Adaptive design can be complex when it comes creation. The more complex it is, the more time (and money) it takes to actually create. The second, and probably most important, is that adaptive takes a backseat to responsive in terms of SEO.

So what? Which is better?

There are notable differences between the two, but which is better is totally up to you. Responsive is simpler in terms of choice and provides an experience that is seamless between devices (and improves SEO). Adaptive is efficient in page load (regardless of device), allows you to tailor your design to any device its viewed on, and could give you the ability to reach more mobile users. To be honest, you don't always have to choose between the two, as skilled web developers (like InVerve's web team) can incorporate elements of both: many of the websites we build are responsive with adaptive logic.

The most important thing is understanding what these terms mean so that you can collaborate with your developer to build the perfect site for your business.