Responsive vs. Adaptive Web Design
Kenneth Wisnefski, April 8, 2015
Technology is constantly evolving, and so web developers often debate which web design method will better suit the needs of internet users. As more people gravitate towards the latest gadgets like tablets, mobile devices, smart watches and other techy gear that use screens of various sizes, web design has to meet the challenges that those differing screen sizes present. As a site owner, you want your web-site to look good on everything from the smart watch on your wrist to the web-enabled screen on your refrigerator door, so before choosing a web design method, let’s take a look at 2 of the most preferred design methods among web developers and hopefully help you to make a choice.
The two most popular design methods are Responsive Web Design (RWD) and Adaptive Web Design (AWD). Both methods seek to accomplish the same goal – displaying websites on multiple devices. But which is better?
Responsive Web Design (RWD)
RWD is primarily driven by a set of rules based on specific screen size and percentages. It utilizes fluid grids to create a flexible website foundation where images, type, video and other content can adapt the layout to the web-enabled screen. Additional RWD rules include how things align from left to right, the specific height elements and certain styles that will carry over from one screen to the next.
A website’s foundation designed with RWD methods remains flexible and can dynamically adjust to the viewing screen with using a predefined set of rules. For instance, a certain element may take up 30% of the screen but on a different device it could be scaled to 20% and on another it could be scaled to 50%. This can be tested by resizing a website in your browser and seeing the elements shrink, grow and reposition.
Adaptive Web Design (AWD)
When using AWD, the design focuses on the user rather than the browser/screen. Instead of the layout being predefined by rules like in RWD, AWD adjusts to the detected web-enabled device. While the principals are the same, AWD is more rigid in presentation because it relies on breakpoints to essentially serve as a trigger which will display an alternative website layout. These triggers are the devices with varying screen sizes that are being used to view on.
Like the test mentioned above where the RWD layout shrinks and grows based on percentages, the resizing of an AWD is different. You may not notice a difference until you hit a certain trigger, at which point a new adjusted layout is presented and the layout will continue to alternate if you reach another breakpoint.
With both methods on the table, the argument lies within the AWD breakpoints, because site administrators are able to custom-tailor a layout that is specific for users on their respective devices instead of relying on the RWDs' set of predetermined rules to decide what is displayed.
While the AWDs' custom-tailored layout may be ideal when it comes to the user being first, we prefer and recommend Responsive Web Design. This is due to the benefit of the dynamic flexibility that can take into account devices and screen sizes that don't yet exist. This becomes an important factor when you consider wearable tech that has been piquing consumer interest more and more, e.g., Apple's iWatch. In technical practice, a responsive site should be 95% compliant and compatible with the new screen size. It could require a few additional rules but it's much more effective and efficient than building a brand new interface for that size device.