What Is The Difference Between Responsive & Adaptive Web Design?
The three layers of Progressive Enhancement:
- Content layer = rich semantic HTML markup
- Presentation layer = CSS and styling
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.