Progressive Advancement, by way of progressive enhancement

3,725 views
3,591 views

Published on

with a sprinkle of Regressive Enhancement, where possible

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

No Downloads
Views
Total views
3,725
On SlideShare
0
From Embeds
0
Number of Embeds
160
Actions
Shares
0
Downloads
35
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Progressive Advancement, by way of progressive enhancement

  1. 1. Progressive Advancement by way of Progressive Enhancement with a sprinkle of Regressive Enhancement, where possible Paul Irish Google Chrome FRONTEND2010 Sunday, September 12, 2010
  2. 2. Your mother does NOT find a website she likes the look of, and then opens it another browser. ~Andy Clarke (@malarkey) Sunday, September 12, 2010
  3. 3. OMG Browser wars Sunday, September 12, 2010
  4. 4. Shiny new toys svg Sunday, September 12, 2010
  5. 5. Contenteditable Sunday, September 12, 2010
  6. 6. A Question... if you’re designing a mobile experience, do you start with how its going to look in blackberry and s60 and winmobile? or do you design it to look fucking great in android, iOS, happy new webkits... and function decently on the rest? Sunday, September 12, 2010
  7. 7. So why have we had a different approach when it comes to the desktop? Sunday, September 12, 2010
  8. 8. So we create an experience that takes advantage of hotness when we have it. and function decently when we don’t. Sunday, September 12, 2010
  9. 9. How then? Sunday, September 12, 2010
  10. 10. Modernizr Sunday, September 12, 2010
  11. 11. Sunday, September 12, 2010
  12. 12. Feature Detection Sunday, September 12, 2010
  13. 13. sni ffin g use rag ent s == = sn iffin g gl ue Sunday, September 12, 2010
  14. 14. Sunday, September 12, 2010
  15. 15. Sunday, September 12, 2010
  16. 16. Native No Native Implementation Implementation .box { .no-borderradius .box { // use border-radius // maybe less padding? } } if (Modernizr.borderradius == false){ // call up DD_roundies, etc. } Sunday, September 12, 2010
  17. 17. // 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); }); Sunday, September 12, 2010
  18. 18. Sunday, September 12, 2010
  19. 19. OM onl G it’s y3 .7k ! Sunday, September 12, 2010
  20. 20. 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 … Sunday, September 12, 2010
  21. 21. 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 Sunday, September 12, 2010
  22. 22. 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 or just take the tests by themselves, sans-library Sunday, September 12, 2010
  23. 23. Modernizr http://modernizr.com @modernizr Yah, it’s open source. Fork it, baby. Sunday, September 12, 2010
  24. 24. Sunday, September 12, 2010
  25. 25. CSS3 Please! Sunday, September 12, 2010
  26. 26. .. but how can i convince my team to use this stuff for modern browsers? Sunday, September 12, 2010
  27. 27. Be the champion of performance. Sunday, September 12, 2010
  28. 28. 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. Sunday, September 12, 2010
  29. 29. 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 Sunday, September 12, 2010
  30. 30. When performance is poor There are three options: 1. Redevelop the code 2. Drop the feature 3. Redesign approach of the UI Sunday, September 12, 2010
  31. 31. Make the case Sunday, September 12, 2010
  32. 32. Killing code is a good thing HTML5 form controls UI libraries HTML5 drag ‘n drop jQuery.fn.draggable() css transitions .animate() VS border-radius border-image large image sprites background gradients localStorage cookies Sunday, September 12, 2010
  33. 33. Tantek sez: Sunday, September 12, 2010
  34. 34. Tantek’s list: dependable: roughly usable: experimentable: doctype canvas geolocation charset web sockets selfclose, quotes awkward: web sql database new semantics form inputs indexeddatabase audio/video meter/progress webstorage autofocus, web workers placeholder Sunday, September 12, 2010
  35. 35. Paul’s list: dependable: roughly usable: experimentable: doctype canvas web sql database charset geolocation indexeddatabase selfclose, quotes web sockets webstorage new semantics autofocus, web workers audio/video placeholder data-* attrs drag n drop awkward: contenteditable form inputs meter/progress Sunday, September 12, 2010
  36. 36. Sunday, September 12, 2010
  37. 37. Sunday, September 12, 2010
  38. 38. Sunday, September 12, 2010
  39. 39. Me: http://paulirish.com @paul_irish Sunday, September 12, 2010
  40. 40. OM G THX ! Me: http://paulirish.com @paul_irish Sunday, September 12, 2010

×