Your SlideShare is downloading. ×
  • Like
Progressive Advancement in Web8
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Progressive Advancement in Web8

  • 2,642 views
Published

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.

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,642
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
62
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 8. Contenteditable 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
  • 28. dowebsitesneedtolookexactlythesameineverybrowser.com Friday, April 23, 2010
  • 29. dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com Friday, April 23, 2010
  • 30. ishtml5readyyet.com 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