Adaptive Web Design Vs. Responsive Web Design: What Are the Differences?

By Jeremy Girard

Mar 2, 2014      

Adaptive web design and responsive web design are two website design approaches that are often confused, but harbor very distinct and important differences. Understanding these differences will help you decide which approach best fits your projects, meets your needs as a designer, satisfies your clients’ exacting demands, and provides maximum usability for the site audience.

Let’s start by defining each of these approaches to see what makes them different -- and what they have in common.

What Is Responsive Web Design

Responsive web design, or RWD, is an approach where a website is built to fluidly change its layout to fit any screen size or device with a layout suited to that device. From large desktop displays down to small, handheld phones and everything in-between, websites built with a responsive approach are made to support all screen sizes. These websites react the way that liquid does when poured into a container – its width expanding or contracting to fit the available space. This is what a responsive website does: its layout expands and contracts while the various elements of the page change their look and placement as needed to display properly on the current screen size.

What Is Adaptive Web Design?

Adaptive web design, or AWD, is an approach where a website is built for a predetermined set of screen sizes and devices, using a predefined set of layout designs. Adaptive websites use “breakpoints” where the design changes – and you, the designer, control how it changes. Elements will be located where you want them to be, instead of presenting unexpected surprises as the site reflows its layout. You determine how the site looks for large desktop screens, tablet devices, small screens on mobile phones, etc.

What Do These Approaches Have In Common?

As mentioned above, both responsive web design and adaptive web design are focused on delivering the best possible user experience to the widest possible audience. Instead of trying to deliver one website to all devices and screen sizes, both of these approaches aim to change that website’s look and experience for different devices and their widely different screen sizes. This is a vitally important part of designing websites today.

The days of visitors coming to websites only using desktop computers with giant screens are long gone. On today’s web, people use an ever-growing range of devices with a diverse set of screen sizes. From those aforementioned desktop screens, to laptops, to netbooks, to large tablets, to smaller tablets, to phones with screens so big that they resemble tablets more than phones, to much smaller phones, to the exciting new range of wearable technology devices like smartwatches that are hitting the market now – the device landscape is more diverse than ever, and that is unlikely to change anytime soon. If you want to communicate with people on today’s web, you need to account for this variety of screen sizes, and delivering a website that was designed for desktops screens to all these other devices is not the answer. This is where responsive and adaptive web design come to the rescue. By using these approaches to deliver designs and experiences optimized for different screens, you embrace this diverse new multi-screen world.

So how do you know which of these approaches – responsive web design or adaptive web design – is right for you? Let’s now look at some of the differences between RWD and AWD, specifically the pros and cons of each approach.

The Pros and Cons of Responsive Web Design.

Responsive web design is the best way to support every possible screen size and browser resolution, including those we know about today and those that may come out tomorrow on devices not yet on the market. Because of the truly “fluid” layout of responsive web design, your site will scale accordingly for all those sizes and deliver a layout suited to each – at least that is the promise of responsive web design. In reality, this fluid layout isn’t always a perfect solution from a visual presentation perspective. In other words, a “one size fits all solution” doesn’t always fit every instance perfectly.

Yes, websites built with a responsive approach do respond to all sizes and reflow their layout accordingly, but sometimes the layout that is presented looks a bit… well, off. This is one of the issues or “cons” with responsive web design. While the widest-screen look of the site may be great, as it scales down to smaller screens, plenty of points will make the layout look very strained as the design quickly breaks down. While it is true that few people may ever see the site at some of these oddball sizes, you have to play both sides of the argument here. If responsive web design is championed as able to support all screen sizes, including the oddball sizes, you must also acknowledge that, at some of those oddball sizes, the look that the website has will be less than optimal.

From a designer’s perspective, this can be very hard to accept. The Pixel Perfection that many designers strive for with their designs is all but impossible to achieve with a traditional responsive design approach, because you, as the designer, are not in control of every possible layout that the site will display: the fluidity of a responsively built website fills in gaps between major devices sizes. It is often in these gaps that the design’s look breaks down and becomes strained. For many designers, this sore point needs to be addressed before they consider responsive web design a viable solution from a visual perspective.

