Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Progressive enhancement

605 views

Published on

This was a presentation I did for our local CWCW group (http://www.uwec.edu/cwcw/) where I explained and the idea of progressive enhancement. I then went on to explain how to turn it from a concept to reality.

Published in: Education
  • Be the first to comment

  • Be the first to like this

Progressive enhancement

  1. 1. Progressive Enhancement Eric Lightbody (and how you will LOVE CSS3) Thursday, November 4, 2010
  2. 2. Enhancing and Degrading Thursday, November 4, 2010
  3. 3. 1. Support all browsers with perfect fidelity 2. Support all browsers to some degree 3. Support newer, forget older Thursday, November 4, 2010
  4. 4. Enough theory already! Thursday, November 4, 2010
  5. 5. Thursday, November 4, 2010
  6. 6. Thursday, November 4, 2010
  7. 7. What does it look like? Thursday, November 4, 2010
  8. 8. Example time Thursday, November 4, 2010
  9. 9. Modernizr Thursday, November 4, 2010
  10. 10. <html lang="en" class=" js canvas canvastext geolocation crosswindowmessaging websqldatabase no-indexeddb hashchange historymanagement draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssrelections csstransforms no- csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache svg smil svgclippaths fontface"> Chrome Thursday, November 4, 2010
  11. 11. <html lang="en" class="js no-canvas no-canvastext no- geolocation crosswindowmessaging no-websqldatabase no-indexeddb no-hashchange no-historymanagement draganddrop no-websockets no-rgba no-hsla no- multiplebgs no-backgroundsize no-borderimage no- borderradius no-boxshadow no-opacity no- cssanimations no-csscolumns no-cssgradients no- cssrelections no-csstransforms no-csstransforms3d no- csstransitions fontface no-video no-audio localstorage sessionstorage no-webworkers no-applicationcache no- svg no-smil no-svgclippaths”> IE8 Thursday, November 4, 2010
  12. 12. #br { background-color: #111f; color: #fff; width: 450px; padding: 10px; loat: left; } .borderradius #br { border-radius: 20px 20px 0 0; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; } Thursday, November 4, 2010
  13. 13. #br { background-color: #111f; color: #fff; width: 450px; padding: 10px; loat: left; } .borderradius #br { border-radius: 20px 20px 0 0; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; } Thursday, November 4, 2010
  14. 14. IE Chrome Thursday, November 4, 2010
  15. 15. #shadow { width: 450px; padding: 10px; loat: left; border-bottom: 1px solid #666; border-right: 1px solid #777; } .boxshadow #shadow { border: none; box-shadow: #666 3px 3px 6px; -moz-box-shadow: #666 3px 3px 6px; -webkit-box-shadow: #666 3px 3px 6px; } Thursday, November 4, 2010
  16. 16. #shadow { width: 450px; padding: 10px; loat: left; border-bottom: 1px solid #666; border-right: 1px solid #777; } .boxshadow #shadow { border: none; box-shadow: #666 3px 3px 6px; -moz-box-shadow: #666 3px 3px 6px; -webkit-box-shadow: #666 3px 3px 6px; } Thursday, November 4, 2010
  17. 17. IE Chrome Thursday, November 4, 2010
  18. 18. #alpha { loat: left; background: transparent url(images/iro.jpg) no-repeat 0 0; position:relative; } #alpha div { background-color:#FFF; position:absolute; } .rgba #alpha div { background-color: rgba(255,255,255, .7); } Thursday, November 4, 2010
  19. 19. #alpha { loat: left; background: transparent url(images/iro.jpg) no-repeat 0 0; position:relative; } #alpha div { background-color:#FFF; position:absolute; } .rgba #alpha div { background-color: rgba(255,255,255, .7); } Thursday, November 4, 2010
  20. 20. IE Chrome Thursday, November 4, 2010
  21. 21. Thursday, November 4, 2010
  22. 22. Thursday, November 4, 2010
  23. 23. Thursday, November 4, 2010
  24. 24. Thursday, November 4, 2010
  25. 25. Thursday, November 4, 2010
  26. 26. Thursday, November 4, 2010
  27. 27. Thank You References: alistapart.com/articles/understandingprogressiveenhancement/ perishablepress.com/press/2010/01/11/css3-progressive-enhancement-smart-design/ alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/ http://stuffandnonsense.co.uk/blog/about/what_does_browser_testing_mean_today Thursday, November 4, 2010

×