Search

Fundamental Progressive Enhancement [Web Design World Boston 2008]

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    2 Favorites & 1 Event

    Fundamental Progressive Enhancement [Web Design World Boston 2008] - Presentation 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. p\\roperty: 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

    + Aaron GustafsonAaron Gustafson, 11 months ago

    custom

    1198 views, 2 favs, 0 embeds more stats

    "Progressive enhancement" involves designing sites more

    More info about this document

    CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

    Go to text version

    • Total Views 1198
      • 1198 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 2
    • Downloads 33
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    Groups / Events

    -->
    Search
    RSS Feed
    What's new?

    © 2009 SlideShare Inc. All Rights Reserved