The phrase Adaptive Web Design was coined by Aaron Gustafson, who wrote the book of the same title. It 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. A recent post, "Understanding progressive enhancement techniques in web design" described the layers that make up the adaptive approach.
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
In a recent podcast interview, Aaron describes how the term was selected; he wanted to disambiguate his book from the Filament Group's book, "Designing with Progressive Enhancement". Aaron goes on to mention in the podcast:
"So, we were trying to think of, you know, what exactly does all of this stuff really mean, and it was about creating rich, adaptable experiences that tailor themselves to the particular device that you were working with. So, the way that I view progressive enhancement is very much analogous to adaptive web design. It's essentially the same concept."
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.
Web Apps Design and Development http://www.ati-erp.com
ATI-ERP