Progressive Advancement
         by way of Progressive Enhancement
         with a sprinkle of Regressive Enhancement, whe...
Your mother does
                              NOT find a website
                             she likes the look of,
     ...
OMG Browser wars




Sunday, September 12, 2010
Shiny new toys




                             svg
Sunday, September 12, 2010
Contenteditable




Sunday, September 12, 2010
A Question...
     if you’re designing a mobile experience,

     do you start with how its going to look
     in blackber...
So why have we had a different approach
           when it comes to the desktop?




Sunday, September 12, 2010
So we create an experience that takes
           advantage of hotness when we have it.

              and function decentl...
How then?




Sunday, September 12, 2010
Modernizr
Sunday, September 12, 2010
Sunday, September 12, 2010
Feature Detection


Sunday, September 12, 2010
sni
                                   ffin
                                        g   use
                              ...
Sunday, September 12, 2010
Sunday, September 12, 2010
Native                    No Native
              Implementation            Implementation
              .box {           ...
// geo-location bridge
        function getLocation(callback){
          if (getLocation.cache) return callback(getLocatio...
Sunday, September 12, 2010
OM
                             onl G it’s
                                y3
                                   .7k
     ...
We got you covered, b.
              Rounded corners         2D Transformations
              @font-face fonts        CSS ...
We got you covered, b.
              Rounded corners         2D Transformations   webGL
              @font-face fonts    ...
We got you covered, b.
              Rounded corners           2D Transformations   webGL
              @font-face fonts  ...
Modernizr
              http://modernizr.com
                             @modernizr




                                 ...
Sunday, September 12, 2010
CSS3 Please!




Sunday, September 12, 2010
.. but how can i convince my team
                        to use this stuff for modern
                                   ...
Be the champion of performance.




Sunday, September 12, 2010
A Performance Policy

                             2 truths
        1. Both you and the client want the most
           re...
A Performance Policy
              During IA, IxD and visual design
                    communicate impact of design decis...
When performance is poor
          There are three options:


          1. Redevelop the code

          2. Drop the featu...
Make the case




Sunday, September 12, 2010
Killing code is a good thing
            HTML5            form controls             UI libraries

             HTML5      ...
Tantek sez:




Sunday, September 12, 2010
Tantek’s list:
     dependable:             roughly usable:   experimentable:
      doctype                 canvas        ...
Paul’s list:
     dependable:             roughly usable:   experimentable:
      doctype                 canvas          ...
Sunday, September 12, 2010
Sunday, September 12, 2010
Sunday, September 12, 2010
Me:
                             http://paulirish.com
                                   @paul_irish




Sunday, September...
OM
                                                          G
                                                    THX
   ...
Upcoming SlideShare
Loading in...5
×

Progressive Advancement, by way of progressive enhancement

3,284

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,284
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
34
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×