In today’s world of unlimited mobile devices, tablets, web enabled screens on appliances, inside of automobiles and so on, it has become a standard for web designers to note that their designs are going to look different depending on what device or browser their user is using. And so, with that being said, two web design methods, Responsive and Adaptive, have emerged that allow the user to have an optimal viewing experience regardless of the device.
While Responsive and Adaptive web design methods both tackle the issues that come with viewing websites on varying devices, there are a few differences between the two that are worth noting.
RESPONSIVE WEB DESIGN
A Responsive Web Design (RWD) is defined as a design that fluidly changes and responds to fit any screen. RWD relies on flexible images and fluid grids that resize with the browser window and adapt very well to all devices. Fluid web sites are built using percentages, rather than absolute proportions, for widths so that it scales up and down fluidly.
In addition to flexible images and fluid grids, the third technical ingredient that RWD uses are media queries. RWD employs media queries to progressively enhance a site within different viewing contexts. By introducing media queries you can target specific device resolutions (tablet, mobile device etc.) and adjust your website’s layout accordingly.
ADAPTIVE WEB DESIGN
Unlike Responsive web sites, Adaptive websites aren’t always built on a fluid grid. This means that while Responsive websites are adaptive, Adaptive websites are not responsive. What an AWD does do, is change to fit a predetermined set of screen and device sizes for an optimal viewing experience.
SO, NOW WHAT?
In short, the key to a responsive website is that it is built on a fluid grid and uses flexible images and media queries, while an adaptive website has set widths, doesn’t use media queries, and appears the same despite the browser size or device it’s viewed on.
The landscape we design for is constantly shifting. And as various devices emerge, it becomes increasingly impossible to tailor designs for each one. To resolve this, we use standards-based technologies in our web designs that make them more flexible and adaptive when rendered. Meaning, we are now designing for the variation of things.