Dental Marketing Agency
Call (310) 776-6666

What Is The Difference Between Responsive & Adaptive Web Design?

Adaptive Web Design (AWD) essentially utilizes many of the components of progressive enhancement (PE) as a way to define the set of design methods that focus on the user and not the browser. 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.

The three layers of Progressive Enhancement:

  • Content layer = rich semantic HTML markup
  • Presentation layer = CSS and styling
  • Client-side scripting layer = JavaScript or jQuery behaviors

The condensed definition of an adaptive design is that it will change to fit a predetermined set of screen and device sizes.


Comparisons and distinctions

The biggest similarity between the two methods is that they both allow websites to be viewed in mobile devices and various screen sizes, ultimately providing visitors with a better mobile user experience. Where the two methods differ is in their delivery of the responsive/adaptive structures: RWD relying on flexible and fluid grids, and AWD relying on predefined screen sizes. One of the main distinctions between the two is that RWD might take more code and implementation strategies with the fluid grids, CSS, and flexible foundations, while AWD has a streamlined, layered approach, which utilizes scripting to assist with adapting to various devices and screen sizes.

Some would argue that the terms used invite confusion, in particular, responsive, and might not accurately reflect what is actually occurring when a website changes its design according to the particular mobile device being used.