Progressive Enhancement to the Rescue

1. Progressive Enhancementto the Rescue Andrew Steele twitter: ahsteele blog: http://steelebit.com andrew.steele@sandia.gov Sandia National Laboratories is a multi-program laboratory operated by Sandia Corporation, a wholly owned subsidiary of Lockheed Martin company, for the U.S. Department of Energy’s National Nuclear Security Administration under contract DE-AC04-94AL85000.

2. Agenda • A Bit of History • Progressive Enhancement • Progressive Enhancement in Action

3. how we got here A bit of history

4. Graceful Degradation • Origin as a general engineering concept • Espoused since 1994 • Most developers design this way ignoring that: • browsers, even modern browsers, have widely varying capabilities • accessibility is for everyone, not just the disabled • possible to support all browsers with HTML & CSS

5. Problems with Graceful Degradation • In practice results in an attitude of the user should just upgrade • Ignores user choice • Does not address different needs of different audiences • It’s expensive to retrofit to new alternative devices • Whatever is “good enough” usually rules

6. Progressive Enhancement • Introduced by Steve Champeon and Nick Finck • Introduced in 2003 • Is a response to Graceful Degradation • Closer to Tim Berners-Lee’s original web vision • Allows for cleaner separation of responsibility • Embraces accessibility • Future compatibility

7. Side-by-Side Graceful Degradation Progressive Enhancement Focuses on content Tests the least common denominator forward Older browsers are expected to have a passable experience. • Focuses on building for the most advanced browsers • Testing in “older” browsers is an afterthought • Older browsers are expected to have a poor, but passable experience.

8. broken down Progressive enhancement

9. HTML is reliable like stairs

10. client-side scripting • presentation • content

11. putting the pieces together Moving parts

12. Semantic HTML • HTML has included semantic markup since its inception • It is the use of HTML to convey meaning • HTML elements carry meaning regardless of your knowledge of that meaning

13. Cascading Style Sheets (CSS) • Use multiple • Have each style sheet target an appropriate media type • Use generated content to add superfluous text • “|” to divide links • “:” after field labels • <link rel=“stylesheet” type=“text/css” media=“screen”print=“print.css”>

14. JavaScript • For too long JavaScript has been a corruptive force on the web • This is because it has been generally misunderstood

15. Unobtrusive JavaScript • <input type=“text” name=“zipCode” onchange=“validateZipCode”> vs. • <input type=“text” name=“zipCode”> Key concept any content users need to understand the purpose of the page should exist in that page even in the absence of client-side scripting.

16. show me the codes Great in theory

17. Additional Resources • Progressive Enhancementhttp://en.wikipedia.org/wiki/Progressive_enhancement • Graceful Degradationhttp://en.wikipedia.org/wiki/Graceful_degradation • Inclusive Web Design for the Futurehttp://www.hesketh.com/publications/inclusive_web_design_for_the_future/ • Bulletproof Web Designhttp://simplebits.com/publications/bulletproof/ • Understanding Progressive Enhancementhttp://www.alistapart.com/articles/understandingprogressiveenhancement/ • Nice like Elevators with Progressive Enhancementhttp://www.atendesigngroup.com/blog/nice-like-elevators-with-progressive-enhancement

18. questions