In addition to the design concerns listed above, responsive website also typically require more code to implement, largely because of the CSS media queries that are required to “reflow” the layout for different browser sizes.  Fully responsive designs can also be quite difficult to accurately test since no one can realistically be expected to have every possible device and screen size at their disposal for testing purposes. Online emulators can mimic different devices, but they are not a perfect solution. Experimenting on these emulators may be acceptable during development testing, but you will likely want to use actual devices prior to a site’s launch. Unless you have a robust device testing lab at your disposal, you are likely launching responsive sites into the world without testing them on a comprehensive cross-section of actual devices.

The Pros and Cons of Adaptive Web Design.

Where responsive design fails, adaptive design tends to excel. Because adaptive websites focus on predetermined devices and screen sizes, designers have pixel perfect control over how the site will display at those sizes.

With adaptive design, a website will typically feature a number of logical “breakpoints.” These are the points where your design shifts and changes to support a different screen size, but instead of having an automated fluid layout between these breakpoints, the designer can control each of the various looks that the site will deliver. These looks often match popular device categories and sizes, like widescreen desktops, tablet devices, Android phones, iPhones, etc. For each of these different sizes, you can create a layout that you decide works best, as opposed to a fluid layout that is largely at the mercy of the browser. If you are hoping for Pixel-Perfect Responsive Design, an adaptive approach, with pre-selected breakpoints and corresponding design, is the way to achieve that goal.

Adaptive websites will use CSS to assist the site to detect various devices and screen sizes. Device detection can be a helpful tool in delivering the right look to the right device.  If the code detects that a visitor is using a widescreen desktop computer to visit the site, it can deliver the appropriate layout to that user, one optimized for his/her screen and designed deliberately by the designer for the screen format. If another visitor is using a tablet device, the site’s script can detect that too, delivering a slightly revised version of the site that, once again, has been carefully laid out by the site’s designer. The site will detect the device/screen size and “adapt” by rendering the right layout, selected from a series of predetermined options, for that user’s screen. This all happens in the browser, without needing round-trips back to the server which would impede performance.

Now, how about the downsides of adaptive web design? Well, just like I said that where responsive fails, adaptive excels, the inverse also holds true. While responsive is great because you know that your site will fluidly fill in the gaps between important device sizes (those aforementioned oddball sizes, for instance), an adaptive website will not do that. This, however, may not be a big deal. Yes, it is nice to have a website that will scale for new devices and screen sizes of the future, but many new devices will use the same screen sizes and resolutions that are out today – which means that an adaptive site that looks great on these resolutions today will look great on future devices tomorrow. If some radical new device classification comes into the market tomorrow, you will be able to add a new breakpoint to address that device. Again, if you want Pixel-Perfect Responsive Design across a wide range of devices and screen sizes, this is the way that you are going to get it.

Conclusion.

Like most situations on the web, there is no perfect solution for every single circumstance. Different techniques fit well in different instances. Personally, I like the way that responsive web designs fluidly changes the layout to fit every screen size, but the designer in me absolutely cringes at certain “looks” that the site displays during these surprising new layouts. You can address this by adding more CSS to try to handle more of these unfortunate breakdowns, but it is impossible to catch them all, so I have come to accept that lack of pixel perfection in my own work – but what works for me does not work for everyone!

If pixel perfection is at the top of your list of concerns for a website’s design, but you still want to support a wide range of devices and screen sizes, then an adaptive approach may best fit for your needs. While the fluid design and surprising layouts of responsive web design may work well for developers, the deliberate, Pixel-Perfect layouts of adaptive web design are more in tune with what designers want out of the websites they create. With this adaptive web design approach, you can have the best of both world with both device optimization and design integrity – that aforementioned Pixel-Perfect Responsive Design.

At the end of the day, whether you decide to go with a responsive website design or an adaptive website, remember the goal of the solution from the beginning – to deliver the best possible user experience to the widest possible audience. As the designer and web professional hired for this project, you must determine which of these approaches will best fit your particular projects and needs.

Comment

Blog  /  Web Design 

Brought to You by Webydo.

See how Webydo fits into your design workflow and business.