Progressive Advancement, by way of progressive enhancement
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Progressive Advancement, by way of progressive enhancement

  • 3,557 views
Uploaded on

with a sprinkle of Regressive Enhancement, where possible

with a sprinkle of Regressive Enhancement, where possible

More 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
3,557
On Slideshare
3,412
From Embeds
145
Number of Embeds
2

Actions

Shares
Downloads
33
Comments
0
Likes
6

Embeds 145

http://east.webdirections.org 143
http://webcache.googleusercontent.com 2

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 by way of Progressive Enhancement with a sprinkle of Regressive Enhancement, where possible Paul Irish Google Chrome FRONTEND2010 Sunday, September 12, 2010
  • 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. OMG Browser wars Sunday, September 12, 2010
  • 4. Shiny new toys svg Sunday, September 12, 2010
  • 5. Contenteditable Sunday, September 12, 2010
  • 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. So why have we had a different approach when it comes to the desktop? Sunday, September 12, 2010
  • 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. How then? Sunday, September 12, 2010
  • 10. Modernizr Sunday, September 12, 2010
  • 11. Sunday, September 12, 2010
  • 12. Feature Detection Sunday, September 12, 2010
  • 13. sni ffin g use rag ent s == = sn iffin g gl ue Sunday, September 12, 2010
  • 14. Sunday, September 12, 2010
  • 15. Sunday, September 12, 2010
  • 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. // 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. Sunday, September 12, 2010
  • 19. OM onl G it’s y3 .7k ! Sunday, September 12, 2010
  • 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. 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. 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. Modernizr http://modernizr.com @modernizr Yah, it’s open source. Fork it, baby. Sunday, September 12, 2010
  • 24. Sunday, September 12, 2010
  • 25. CSS3 Please! Sunday, September 12, 2010
  • 26. .. but how can i convince my team to use this stuff for modern browsers? Sunday, September 12, 2010
  • 27. Be the champion of performance. Sunday, September 12, 2010
  • 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. 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. 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. Make the case Sunday, September 12, 2010
  • 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. Tantek sez: Sunday, September 12, 2010
  • 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. 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. Sunday, September 12, 2010
  • 37. Sunday, September 12, 2010
  • 38. Sunday, September 12, 2010
  • 39. Me: http://paulirish.com @paul_irish Sunday, September 12, 2010
  • 40. OM G THX ! Me: http://paulirish.com @paul_irish Sunday, September 12, 2010