You know your website needs to be responsive... but what, exactly, does it mean? You’ve also heard about adaptive web design, but how does it differ from responsive design, if at all? It’s an important distinction, and one every B2B website owner needs to know about to navigate today’s competitive online space with confidence. This article reveals everything about what is responsive web design and what is adaptive web design, the key differences between responsive and adaptive design, and the similarities. As highly experienced web development Oxford experts, we’re familiar with both. By the end of this article you'll know what they are, why they matter, and how the two improve the user experience across every device and screen size.
What is Responsive Web Design?
Roll back time to 2010, when smartphones were still in their infancy. That’s when the web designer Ethan Marcotte coined the phrase Responsive Web Design in his book of the same name. Then, on 24th January 2012, the first Android phone was released by Google and the rest, as they say, is history.
Responsive Web Design describes the techniques used to develop a single website that looks good whatever size or type of screen it’s viewed on, from a desktop to a mobile and everything in between. It makes perfect sense when web content needs to be accessible to every user, regardless of the devices and browsers they use.
Responsive web design or RWD is an approach to web development that creates dynamic changes to the appearance of a site depending on the screen size and the orientation of the device being used to view it. It’s a fluid process, adapting to the size of the screen no matter what the target device. It’s an essential approach in a world where Google’s search algorithm puts mobile first and most people use portable devices to access the internet. It lets websites and pages render - or display – on all possible devices and screen sizes, automatically adapting to the screen whether it’s a desktop, laptop, tablet, smartphone, or even a smart TV.
How does it work? Responsive design uses Cascading Style Sheets or CSS to create a variety of settings to serve up different style properties depending on the device’s screen size, orientation, resolution, colour capability, and other characteristics. As a result whoever looks at your pages, whatever device they use, will enjoy an excellent experience with all the right bells and whistles. They’ll be able to find what they need, read everything with ease, enquire, buy and more, even if their screen is miniscule.
What is Adaptive Web Design?
Adaptive Web Design is different. It was introduced in 2011 by another web designer, this time Aaron Gustafson, in his book, Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement. Also called the ‘progressive enhancement’ of a website, it focuses on multiple fixed design layout sizes so when the system detects the browser size, it’ll select the layout most appropriate for the screen.
While adaptive design is similar to responsive design, which also adapts to different screen sizes, the difference is an important one: the content follows a fixed layout size in adaptive design, while it moves dynamically in responsive design. It’s perfectly normal, for example, for an adaptive site developer to create six separate designs for the six most common screen widths; namely 320, 480, 760, 960, 1200, and 1600 pixels.
So adaptive web design involves creating different website layouts for each specific device, and responsive web design means creating one website layout that responds and changes based on a range of screen sizes.
Next, let’s dive deeper into the key differences.
Key Differences between Responsive and Adaptive Web Design
What are the primary differences between RWD and AWD? For a start, RWD will dynamically change the layout pattern of a page to fit the available screen space and articulation, whereas AWD uses multiple fixed layout sizes – the website detects the available space then chooses the right layout to reveal on the screen.
As you can probably imagine RWD tends to be easier, and requires less work to implement the site design than adaptive design. On the other hand there’s less control over how the design will render on each screen size.
Which is the most popular? These days responsive web design is often the best solution, described by many as the ‘one size fits all’ approach. Responsive screens simply ‘flow’ from the desktop to the smaller mobile screen size with no discernable gap and no delays. On the other hand, things can get tricky when download times can vary between mobile devices and desktop. You might find a complex design full of lovely big image files works beautifully on a desktop machine but can take longer to load, with less than optimal results, on a mobile device – which can put your mobile users off and send them away to a better-looking and more usable competitor’s site instead.
Adaptive Web Design overcomes this limitation by serving up the most appropriate design based on the detected user agent or screen size. It means visitors using small, mobile devices with little screens see a site specially designed for the screen size, optimised to work perfectly. Desktop users get the full size version, users with every size of smaller screen get the best possible experience. AWD builds from the lowest resolution design to the highest. And while RWD is considered a more desktop oriented approach, AWD is often seen as more relevant to the modern user experience, in an online landscape where mobile devices are naturally a priority.
Both approaches are intended to deal with the multitude of devices and software used to consume web content. But AWD sites are often two to three times faster, which has a noticeable impact on users. You probably know it yourself. All it takes is the smallest delay and you start to feel frustrated. You need seamless loading without delays. There’s more. Because adaptive design requires a lot more work than responsive, and time means money, it’s also worth taking the relative costs into account.
Do the two ever meet? Yes, they do, and it’s called HRWD - Hybrid Responsive Website Design, which harnesses the best of RWD and AWD to improve the user experience across all devices and screens.
Excellent Examples of Responsive and Adaptive Web Design
Now let’s explore some examples. First, Quickbooks. The Quickbooks website is fully responsive, changing and flexing to suit the device you’re using to view it. Whatever the screen size or shape you get an experience that delivers everything you need. You can explore the services, find out about the company, enquire, know the pricing, and sign in. The same goes for theHarvard Business Review and Shopify websites, both of which render beautifully whatever the device. The desktop version sits within the screen perfectly, with clear navigation and relevant content. You get the same excellent, comprehensive user experience whether you’re using your tablet on a train, you are on your phone in the street, or sitting in front of a big screen at your desk.
Next, some representative adaptive web design examples. The airline Lufthansa, plus Amazon and Apple are all designed adaptively to display perfectly on all six screen sizes. So behind the scenes there are six completely different designs for each site, each of which works optimally on the screen it is specially designed to fit.
With responsive design, you drive how the content reacts. With adaptive design, you determine the end result as well. Whichever you choose, you’ll create a smooth, seamless experience for both smartphone and desktop users. And because Google is all about serving up quality search results to users, it will ultimately help improve your search engine rankings.
Whichever design approach you use to make your website work perfectly whatever the device, your users won’t notice. It’ll be working invisibly in the background to deliver something readable, usable, practical, and enjoyable.
Now you know all about adaptive versus responsive web design
When a competing business’s website works better than yours, they win. In our highly competitive digital world, where there’s only room for a handful of sites on page one of the search results, it’s essential to be the best you possibly can be every step of the way. And making sure your site ticks all the user boxes whatever device they’re consuming your content on is crucial to every business regardless of the devices people use to access web content.
Now you know about responsive vs adaptive web design, you’re in a position of knowledge... and that means you have power. If you’d like to ensure you’re ticking all the boxes every step of the consumer journey, let’s talk. Our beautiful websites check every responsive box, and we even provide top class Umbraco hosting.
Get in touch with our web design Oxford professionals by phone, email, or our contact form, and we’ll get right back to you.