Progressive Advancement in Web8

3,228 views

Published on

You can put html5 and css3 to use *today*. Using some clever code and trusted techniques of progressive enhancement, you'll be creating cutting edge sites that handle older browsers appropriately.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,228
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
65
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Progressive Advancement in Web8

  1. 1. Progressive Advancement in Web8 (btw- web8 == html5 + css3) Paul Irish Isobar JSConf ’10 Friday, April 23, 2010
  2. 2. Friday, April 23, 2010
  3. 3. Native is better html5 form controls vs UI libraries html5 drag ‘n drop vs draggable() css transitions vs animate() border-radius, border-image, background-size vs using large sprites localStorage vs cookies Friday, April 23, 2010
  4. 4. SHIM. okay? Shim. not shiv. Friday, April 23, 2010
  5. 5. hx, ly. Printing, too. t l rea www.iecss.com/print-protector by @jon_neal Friday, April 23, 2010
  6. 6. now hx, ly. htm Printing, too. t l rea mo l5s hiv in der & niz r! www.iecss.com/print-protector by @jon_neal Friday, April 23, 2010
  7. 7. How Ready Is HTML5 & CSS3? Friday, April 23, 2010
  8. 8. Contenteditable Friday, April 23, 2010
  9. 9. Friday, April 23, 2010
  10. 10. CSS3 Please! Friday, April 23, 2010
  11. 11. CSS3 Helpers border-radius.com Friday, April 23, 2010
  12. 12. CSS3 Helpers border-image.com border-radius.com Friday, April 23, 2010
  13. 13. But what if there’s no support? Friday, April 23, 2010
  14. 14. Modernizr Making use of tomorrow’s technologies, today! Friday, April 23, 2010
  15. 15. Friday, April 23, 2010
  16. 16. Feature Detection Just Detect It™ Friday, April 23, 2010
  17. 17. sni ffin g us era gent s == = sn iffin g gl ue Friday, April 23, 2010
  18. 18. Friday, April 23, 2010
  19. 19. Native No Native Implementation Implementation . box { .no-borderradius .box { // use border-radius // maybe less padding? } } if (Modernizr.borderradius == false){ // call up DD_roundies, etc. } Friday, April 23, 2010
  20. 20. Native No Native Implementation Implementation .boxshadow div { .no-boxshadow div { box-shadow: 1px 1px 1px #666; border-bottom: 1px solid #666; } border-right: 1px solid #777; } Friday, April 23, 2010
  21. 21. // geo-location bridge function getLocation(callback){ if (getLocation.cache) return callback(getLocation.cache); if (Modernizr.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { callback(getLocation.cache = { "lat": position.coords.latitude, "lon": position.coords.longitude, "obj": position }) }); } else { $.getScript('//www.google.com/jsapi',function(){ callback(getLocation.cache = { "lat": google.loader.ClientLocation.latitude, "lon": google.loader.ClientLocation.longitude, "obj": google.loader.ClientLocation }) }); } } // usage getLocation(function(pos){ console.log("I'm located at ",pos.lat,' and ',pos.lon); }); Friday, April 23, 2010
  22. 22. Friday, April 23, 2010
  23. 23. OM G it onl ’s y7 k! Friday, April 23, 2010
  24. 24. We got you covered, b. Rounded corners 2D Transformations @font-face fonts CSS Gradients Canvas SVG rgba(), hsla() colors Geolocation border-image CSS Columns box-shadow HTML5 Forms HTML5 Audio & Video Web Workers CSS Animations Offline Web Apps CSS Transitions … Friday, April 23, 2010
  25. 25. We got you covered, b. Rounded corners 2D Transformations webGL @font-face fonts CSS Gradients SMIL Canvas SVG hashchange event rgba(), hsla() colors Geolocation localStorage border-image CSS Columns sessionStorage box-shadow HTML5 Forms postMessage HTML5 Audio & Web Workers html5 drag ‘n drop Video Offline Web Apps web sql database CSS Animations CSS Transitions Friday, April 23, 2010
  26. 26. We got you covered, b. Rounded corners 2D Transformations webGL @font-face fonts CSS Gradients SMIL Canvas SVG hashchange event rgba(), hsla() colors Geolocation localStorage border-image CSS Columns sessionStorage box-shadow HTML5 Forms postMessage HTML5 Audio & Video Steal me! Web Workers html5 drag ‘n drop Offline Web Apps web sql database CSS Animations CSS Transitions Friday, April 23, 2010
  27. 27. Modernizr http://modernizr.com @modernizr Yah, it’s open source. Fork it, baby. Friday, April 23, 2010
  28. 28. dowebsitesneedtolookexactlythesameineverybrowser.com Friday, April 23, 2010
  29. 29. dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com Friday, April 23, 2010
  30. 30. ishtml5readyyet.com Friday, April 23, 2010
  31. 31. UP ! HU T wrong. S y ou ’re ishtml5readyyet.com Friday, April 23, 2010
  32. 32. Your mother does NOT find a website she likes the look of, and then opens it another browser. ~Andy Clarke (@malarkey) Friday, April 23, 2010
  33. 33. A Performance Policy 2 truths 1. Both you and the client want the most responsive experience possible. 2. Everything added to the page slows it down. Friday, April 23, 2010
  34. 34. A Performance Policy During IA, IxD and visual design communicate impact of design decisions Tell the client all browsers will not have the same experience It’s not worthwhile to have feature parity Stop in the name of love Drop in the name of performance Friday, April 23, 2010
  35. 35. What would you prefer me to do? Spend my time hacking around issues in older technologies like Internet Explorer 6 or would you like that time spent making the site look the best that it can on better desktop browsers, as well as on the iPhone, iPod Touch, iPad, Blackberry and a whole host of other mobile devices? ~Andy Clarke (@malarkey) Friday, April 23, 2010
  36. 36. When performance is poor There are three options: 1. Redevelop the code 2. Drop the feature 3. Redesign approach of the UI Friday, April 23, 2010
  37. 37. Friday, April 23, 2010
  38. 38. Me: http://paulirish.com @paul_irish Friday, April 23, 2010

×