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

 
responsive-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

 
One of the main distinctions of Adaptive Web Design (AWD) that differs from Responsive is that AWD relies on predefined screens and takes a more streamlined, layered approach that utilizes scripting to help adapt to various screen sizes. By using a predefined set of layout sizes based on device screen size along with CSS and JavaScript, the AWD approach adapts to the detected device.

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.