Fundamental Progressive Enhancement [Web Design World Boston 2008]

2,382 views
2,316 views

Published on

"Progressive enhancement" involves designing sites in a way that allows everyone to access the basic content of a web page while also providing enhanced versions to visitors with faster bandwidth or more advanced browsers. In this session, Aaron Gustafson covers the current best practice in this critical aspect of web standards development. Staring with an introduction to the topic, Aaron will walk you through the best ways to apply style and behavior to your pages, providing concrete examples and implementations that you can start using right away.

Published in: Technology, Education
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,382
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
59
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Fundamental Progressive Enhancement [Web Design World Boston 2008]

  1. 1. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Aaron Gustafson
  2. 2. WHAT IS PROGRESSIVE ENHANCEMENT?
  3. 3. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Graceful Degradation User Experience NEWER OLDER Browser Age WEB DESIGN WORLD 3
  4. 4. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Progressive Enhancement User Experience BASIC ADVANCED Browser Capabilities WEB DESIGN WORLD 4
  5. 5. it’s about service
  6. 6. you wouldn’t do this...
  7. 7. Photo credit: dansays but sites do...
  8. 8. Photo credit: dansays but sites do...
  9. 9. HOW DOES IT WORK?
  10. 10. a little treat for everyone Photo credit: madam.furie
  11. 11. (viewed another way)
  12. 12. FUNDAMENTAL PROGRESSIVE ENHANCEMENT JavaScript CSS XHTML + HTTP only WEB DESIGN WORLD 13
  13. 13. FUNDAMENTAL PROGRESSIVE ENHANCEMENT JavaScript some JavaScript CSS some CSS XHTML + HTTP only WEB DESIGN WORLD 13
  14. 14. FUNDAMENTAL PROGRESSIVE ENHANCEMENT User Experience BASIC ADVANCED Browser Capabilities WEB DESIGN WORLD 14
  15. 15. LEVELS OF SERVICE
  16. 16. LEVELS OF SUPPORT
  17. 17. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP WEB DESIGN WORLD 16
  18. 18. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP WEB DESIGN WORLD 16
  19. 19. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP WEB DESIGN WORLD 16
  20. 20. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP WEB DESIGN WORLD 16
  21. 21. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP WEB DESIGN WORLD 16
  22. 22. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rely on your baseline robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP WEB DESIGN WORLD 17
  23. 23. Photo credit: PetitPlat by sk_ you can still be creative
  24. 24. every key we press a!ects user experience Photo credit: JasonRogers
  25. 25. PROGRESSIVE ENHANCEMENT WITH CSS
  26. 26. FUNDAMENTAL PROGRESSIVE ENHANCEMENT layout.css color.css main.css type.css WEB DESIGN WORLD 21
  27. 27. FUNDAMENTAL PROGRESSIVE ENHANCEMENT type.css layout.css color.css WEB DESIGN WORLD 21
  28. 28. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; /> href=quot;main.cssquot; href=quot;color.cssquot; /> WEB DESIGN WORLD 22
  29. 29. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;main.cssquot; />/> href=quot;layout.cssquot; <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; /> WEB DESIGN WORLD 22
  30. 30. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; /> WEB DESIGN WORLD 23
  31. 31. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;print.cssquot; media=quot;printquot; /> WEB DESIGN WORLD 23
  32. 32. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;print.cssquot; media=quot;printquot; /> WEB DESIGN WORLD 23
  33. 33. FUNDAMENTAL PROGRESSIVE ENHANCEMENT @import 'screen.css'; <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;print.cssquot; media=quot;printquot; /> WEB DESIGN WORLD 23
  34. 34. FUNDAMENTAL PROGRESSIVE ENHANCEMENT @import 'screen.css';screen; 'screen.css' s; @import 'print.css' print; @import 'mobile.css' handheld; <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;print.cssquot; media=quot;printquot; /> WEB DESIGN WORLD 23
  35. 35. (the browser that wouldn’t die) Photo credit: oskay
  36. 36. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; /> WEB DESIGN WORLD 25
  37. 37. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; /> <!--[if IE lte 7]> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;ie7.cssquot; /> <![endif]--> WEB DESIGN WORLD 25
  38. 38. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; /> <!--[if IE lte 7]> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;ie7.cssquot; /> <![endif]--> <!--[if IE lte 6]> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;ie6.cssquot; /> <![endif]--> WEB DESIGN WORLD 25
  39. 39. property: value; html>/**/body _property: value; * html voice-family: quot;quot;}quot;quot;; -property: value; voice-family:inherit; *:first-child+html
  40. 40. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Make smart decisions WEB DESIGN WORLD 27
  41. 41. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Make smart decisions <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Contact Us</legend> <p>Send us a message. All fields are required.</p> <ol> <li> <label for=quot;contact-namequot;>Name</label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /> </li> <li> <label for=quot;contact-emailquot;>Email</label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /> </li> <li> <label for=quot;contact-messagequot;>Message</label> <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot; cols=quot;30quot;></textarea> </li> </ol> <button type=quot;submitquot;>Send It</button> </fieldset> </form> WEB DESIGN WORLD 27
  42. 42. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Make smart decisions <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Contact Us</legend> <p>Send us a message. All fields are required.</p> <ol> <li> <label for=quot;contact-namequot;>Name</label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /> </li> <li> <label for=quot;contact-emailquot;>Email</label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /> </li> <li> <label for=quot;contact-messagequot;>Message</label> <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot; cols=quot;30quot;></textarea> </li> </ol> <button type=quot;submitquot;>Send It</button> </fieldset> </form> WEB DESIGN WORLD 27
  43. 43. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Make smart decisions <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Contact Us</legend> <p>Send us a message. All fields are required.</p> <ol> <li> <label for=quot;contact-namequot;>Name</label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /> </li> <li> <label for=quot;contact-emailquot;>Email</label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /> </li> <li> <label for=quot;contact-messagequot;>Message</label> <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot; cols=quot;30quot;></textarea> </li> </ol> <button type=quot;submitquot;>Send It</button> </fieldset> </form> WEB DESIGN WORLD 27
  44. 44. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Make smart decisions label:after { content: quot;:quot;; } WEB DESIGN WORLD 27
  45. 45. QUESTIONS?
  46. 46. inspired?
  47. 47. PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT
  48. 48. Photo credit: andyburnfield proper planning...
  49. 49. ...can keep you from looking foolish
  50. 50. FUNDAMENTAL PROGRESSIVE ENHANCEMENT robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP WEB DESIGN WORLD 34
  51. 51. Photo credit: ambery
  52. 52. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Consider lala.com WEB DESIGN WORLD 36
  53. 53. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Without JavaScript WEB DESIGN WORLD 37
  54. 54. FUNDAMENTAL PROGRESSIVE ENHANCEMENT And looking at the markup... WEB DESIGN WORLD 38
  55. 55. Photo credit: spike55151
  56. 56. Photo credit: drp
  57. 57. listen? Photo credit: Giando
  58. 58. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Event Listening window.onload = handleExternalLinks; function handleExternalLinks(){ var server = document.location.hostname; var anchors = document.getElementsByTagName(quot;aquot;); var i, href; for( i=0; i < anchors.length; i++ ){ href = anchors[i].href; if( href.indexOf(quot;http://quot; + server) == -1 && href.indexOf(quot;https://quot; + server) == -1 ){ // HREF is not a file on my server anchors[i].onclick = function(){ newWin( this.href ); }; } } } WEB DESIGN WORLD 42
  59. 59. or delegate? Photo credit: hebedesign
  60. 60. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Event delegation document.getElementsByTagName( 'body' )[0].onclick = quot; clickDelegator; function clickDelegator( e ){ e = ( e ) ? e : event; var el = e.target || e.srcElement; // external links if( el.nodeName.toLowerCase() == 'a' && el.getAttribute( 'rel' ) == 'external' ){ newWin( el.href ); } } WEB DESIGN WORLD 44
  61. 61. style can get out of hand Photo credit: thus spake drake
  62. 62. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Smart styles ul.TabInterface-tab-list { position: absolute; top: 0; left: 0; width: 100%; border-bottom: 3px solid; margin: 0 0 3px; } ul.TabInterface- tab-list li { border-left: 1px solid; cursor: pointer; float: left; display: inline; width: 25%; padding-bottom: 1em; margin-right: -1px; } WEB DESIGN WORLD 46
  63. 63. FUNDAMENTAL PROGRESSIVE ENHANCEMENT No style before its time <div id=quot;mainquot; class=quot;tabbedquot;> becomes <div id=quot;mainquot; class=quot;tabbed-onquot;> WEB DESIGN WORLD 47
  64. 64. FUNDAMENTAL PROGRESSIVE ENHANCEMENT No style before its time Default Activated add “-on” to the class .tabbed .tabbed-on add an activation class .auto-submit .auto-submit.active change the form of the class .replace-me .replaced WEB DESIGN WORLD 47
  65. 65. before you LEAP Photo credit: josh-n
  66. 66. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Look for methods function someFunction(){ if( !document.getElementsByTagName ) return; // code that uses document.getElementsByTagName() ... } WEB DESIGN WORLD 49
  67. 67. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Look for methods function someFunction(){ if( !document.getElementsByTagName || !document.getElementById ) return; /* code that uses document.getElementsByTagName() and document.getElementById() */ } WEB DESIGN WORLD 50
  68. 68. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Look for elements function someFunction(){ if( !document.getElementsByTagName || !document.getElementsByTagName( 'p' ) ) return; /* code that uses document.getElementsByTagName() and requires the presence of a P element */ ... } WEB DESIGN WORLD 51
  69. 69. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Look for identified elements function someFunction(){ if( !document.getElementById || !document.getElementById( 'content' ) ) return; // code that requires the presence of #content ... } WEB DESIGN WORLD 52
  70. 70. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Look for objects function someFunction(){ if( typeof( Prototype ) == 'undefined' ) return; // code that uses Prototype ... } WEB DESIGN WORLD 53
  71. 71. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Look for object versions function someFunction(){ if( typeof( Prototype ) == 'undefined' || parseFloat( Prototype.Version ) < 1.5 ) return; // code that uses Prototype 1.5 or higher ... } WEB DESIGN WORLD 54
  72. 72. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Look before you leap window.onload = function(){ if( document.getElementsByTagName && document.getElementById ){ someFunction(); } }; WEB DESIGN WORLD 55
  73. 73. QUESTIONS?
  74. 74. Photo credit: masstistraction it’s easier than this
  75. 75. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Example: Tab Interface Goal: to create a panel-based widget WEB DESIGN WORLD 59
  76. 76. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Traditional approach <h1>Pumpkin Pie</h1> <div class=quot;containerquot;> <div class=quot;sectionquot;> <h2>Overview</h2> <img src=quot;pie.jpgquot; alt=quot;quot;> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> ... </div> ... <ul class=quot;tabsquot;> <li><a href=quot;#quot;>Overview</a></li> <li><a href=quot;#quot;>Ingredients</a></li> <li><a href=quot;#quot;>Directions</a></li> <li><a href=quot;#quot;>Nutrition</a></li> </ul> </div> WEB DESIGN WORLD 60
  77. 77. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Static HTML with no style WEB DESIGN WORLD 61
  78. 78. FUNDAMENTAL PROGRESSIVE ENHANCEMENT A little typography WEB DESIGN WORLD 62
  79. 79. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Typography and color WEB DESIGN WORLD 63
  80. 80. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Static HTML with no style WEB DESIGN WORLD 64
  81. 81. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Static HTML with no style .tabbed WEB DESIGN WORLD 64
  82. 82. FUNDAMENTAL PROGRESSIVE ENHANCEMENT The actual source <h1>Pumpkin Pie</h1> <div class=quot;tabbedquot;> <h2>Overview</h2> <img src=quot;pie.jpgquot; alt=quot;quot; /> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> ... <h2>Ingredients</h2> <ul> <li>1 (9<abbr title=quot;inchquot;>in</abbr>) unbaked deep dish pie crust</li> <li>! cup white sugar</li> <li>1 <abbr title=quot;teaspoonquot;>tsp</abbr> ground cinnamon</li> ... </ul> <h2>Directions</h2> ... </div> WEB DESIGN WORLD 65
  83. 83. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Understanding the flow WEB DESIGN WORLD 66
  84. 84. FUNDAMENTAL PROGRESSIVE ENHANCEMENT The full experience WEB DESIGN WORLD 67
  85. 85. QUESTIONS?
  86. 86. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Example: Collapsing Form Goal: to create a search form with optional advanced filters. By default the optional filters should be hidden, but users should be able to show and hide them as they need to. WEB DESIGN WORLD 69
  87. 87. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Collapsing Form as HTML WEB DESIGN WORLD 70
  88. 88. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Collapsing Form with CSS WEB DESIGN WORLD 71
  89. 89. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Collapsing Form with CSS WEB DESIGN WORLD 72
  90. 90. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Collapsing Form with CSS WEB DESIGN WORLD 73
  91. 91. FUNDAMENTAL PROGRESSIVE ENHANCEMENT HTML hooks form.collapsing WEB DESIGN WORLD 74
  92. 92. FUNDAMENTAL PROGRESSIVE ENHANCEMENT HTML hooks fieldset.optional WEB DESIGN WORLD 74
  93. 93. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Understanding the flow WEB DESIGN WORLD 75
  94. 94. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Collapsing Form with JS WEB DESIGN WORLD 76
  95. 95. QUESTIONS?
  96. 96. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Aaron Gustafson
  97. 97. Slides available at http://slideshare.net/AaronGustafson This presentation is licensed under Creative Commons Attribution-Noncommercial-Share Alike 3.0 flickr Photo Credits “MacBook Pro” by dansays “M&M” by madame.furie “Six-layered chocolate cake” by PetitPlat “Day 486 / 365 - Late Night High Level Coding” by JasonRogers “Leghoul” by oskay “Risk” by andyburnfield “fr tom” by ambery “CORNERSTONE” by spike55151 “Freedom” by drp “Headphone” by Giando “Shout, shout” by hebedesign “The writing is on the wall” by thus spake drake “Tiger Leaping Gorge - Ram” by josh-n “some assembly required” by massdistraction

×