Progressive Advancement in Web8
3 likes1,394 views
The document discusses advancements in web technologies, specifically focusing on HTML5 and CSS3, and compares their native features against UI libraries and older technologies. It emphasizes the importance of performance, feature detection with Modernizr, and the need for responsiveness across various browsers and devices. The document also highlights how to handle situations where certain features may not be supported by older browsers.
Progressive Advancement in Web8
- 1. Progressive Advancement in Web8 (btw- web8 == html5 + css3) Paul Irish Isobar JSConf ’10 Friday, April 23, 2010
- 2. Friday, April 23, 2010
- 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. SHIM. okay? Shim. not shiv. Friday, April 23, 2010
- 5. hx, ly. Printing, too. t l rea www.iecss.com/print-protector by @jon_neal Friday, April 23, 2010
- 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. How Ready Is HTML5 & CSS3? Friday, April 23, 2010
- 9. Friday, April 23, 2010
- 10. CSS3 Please! Friday, April 23, 2010
- 11. CSS3 Helpers border-radius.com Friday, April 23, 2010
- 12. CSS3 Helpers border-image.com border-radius.com Friday, April 23, 2010
- 13. But what if there’s no support? Friday, April 23, 2010
- 14. Modernizr Making use of tomorrow’s technologies, today! Friday, April 23, 2010
- 15. Friday, April 23, 2010
- 16. Feature Detection Just Detect It™ Friday, April 23, 2010
- 17. sni ffin g us era gent s == = sn iffin g gl ue Friday, April 23, 2010
- 18. Friday, April 23, 2010
- 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. 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. // 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. Friday, April 23, 2010
- 23. OM G it onl ’s y7 k! Friday, April 23, 2010
- 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. 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. 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. Modernizr http://modernizr.com @modernizr Yah, it’s open source. Fork it, baby. Friday, April 23, 2010
- 31. UP ! HU T wrong. S y ou ’re ishtml5readyyet.com Friday, April 23, 2010
- 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. 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. 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. 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. 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. Friday, April 23, 2010
- 38. Me: http://paulirish.com @paul_irish Friday, April 23, 2010