Your SlideShare is downloading. ×
0
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Fundamental Progressive Enhancement [Web Design World - Seattle 2009]

2,113

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 …

“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, Business
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,113
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
43
Comments
0
Likes
6
Embeds 0
No embeds

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. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Aaron Gustafson
  • 2. WHAT IS PROGRESSIVE ENHANCEMENT?
  • 3. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Graceful Degradation User Experience NEWER OLDER Browser Age WEB DESIGN WORLD 3
  • 4. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Progressive Enhancement User Experience BASIC ADVANCED Browser Capabilities WEB DESIGN WORLD 4
  • 5. it’s about service
  • 6. you wouldn’t do this...
  • 7. Photo credit: dansays but sites do...
  • 8. Photo credit: dansays but sites do...
  • 9. HOW DOES IT WORK?
  • 10. a little treat for everyone Photo credit: madam.furie
  • 11. (viewed another way)
  • 12. FUNDAMENTAL PROGRESSIVE ENHANCEMENT JavaScript CSS XHTML + HTTP only WEB DESIGN WORLD 13
  • 13. FUNDAMENTAL PROGRESSIVE ENHANCEMENT JavaScript some JavaScript CSS some CSS XHTML + HTTP only WEB DESIGN WORLD 13
  • 14. FUNDAMENTAL PROGRESSIVE ENHANCEMENT User Experience BASIC ADVANCED Browser Capabilities WEB DESIGN WORLD 14
  • 15. LEVELS OF SERVICE
  • 16. LEVELS OF SUPPORT
  • 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. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP WEB DESIGN WORLD 16
  • 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. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP WEB DESIGN WORLD 16
  • 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. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rely on your baseline robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP WEB DESIGN WORLD 17
  • 23. Photo credit: PetitPlat by sk_ you can still be creative
  • 24. every key we press a!ects user experience Photo credit: JasonRogers
  • 25. PROGRESSIVE ENHANCEMENT WITH CSS
  • 26. FUNDAMENTAL PROGRESSIVE ENHANCEMENT layout.css color.css main.css type.css WEB DESIGN WORLD 21
  • 27. FUNDAMENTAL PROGRESSIVE ENHANCEMENT type.css layout.css color.css WEB DESIGN WORLD 21
  • 28. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel="stylesheet" type="text/css" href="type.css" /> href="main.css" href="color.css" /> WEB DESIGN WORLD 22
  • 29. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel="stylesheet" type="text/css" href="type.css" /> <link rel="stylesheet" type="text/css" href="main.css" />/> href="layout.css" <link rel="stylesheet" type="text/css" href="color.css" /> WEB DESIGN WORLD 22
  • 30. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel="stylesheet" type="text/css" href="type.css" /> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="color.css" /> WEB DESIGN WORLD 23
  • 31. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel="stylesheet" type="text/css" href="type.css" /> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="color.css" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> WEB DESIGN WORLD 23
  • 32. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel="stylesheet" type="text/css" href="type.css" /> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="color.css" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> WEB DESIGN WORLD 23
  • 33. FUNDAMENTAL PROGRESSIVE ENHANCEMENT @import 'screen.css'; <link rel="stylesheet" type="text/css" href="type.css" /> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="color.css" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> WEB DESIGN WORLD 23
  • 34. FUNDAMENTAL PROGRESSIVE ENHANCEMENT @import 'screen.css';screen; 'screen.css' s; @import 'print.css' print; @import 'mobile.css' handheld; <link rel="stylesheet" type="text/css" href="type.css" /> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="color.css" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> WEB DESIGN WORLD 23
  • 35. (the browser that wouldn’t die) Photo credit: oskay
  • 36. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel="stylesheet" type="text/css" href="type.css" /> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="color.css" /> WEB DESIGN WORLD 25
  • 37. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel="stylesheet" type="text/css" href="type.css" /> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="color.css" /> <!--[if IE lte 7]> <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]--> WEB DESIGN WORLD 25
  • 38. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel="stylesheet" type="text/css" href="type.css" /> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="color.css" /> <!--[if IE lte 7]> <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]--> <!--[if IE lte 6]> <link rel="stylesheet" type="text/css" href="ie6.css" /> <![endif]--> WEB DESIGN WORLD 25
  • 39. property: value; html>/**/body _property: value; * html voice-family: ""}""; -property: value; voice-family:inherit; *:first-child+html
  • 40. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Make smart decisions WEB DESIGN WORLD 27
  • 41. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Make smart decisions <form id="contact-form" action="#" method="post"> <fieldset> <legend>Contact Us</legend> <p>Send us a message. All fields are required.</p> <ol> <li> <label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /> </li> <li> <label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /> </li> <li> <label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" cols="30"></textarea> </li> </ol> <button type="submit">Send It</button> </fieldset> </form> WEB DESIGN WORLD 27
  • 42. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Make smart decisions <form id="contact-form" action="#" method="post"> <fieldset> <legend>Contact Us</legend> <p>Send us a message. All fields are required.</p> <ol> <li> <label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /> </li> <li> <label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /> </li> <li> <label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" cols="30"></textarea> </li> </ol> <button type="submit">Send It</button> </fieldset> </form> WEB DESIGN WORLD 27
  • 43. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Make smart decisions <form id="contact-form" action="#" method="post"> <fieldset> <legend>Contact Us</legend> <p>Send us a message. All fields are required.</p> <ol> <li> <label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /> </li> <li> <label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /> </li> <li> <label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" cols="30"></textarea> </li> </ol> <button type="submit">Send It</button> </fieldset> </form> WEB DESIGN WORLD 27
  • 44. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Make smart decisions label:after { content: ":"; } WEB DESIGN WORLD 27
  • 45. QUESTIONS?
  • 46. inspired?
  • 47. PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT
  • 48. Photo credit: andyburnfield proper planning...
  • 49. ...can keep you from looking foolish
  • 50. FUNDAMENTAL PROGRESSIVE ENHANCEMENT robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP WEB DESIGN WORLD 34
  • 51. Photo credit: ambery
  • 52. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Consider lala.com WEB DESIGN WORLD 36
  • 53. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Without JavaScript WEB DESIGN WORLD 37
  • 54. FUNDAMENTAL PROGRESSIVE ENHANCEMENT And looking at the markup... WEB DESIGN WORLD 38
  • 55. Photo credit: spike55151
  • 56. Photo credit: drp
  • 57. listen? Photo credit: Giando
  • 58. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Event Listening window.onload = handleExternalLinks; function handleExternalLinks(){ var server = document.location.hostname; var anchors = document.getElementsByTagName("a"); var i, href; for( i=0; i < anchors.length; i++ ){ href = anchors[i].href; if( href.indexOf("http://" + server) == -1 && href.indexOf("https://" + server) == -1 ){ // HREF is not a file on my server anchors[i].onclick = function(){ newWin( this.href ); }; } } } WEB DESIGN WORLD 42
  • 59. or delegate? Photo credit: hebedesign
  • 60. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Event delegation document.getElementsByTagName( 'body' )[0].onclick = " 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. style can get out of hand Photo credit: thus spake drake
  • 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. FUNDAMENTAL PROGRESSIVE ENHANCEMENT No style before its time <div id="main" class="tabbed"> becomes <div id="main" class="tabbed-on"> WEB DESIGN WORLD 47
  • 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. before you LEAP Photo credit: josh-n
  • 66. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Look for methods function someFunction(){ if( !document.getElementsByTagName ) return; // code that uses document.getElementsByTagName() ... } WEB DESIGN WORLD 49
  • 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. 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. 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. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Look for objects function someFunction(){ if( typeof( Prototype ) == 'undefined' ) return; // code that uses Prototype ... } WEB DESIGN WORLD 53
  • 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. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Look before you leap window.onload = function(){ if( document.getElementsByTagName && document.getElementById ){ someFunction(); } }; WEB DESIGN WORLD 55
  • 73. QUESTIONS?
  • 74. Photo credit: masstistraction it’s easier than this
  • 75. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Example: Tab Interface Goal: to create a panel-based widget WEB DESIGN WORLD 59
  • 76. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Traditional approach <h1>Pumpkin Pie</h1> <div class="container"> <div class="section"> <h2>Overview</h2> <img src="pie.jpg" alt=""> <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="tabs"> <li><a href="#">Overview</a></li> <li><a href="#">Ingredients</a></li> <li><a href="#">Directions</a></li> <li><a href="#">Nutrition</a></li> </ul> </div> WEB DESIGN WORLD 60
  • 77. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Static HTML with no style WEB DESIGN WORLD 61
  • 78. FUNDAMENTAL PROGRESSIVE ENHANCEMENT A little typography WEB DESIGN WORLD 62
  • 79. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Typography and color WEB DESIGN WORLD 63
  • 80. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Static HTML with no style WEB DESIGN WORLD 64
  • 81. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Static HTML with no style .tabbed WEB DESIGN WORLD 64
  • 82. FUNDAMENTAL PROGRESSIVE ENHANCEMENT The actual source <h1>Pumpkin Pie</h1> <div class="tabbed"> <h2>Overview</h2> <img src="pie.jpg" alt="" /> <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="inch">in</abbr>) unbaked deep dish pie crust</li> <li>! cup white sugar</li> <li>1 <abbr title="teaspoon">tsp</abbr> ground cinnamon</li> ... </ul> <h2>Directions</h2> ... </div> WEB DESIGN WORLD 65
  • 83. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Understanding the flow WEB DESIGN WORLD 66
  • 84. FUNDAMENTAL PROGRESSIVE ENHANCEMENT The full experience WEB DESIGN WORLD 67
  • 85. QUESTIONS?
  • 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. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Collapsing Form as HTML WEB DESIGN WORLD 70
  • 88. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Collapsing Form with CSS WEB DESIGN WORLD 71
  • 89. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Collapsing Form with CSS WEB DESIGN WORLD 72
  • 90. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Collapsing Form with CSS WEB DESIGN WORLD 73
  • 91. FUNDAMENTAL PROGRESSIVE ENHANCEMENT HTML hooks form.collapsing WEB DESIGN WORLD 74
  • 92. FUNDAMENTAL PROGRESSIVE ENHANCEMENT HTML hooks fieldset.optional WEB DESIGN WORLD 74
  • 93. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Understanding the flow WEB DESIGN WORLD 75
  • 94. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Collapsing Form with JS WEB DESIGN WORLD 76
  • 95. QUESTIONS?
  • 96. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Aaron Gustafson
  • 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

×