A hot topic in web developer circles over the past couple of years has been a question of superiority – Responsive Web Design or Adaptive? It is of course not a new debate; yet it has certainly taken on more significance recently with the popularity surge of Smartphones, tablets and similar devices. It is becoming critical for developers to address the requirements of their users across a wide spectrum of multiplying gadgets, gadgets that don’t necessarily get along with each other. Responsive Web Design (RWD) and Adaptive Web Design (AWD) are both solutions to this conundrum that essentially provide the same end; the seamless transference of websites to mobile devices. But why then is the distinction important, and which is winning the war?
First, we’ll run through the subtle differences between the two. For RWD, the clue is in the title. It is essentially a fluid system that responds on the go, allowing the website to adapt its interface to suit the device, viewing agent or environment. A prime example of RWD at its most practical is in the use of online slot machines. Responsive slot machine websites rely on RWD to provide flexible and fluid grids, giving their visitors the optimum experience on any device they choose. A responsive design opens up a whole load of options that allow layouts (complete with colours, images, fonts etc.) to change based on screen size.
With AWD, while the intent is the same, there is a key distinction. AWD works to a predefined set of screen and device sizes, or to phrase it another way, static layouts working to certain breakpoints. While it will still adapt, it can only do so within the confines of its predetermined instructions. Once it’s loaded onto a particular device, that’s it. A particular advantage of AWD is that it allows developers to adapt to customer intent. A user may look to a mobile version of a particular website to accomplish different things than they would on the desktop version of the same site. A good example of this would be airline websites, where the mobile version is geared towards specific actions a mobile user is more likely to take, such as checking in or searching flights.
So why does it matter, if ultimately, both approaches make a website look good on a small screen? The answer comes down to user/customer intent. The sleek RWD is the optimum choice for websites packed with content that don’t differ in the services they provide across the wide spectrum of devices. AWD on the other hand, excels in cases where desktop and mobile performance and expectation differ.
While both have different merits, which one is right for you is most certainly a question of putting your users’ needs first, and asking what kind of experience you want to deliver to your audience.