Fundamental Progressive Enhancement [Web Builder 2.0 - 2008]

3,682 views

Published on

In this session, Aaron Gustafson covers the current best practice in Web standards development: progressive enhancement. 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

Fundamental Progressive Enhancement [Web Builder 2.0 - 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 BUILDER 2.0 3
  4. 4. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Progressive Enhancement User Experience BASIC ADVANCED Browser Capabilities WEB BUILDER 2.0 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 XHTML + HTTP only WEB BUILDER 2.0 13
  13. 13. FUNDAMENTAL PROGRESSIVE ENHANCEMENT CSS XHTML + HTTP only WEB BUILDER 2.0 13
  14. 14. FUNDAMENTAL PROGRESSIVE ENHANCEMENT JavaScript CSS XHTML + HTTP only WEB BUILDER 2.0 13
  15. 15. FUNDAMENTAL PROGRESSIVE ENHANCEMENT JavaScript some JavaScript CSS some CSS XHTML + HTTP only WEB BUILDER 2.0 13
  16. 16. FUNDAMENTAL PROGRESSIVE ENHANCEMENT User Experience BASIC ADVANCED Browser Capabilities WEB BUILDER 2.0 14
  17. 17. LEVELS OF SERVICE
  18. 18. LEVELS OF SUPPORT
  19. 19. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP WEB BUILDER 2.0 16
  20. 20. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP WEB BUILDER 2.0 16
  21. 21. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP WEB BUILDER 2.0 16
  22. 22. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP WEB BUILDER 2.0 16
  23. 23. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP WEB BUILDER 2.0 16
  24. 24. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP WEB BUILDER 2.0 16
  25. 25. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rely on your baseline robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP WEB BUILDER 2.0 17
  26. 26. Photo credit: PetitPlat by sk_ you can still be creative
  27. 27. every key we press a!ects user experience Photo credit: JasonRogers
  28. 28. PROGRESSIVE ENHANCEMENT WITH CSS
  29. 29. FUNDAMENTAL PROGRESSIVE ENHANCEMENT layout.css color.css main.css type.css WEB BUILDER 2.0 21
  30. 30. FUNDAMENTAL PROGRESSIVE ENHANCEMENT type.css layout.css color.css WEB BUILDER 2.0 21
  31. 31. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; /> href=quot;main.cssquot; href=quot;color.cssquot; /> WEB BUILDER 2.0 22
  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;main.cssquot; />/> href=quot;layout.cssquot; <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; /> WEB BUILDER 2.0 22
  33. 33. 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 BUILDER 2.0 23
  34. 34. 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 BUILDER 2.0 23
  35. 35. 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 BUILDER 2.0 23
  36. 36. 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 BUILDER 2.0 23
  37. 37. 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 BUILDER 2.0 23
  38. 38. (the browser that wouldn’t die) Photo credit: oskay
  39. 39. 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 BUILDER 2.0 25
  40. 40. 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 BUILDER 2.0 25
  41. 41. 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 BUILDER 2.0 25
  42. 42. property: value; html>/**/body _property: value; * html voice-family: quot;quot;}quot;quot;; -property: value; voice-family:inherit; *:first-child+html
  43. 43. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Make smart decisions WEB BUILDER 2.0 27
  44. 44. 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 BUILDER 2.0 27
  45. 45. 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 BUILDER 2.0 27
  46. 46. 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 BUILDER 2.0 27
  47. 47. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Make smart decisions label:after { content: quot;:quot;; } WEB BUILDER 2.0 27
  48. 48. PROGRESSIVE ENHANCEMENT WITH CSS
  49. 49. QUESTIONS?
  50. 50. inspired?
  51. 51. PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT
  52. 52. Photo credit: andyburnfield proper planning...
  53. 53. ...can keep you from looking foolish
  54. 54. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Consider lala.com WEB BUILDER 2.0 36
  55. 55. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Without JavaScript WEB BUILDER 2.0 37
  56. 56. FUNDAMENTAL PROGRESSIVE ENHANCEMENT And looking at the markup... WEB BUILDER 2.0 38
  57. 57. Photo credit: spike55151
  58. 58. Photo credit: drp
  59. 59. listen? Photo credit: Giando
  60. 60. 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 BUILDER 2.0 42
  61. 61. or delegate? Photo credit: hebedesign
  62. 62. 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 BUILDER 2.0 44
  63. 63. style can get out of hand Photo credit: thus spake drake
  64. 64. 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 BUILDER 2.0 46
  65. 65. 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 BUILDER 2.0 47
  66. 66. 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 BUILDER 2.0 47
  67. 67. before you LEAP Photo credit: josh-n
  68. 68. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Look for methods function someFunction(){ if( !document.getElementsByTagName ) return; // code that uses document.getElementsByTagName() ... } WEB BUILDER 2.0 49
  69. 69. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Look for methods function someFunction(){ if( !document.getElementsByTagName || !document.getElementById ) return; /* code that uses document.getElementsByTagName() and document.getElementById() */ } WEB BUILDER 2.0 50
  70. 70. 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 BUILDER 2.0 51
  71. 71. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Look for identified elements function someFunction(){ if( !document.getElementById || !document.getElementById( 'content' ) ) return; // code that requires the presence of #content ... } WEB BUILDER 2.0 52
  72. 72. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Look for objects function someFunction(){ if( typeof( Prototype ) == 'undefined' ) return; // code that uses Prototype ... } WEB BUILDER 2.0 53
  73. 73. 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 BUILDER 2.0 54
  74. 74. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Look before you leap window.onload = function(){ if( document.getElementsByTagName && document.getElementById ){ someFunction(); } }; WEB BUILDER 2.0 55
  75. 75. PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT
  76. 76. QUESTIONS?
  77. 77. Photo credit: masstistraction it’s easier than this
  78. 78. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Example: Tab Interface Goal: to create a panel-based widget WEB BUILDER 2.0 59
  79. 79. 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 BUILDER 2.0 60
  80. 80. 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 BUILDER 2.0 60
  81. 81. 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 BUILDER 2.0 60
  82. 82. 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 BUILDER 2.0 60
  83. 83. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Static HTML with no style WEB BUILDER 2.0 61
  84. 84. FUNDAMENTAL PROGRESSIVE ENHANCEMENT A little typography WEB BUILDER 2.0 62
  85. 85. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Typography and color WEB BUILDER 2.0 63
  86. 86. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Static HTML with no style WEB BUILDER 2.0 64
  87. 87. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Static HTML with no style .tabbed WEB BUILDER 2.0 64
  88. 88. 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 BUILDER 2.0 65
  89. 89. 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 BUILDER 2.0 65
  90. 90. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Understanding the flow WEB BUILDER 2.0 66
  91. 91. FUNDAMENTAL PROGRESSIVE ENHANCEMENT The full experience WEB BUILDER 2.0 67
  92. 92. QUESTIONS?
  93. 93. 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 BUILDER 2.0 69
  94. 94. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Collapsing Form as HTML WEB BUILDER 2.0 70
  95. 95. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Collapsing Form with CSS WEB BUILDER 2.0 71
  96. 96. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Collapsing Form with CSS WEB BUILDER 2.0 72
  97. 97. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Collapsing Form with CSS WEB BUILDER 2.0 73
  98. 98. FUNDAMENTAL PROGRESSIVE ENHANCEMENT HTML hooks WEB BUILDER 2.0 74
  99. 99. FUNDAMENTAL PROGRESSIVE ENHANCEMENT HTML hooks form.collapsing WEB BUILDER 2.0 74
  100. 100. FUNDAMENTAL PROGRESSIVE ENHANCEMENT HTML hooks fieldset.optional WEB BUILDER 2.0 74
  101. 101. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Understanding the flow WEB BUILDER 2.0 75
  102. 102. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Collapsing Form with JS WEB BUILDER 2.0 76
  103. 103. QUESTIONS?
  104. 104. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Aaron Gustafson
  105. 105. 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

×