This book covers the origins of progressive enhancement, its philosophy and mechanisms and reveals the countless practical ways that you can apply progressive enhancement principles using HTML, CSS, and JavaScript. Key Chapters and Topics are listed below and the website used to demonstrate the techniques is http://retreats4geeks.com/. To see how it responds to different device widths, change the size of your browser window.
1) Think of the User, Not the Browser
Sets up the philosophy behind progressive enhancement and explains how progressive enhancement is different from graceful degradation and why it should be used in place of graceful degradation.
2) Progressive Enhancement With Markup
Covers and explains the basics of how to incorporate progressive enhancement though HTML markup with an hCard and an hCalendar microformat example.
3) Progressive Enhancement with CSS
Covers and explains the basics of how to incorporate progressive enhancement through CSS with a recommendation for thinking of CSS as typography, layout and color and using the cascading functionality of CSS to accomplish progressive enhancement for different browsers. Includes an example of media queries to determine screen width and CSS conditionals to include enhanced or targeted CSS style definitions for the screen widths. The recommendation is to design to the width of a tablet and adjust for wider desktops and narrow smartphones.
4) Progressive Enhancement with JavaScript
Covers the basics of how to incorporate progressive enhancement with JavaScript. Examples are offered on how to allow JavaScript to unobtrusively generate the markup it needs when it is executed, preventing unsupported JS from ever getting loaded or causing errors in browsers that do not support the methods called or when the user has turned off JS in their browser.
5) Progressive Enhancement for Accessibility
Covers the basics of ensuring the content is delivered reliably and in a way that makes the browsing of a site effective when using screen readers or other accessibility devices.
6) Summary and Progressive Enhancement Checklist
My summary:
Overall, a quick read with lots of great tips. The provided checklist is useful for developing forward compatible websites. I like the technique of how they converted the graphical site nav into a drop down for narrow screens.
1) Think of the User, Not the Browser
Sets up the philosophy behind progressive enhancement and explains how progressive enhancement is different from graceful degradation and why it should be used in place of graceful degradation.
2) Progressive Enhancement With Markup
Covers and explains the basics of how to incorporate progressive enhancement though HTML markup with an hCard and an hCalendar microformat example.
3) Progressive Enhancement with CSS
Covers and explains the basics of how to incorporate progressive enhancement through CSS with a recommendation for thinking of CSS as typography, layout and color and using the cascading functionality of CSS to accomplish progressive enhancement for different browsers. Includes an example of media queries to determine screen width and CSS conditionals to include enhanced or targeted CSS style definitions for the screen widths. The recommendation is to design to the width of a tablet and adjust for wider desktops and narrow smartphones.
4) Progressive Enhancement with JavaScript
Covers the basics of how to incorporate progressive enhancement with JavaScript. Examples are offered on how to allow JavaScript to unobtrusively generate the markup it needs when it is executed, preventing unsupported JS from ever getting loaded or causing errors in browsers that do not support the methods called or when the user has turned off JS in their browser.
5) Progressive Enhancement for Accessibility
Covers the basics of ensuring the content is delivered reliably and in a way that makes the browsing of a site effective when using screen readers or other accessibility devices.
6) Summary and Progressive Enhancement Checklist
My summary:
Overall, a quick read with lots of great tips. The provided checklist is useful for developing forward compatible websites. I like the technique of how they converted the graphical site nav into a drop down for narrow screens.