Responsive Vs. Adaptive

Many people know that more and more people are using their mobile devices to view websites and make online purchases. With the web world around us moving towards mobile and away from desktop viewing, website creators are more focused on user experience now than ever. In an effort to create a smooth and clean website experience, responsive and adaptive web design is becoming overwhelmingly popular.

I have had questions about the differences between responsive and adaptive design. There are some differences which begin with the code used in the design process.

Responsive Web Design (RWD) uses flexible and fluid grids that change layout and respond to fit and fill any screen size or device size. The code behind RWD incorporates CSS3, media queries and percentages instead of pixel sizes. Using flexible images, videos and percentages instead of pixels allow the responsive website to change based on the device and browser size.

Adaptive Web Design (AWD) uses predefined specific device screen sizes to detect the particular device and adapt the output based on those parameters. The code used in AWD is often CSS, JavaScript and HTML. Using AWD is a preference that some designers/developers prefer, however there are some drawbacks to using AWD instead of RWD.

With the increase of mobile devices, there is an increase in device screen sizes. For this reason, using the predefined sizes in the AWD can become overwhelming. Additionally, there may be sizes that are not defined in the code and therefore, leaving the user without the optimum user experience.

Because RWD uses a fluid layout, every device and every screen size will be viewed in the optimum layout to the user. RWD can be more time intensive to code, but the benefits may outweigh the additional coding effort. Each designer/developer has their own preferences when it comes to Responsive vs. Adaptive Web Design. If you are thinking of creating a new website, or transitioning your current site to responsive, check with your web designer/developer to see what their preferred method is. If you have additional questions about the differences, advantages or disadvantages of using Responsive versus Adaptive Web Design, make sure to ask your web designer. Or submit your questions below.