Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Adaptive Web Design Workshop [WebVisions NYC 2012]

62 views

Published on

In this Workshop, Aaron Gustafson will teach you everything you need to know about modern web design with progressive enhancement. Whether you are a novice or an experienced professional, you will walk away from this workshop with a greater understanding of what progressive enhancement is and how to implement this philosophy in your own work.

During the course of the workshop, Aaron will mentor you on best practices as you work together to build a web page from the content out.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Adaptive Web Design Workshop [WebVisions NYC 2012]

  1. 1. Hello.http://is.gd/AWD_WV_NYC_2012
  2. 2. ADAPTIVE WEB DESIGN WORKSHOP The Agenda๏ Progressive Enhancement ‣ vs Graceful Degradation ‣ How & Why It Works๏ Content & Organization๏ Semantics ‣ HTML5 ‣ Microformats 2
  3. 3. ADAPTIVE WEB DESIGN WORKSHOP The Agenda๏ Design ‣ Parsing Errors ‣ Designing in Layers ‣ Adaptive (& Responsive) Layouts ‣ “Mobile First”๏ Interactivity ‣ Unobtrusive JavaScript ‣ Adaptive Interfaces ‣ Hijax 3
  4. 4. ADAPTIVE WEB DESIGN WORKSHOP The Agenda๏ Accessibility ‣ Design Considerations ‣ ARIA 4
  5. 5. VillageReach.org
  6. 6. ProgressiveEnhancement
  7. 7. ?
  8. 8. Technological restrictions
  9. 9. MCMLXXVII (that’s 1977)
  10. 10. HTML CSS
  11. 11. fault tolerancen. a system’s ability to continue tooperate when it encounters andunexpected error.
  12. 12. Browsers IGNORE what they don’t understand
  13. 13. GracefulDegradation
  14. 14. ModernBrowsers Older Browsers
  15. 15. ModernBrowsers Older Browsers
  16. 16. ProgressiveEnhancement
  17. 17. ProgressiveGraceful Degradation Enhancement
  18. 18. Content
  19. 19. Content
  20. 20. :-)
  21. 21. Ooooh.Shiny!
  22. 22. ProgressiveEnhancement ISN’T about browsers.
  23. 23. Browsers and technologiesCOME AND GO
  24. 24. Don’t lose sightof your USERS
  25. 25. User Experience BASIC ADVANCED Browser Capabilities
  26. 26. User Experience BASIC ADVANCED Browser Capabilities Content
  27. 27. User Experience Semantics BASIC ADVANCED Browser Capabilities Content
  28. 28. User Experience Design Semantics BASIC ADVANCED Browser Capabilities Content
  29. 29. User Experience Interactivity Design Semantics BASIC ADVANCED Browser Capabilities Content
  30. 30. User Experience Accessibility Interactivity Design Semantics BASIC ADVANCED Browser Capabilities Content
  31. 31. User Experience ARIA JavaScript CSS HTML BASIC ADVANCED Browser Capabilities Text & HTTP
  32. 32. User Experience BASIC ADVANCED Browser Capabilities Content
  33. 33. Content is WHYwe buildwebsites
  34. 34. Clear,well-writtenprose is key.
  35. 35. Organize & prioritizeyour content
  36. 36. Don’tobscurecontent.
  37. 37. Header NavFeatures Extra SocialPrograms Newsletter News Footer
  38. 38. HeaderFeatures NavPrograms Extra News Social Newsletter Footer
  39. 39. User Experience Semantics BASIC ADVANCED Browser Capabilities Content
  40. 40. ADAPTIVE WEB DESIGN WORKSHOPSemantics 101 <p>HTML5 introduces several <em>really</em> useful elements and a ton of new APIs.</p> <p>Please fill out the form below. <strong>Note: all fields are required.</strong></p> <p>I like to work with markup languages because <strong>they are simple and easy to read</strong>. They also have that certain <i lang="fr" title="I don’t know what">je ne sais quoi</i>.</p>
  41. 41. ADAPTIVE WEB DESIGN WORKSHOPSemantics 101 small
  42. 42. ADAPTIVE WEB DESIGN WORKSHOPSemantics 101 hr
  43. 43. ADAPTIVE WEB DESIGN WORKSHOPOrganization <figure id="fig-1"> <img src="photo.jpeg" alt=""/> <figcaption>Photo of Albert Einstein</figcaption> </figure> <figure id="fig-2"> <table> <caption>2011 Forecast Earnings</caption> <!-- a bunch of data --> </table> </figure>
  44. 44. ADAPTIVE WEB DESIGN WORKSHOPOrganization <section> <!-- pretty much anything can go here --> </section> <article> <!-- pretty much anything can go here --> </article>
  45. 45. section
  46. 46. section > article
  47. 47. article
  48. 48. article > section
  49. 49. ADAPTIVE WEB DESIGN WORKSHOPOrganization <header> <!-- titles, etc. go here --> </header> <footer> <!-- meta/supplementary information goes here --> </footer>
  50. 50. header
  51. 51. footer
  52. 52. article
  53. 53. article > header
  54. 54. article
  55. 55. article > footer
  56. 56. ADAPTIVE WEB DESIGN WORKSHOPOrganization <nav> <ol> <li><a href="#details">Details</a></li> <li><a href="#lodging">Lodging</a></li> <li><a href="#location">Location</a></li> <li><a href="#topics">Topics</a></li> <li><a href="#contact">Contact Us</a></li> </ol> <p><a href="register">Register Now</a> <b>Only 5 spaces left</b></p> </nav>
  57. 57. nav
  58. 58. nav
  59. 59. ADAPTIVE WEB DESIGN WORKSHOPImplicit sections (HTML4) <h1> HTML5 <p> HTML5 is currently under development... <p> Like its immediate predecessors, HTML... <h2> W3C standardization process <p> The Web Hypertext Application... <p> The HTML5 specification... <p> According to the W3C timetable... <p> Ian Hickson, editor of the HTML5... <h2> Markup <p> HTML5 introduces a number of... <p> The HTML5 syntax is no longer... 1 HTML5 1.1 W3C standardization process 1.2 Markup
  60. 60. ADAPTIVE WEB DESIGN WORKSHOPExplicit sections (HTML5) <h1> HTML5 <p> HTML5 is currently under development... <p> Like its immediate predecessors, HTML... <h2> W3C standardization process section <p> The Web Hypertext Application... <p> The HTML5 specification... <p> According to the W3C timetable... <p> Ian Hickson, editor of the HTML5... <h2> Markup section <p> HTML5 introduces a number of... <p> The HTML5 syntax is no longer... 1 HTML5 1.1 W3C standardization process 1.2 Markup
  61. 61. ADAPTIVE WEB DESIGN WORKSHOPExplicit sections (HTML5) <h1> HTML5 <p> HTML5 is currently under development... <p> Like its immediate predecessors, HTML... <h1> W3C standardization process section <p> The Web Hypertext Application... <p> The HTML5 specification... <p> According to the W3C timetable... <p> Ian Hickson, editor of the HTML5... <h1> Markup section <p> HTML5 introduces a number of... <p> The HTML5 syntax is no longer... 1 HTML5 1.1 W3C standardization process 1.2 Markup
  62. 62. ADAPTIVE WEB DESIGN WORKSHOPExplicit sections (HTML5) <h1> HTML5 <p> HTML5 is currently under development... <p> Like its immediate predecessors, HTML... <h4> W3C standardization process section <p> The Web Hypertext Application... <p> The HTML5 specification... <p> According to the W3C timetable... <p> Ian Hickson, editor of the HTML5... <h6> Markup section <p> HTML5 introduces a number of... <p> The HTML5 syntax is no longer... 1 HTML5 1.1 W3C standardization process 1.2 Markup
  63. 63. ADAPTIVE WEB DESIGN WORKSHOP Sections๏ section๏ article๏ aside๏ footer๏ header๏ nav 84
  64. 64. ADAPTIVE WEB DESIGN WORKSHOPOutline limitations in HTML4 <h1> Title <h2> Subtitle <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... 1 Title 1.1 Subtitle
  65. 65. ADAPTIVE WEB DESIGN WORKSHOPHeading groups (HTML5) hgroup <h1> Title <h2> Subtitle <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... 1 Title
  66. 66. ADAPTIVE WEB DESIGN WORKSHOPAside: rooted sections <h1> Title <p> Text content continues... <p> Text content continues... <h2> Section heading <p> Text content continues... <blockquote> <h2> Rooted heading <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... 1 Title 1.1 Section heading
  67. 67. ADAPTIVE WEB DESIGN WORKSHOP Sectioning roots๏ body๏ blockquote๏ details๏ fieldset๏ figure๏ td 88
  68. 68. ADAPTIVE WEB DESIGN WORKSHOPDates & Times <input type="date" name="dob"/>
  69. 69. ADAPTIVE WEB DESIGN WORKSHOPNumbers <input type="number" name="foo"/> <input type="range" min="1" max="11" name="foo"/>
  70. 70. ADAPTIVE WEB DESIGN WORKSHOPFormat validation <input type="email" …/> <input type="url" …/>
  71. 71. ADAPTIVE WEB DESIGN WORKSHOPFormat validation <input type="text" pattern="d{6}w{3}" placeholder="6 digits followed by 3 letters" .../>
  72. 72. Ad-hocSemantics
  73. 73. ADAPTIVE WEB DESIGN WORKSHOPClassi cation
  74. 74. ADAPTIVE WEB DESIGN WORKSHOPIdenti cation
  75. 75. ADAPTIVE WEB DESIGN WORKSHOPMicroformats <section class="vcard"> <figure> <img class="photo" src="aaron-gustafson.jpg" alt=""/> </figure> <h1 class="fn">Aaron Gustafson</h1> … <p>Aaron … is <b class="role">Group Manager</b> of the <a class="org" href="http://webstandards.org">Web Standards Project (WaSP)</a> ….</p> </section>
  76. 76. Header
  77. 77. ADAPTIVE WEB DESIGN WORKSHOPSemantics <div id="header"> <a href="#donate" class="donate-link" title="Click here to view our donation options">Donate</a> <a href="http://villagereach.org/feed/" class="rss-link" title="View our RSS Feed">RSS Feed</a> <div id="site-title"> <a href="http://villagereach.org" title="Village Reach: Home"> <span>Village Reach</span> </a> </div> </div><!-- #header -->
  78. 78. FeaturesPrograms News
  79. 79. ADAPTIVE WEB DESIGN WORKSHOPSemantics <div class="entry-content entry"> <!-- Features --> <div class="boxes three home"> <!-- Programs --> </div> <div id="latestNews"> <!-- Latest News --> </div> </div>
  80. 80. Nav
  81. 81. ADAPTIVE WEB DESIGN WORKSHOPSemantics <div id="hybrid-search-3" class="widget search widget-search"> <div class="widget-inside"> <form method="get" class="search-form" id="search-form" action="http://villagereach.org/"> <!--Search Form --> </form><!-- .search-form --> </div> </div> <div id="navigation"> <div id="page-nav" class="page-nav"> <ul class="menu sf-menu"> <!-- Navigation --> </ul> </div> </div><!-- #navigation -->
  82. 82. Extra SocialNewsletter
  83. 83. ADAPTIVE WEB DESIGN WORKSHOPSemantics <div id="text-8" class="widget widget_text widget-widget_text"> <div class="widget-inside"> <!-- Extra --> </div> </div> <div id="text-7" class="widget widget_text widget-widget_text"> <div class="widget-inside"> <!-- Social --> </div> </div> <div id="mc_signup_container"> <!-- Newsletter --> </div>
  84. 84. Footer
  85. 85. ADAPTIVE WEB DESIGN WORKSHOPSemantics <div id="footer-container"> <div id="footer"> <p class="copyright">Copyright © 2011 <a class="site-link" href="http://villagereach.org" title="VillageReach" rel="home"><span>VillageReach</span></a>. - All rights reserved.</p> </div><!-- #footer --> </div><!-- #footer-container -->
  86. 86. User Experience Design Semantics BASIC ADVANCED Browser Capabilities Content
  87. 87. ADAPTIVE WEB DESIGN WORKSHOPParsing errors p{ color: red; }
  88. 88. ADAPTIVE WEB DESIGN WORKSHOPParsing errors p{ color: red; }
  89. 89. ADAPTIVE WEB DESIGN WORKSHOPParsing errors p{ color: red; font-weight: bold; }
  90. 90. ADAPTIVE WEB DESIGN WORKSHOPParsing errors p{ color: red; font-weight: bold; }
  91. 91. ADAPTIVE WEB DESIGN WORKSHOPParsing errors p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }
  92. 92. ADAPTIVE WEB DESIGN WORKSHOPParsing errors html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }
  93. 93. ADAPTIVE WEB DESIGN WORKSHOPParsing errors @-moz-document url-prefix() { html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); } }
  94. 94. #intro { /* Basic Layout */}/* ... */body[id=css-zen-garden] #intro { /* Advanced Layout */}
  95. 95. #intro { /* Basic Layout */}/* ... */[foo], #intro { /* Advanced Layout */}
  96. 96. ADAPTIVE WEB DESIGN WORKSHOPParsing errors @import not-for-IE7-or-below.css screen; @media screen, print, refrigerator { /* IE will get these rules */ }
  97. 97. ADAPTIVE WEB DESIGN WORKSHOPOrganization design
  98. 98. ADAPTIVE WEB DESIGN WORKSHOPOrganization type color layout
  99. 99. ADAPTIVE WEB DESIGN WORKSHOPOrganization /* =Typography */ img { display: block; } /* =Layout */ @media screen { .frame .inner { border: 10px solid; } } /* =Color */ .frame .inner { background-color: rgb(227, 222, 215); border-color: rgb(227, 222, 215); }
  100. 100. ADAPTIVE WEB DESIGN WORKSHOPOrganization type.css layout.css main.css color.css
  101. 101. ADAPTIVE WEB DESIGN WORKSHOPOrganization {embed="styles/typography"} @media screen {   {embed="styles/layout-screen"} } {embed="styles/color"} Example using ExpressionEngine embed tags
  102. 102. ADAPTIVE WEB DESIGN WORKSHOPOrganization {embed="styles/reset"} {embed="styles/typography"} @media screen {   {embed="styles/layout-screen"} } @media print {   {embed="styles/layout-print"} } {embed="styles/color"} {embed="styles/effects"} Example using ExpressionEngine embed tags
  103. 103. ADAPTIVE WEB DESIGN WORKSHOPMonkey-patching <link rel="stylesheet" href="main.css"/> <!--[if IE 9]><link rel="stylesheet" href="ie9.css"/><![endif]--> <!--[if lte IE 8]><link rel="stylesheet" href="ie8.css"/><![endif]--> <!--[if lte IE 7]><link rel="stylesheet" href="ie7.css"/><![endif]--> <!--[if lte IE 6]><link rel="stylesheet" href="ie6.css"/><![endif]-->
  104. 104. ADAPTIVE WEB DESIGN WORKSHOPMonkey-patching @-moz-document url-prefix() { /* GENERATED CONTENT - FF3 doesnt allow positioning */ #extra-mile:before { content: ; } #extra-mile:first-of-type:before { content: url(extra-mile-sign.png); } }
  105. 105. ADAPTIVE WEB DESIGN WORKSHOPMedia Queries
  106. 106. ADAPTIVE WEB DESIGN WORKSHOP@Media blocks @media screen { /* Styles for screen media only */ }
  107. 107. ADAPTIVE WEB DESIGN WORKSHOP@Media blocks+ @media screen and (max-width:450px) { /* Styles for screen media when browser is 450px wide or below */ }
  108. 108. ADAPTIVE WEB DESIGN WORKSHOPDon’t do this @media screen and (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px), screen and (max-device-width:480px) and (orientation:landscape), screen and (min-device-width:481px) and (orientation:portrait) { /* Layout for narrower desktop (below 990px) or iPhone running iOS 3 (or equivalent) or iPhone running iOS 4 (or equivalent) in “landscape” view or iPad (or equivalent) in “portrait” view */ }
  109. 109. ADAPTIVE WEB DESIGN WORKSHOPMobile First w/ media queries /* Universal Layout */ @media screen { /* Styles for all screens */ } @media screen and (min-width:481px) { /* Styles for all screens 480px+ width */ } @media screen and (min-width:754px) { /* Styles for all screens 754px+ width */ }
  110. 110. ADAPTIVE WEB DESIGN WORKSHOPMobile First w/ media queries #hd { background: url(hd-bg-small.png) repeat-x 50% 50%; } #hd .logo a { background: url(logo-small.png) no-repeat 50% 0; display: block; width: 240px; height: 109px; /* … */ } @media screen and (min-width: 481px) { #hd { background: url(hd-bg.png) no-repeat 50% 52px; } #hd .logo a { background-image: url(logo.png); width: 342px; height: 155px; } }
  111. 111. Header NavFeatures Extra SocialPrograms Newsletter News Footer
  112. 112. User Experience Interactivity Design Semantics BASIC ADVANCED Browser Capabilities Content
  113. 113. Photo credit: spike55151
  114. 114. ADAPTIVE WEB DESIGN WORKSHOPSins of our past <a href="javascript:someFunction();">some text</a> <a href="javascript:void(null);" onclick="someFunction();">some text</a> <a href="#" onclick="someFunction();">some text</a>
  115. 115. ADAPTIVE WEB DESIGN WORKSHOPA minor improvement <a href="http://offsite.com" onclick="newWin( this.href ); return false;"> some text</a>
  116. 116. Photo credit: Giando
  117. 117. ADAPTIVE WEB DESIGN WORKSHOPEvent listeners 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 ); }; } } }
  118. 118. Photo credit: hebedesign
  119. 119. ADAPTIVE WEB DESIGN WORKSHOPListen and delegate 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 ); } }
  120. 120. Photo credit: ambery
  121. 121. Without JavaScript
  122. 122. With JavaScript
  123. 123. ADAPTIVE WEB DESIGN WORKSHOPAnchor-include patternSource of blog entry page <a href="/archives/{entry_date format=%Y/%m/%d}/{url_title}/ comments/#comments" data-replace="/comments/{url_title}/">View comments on this entry and add your own</a> {if segment_4=="comments"} <section id="comments" class="focal"> {embed="inc/.comments" url_title="{url_title}"} </section> {if:else} {comment_loader} {/if} Examples use ExpressionEngine tags
  124. 124. ADAPTIVE WEB DESIGN WORKSHOPAnchor-include patternSource of /comments/{url_title} (technically /pages/comments/{url_title}) {embed="inc/.comments" url_title="{segment_3}"} Example uses ExpressionEngine tags
  125. 125. ADAPTIVE WEB DESIGN WORKSHOPAnchor-include pattern https://gist.github.com/b976b67e88ffbfc9f125 $.fn.ajaxInclude = function(){ return this.each(function() { var $el = $( this ), target = $el.data( target ), $targetEl = target && $( target ) || $el, methods = [ append, replace, before, after ], ml = methods.length, method, url; while ( ml-- ) { method = methods[ ml ]; if ( $el.is( [data- + method + ] ) ) { url = $el.data( method ); break; } } if ( method == replace ) { method += With; } if ( url && method ) { $.get( url, function( data ){ $el.trigger( ajaxInclude, [$targetEl, data] ); $targetEl[ method ]( data ); }); } }); };
  126. 126. ADAPTIVE WEB DESIGN WORKSHOPAnchor-include patternReplace: <a data-replace="articles/latest/fragment" href="...">Latest Articles</a>Before: <a data-before="articles/latest/fragment" href="...">Latest Articles</a>After: <a data-after="articles/latest/fragment" href="...">Latest Articles</a>
  127. 127. ADAPTIVE WEB DESIGN WORKSHOPAnchor-include pattern $("[data-append],[data-replace],”+ “[data-after],[data-before]").ajaxInclude();
  128. 128. ADAPTIVE WEB DESIGN WORKSHOP 162
  129. 129. JavaScript CSS
  130. 130. ADAPTIVE WEB DESIGN WORKSHOPRemember stu like this? <a href="foo.html" style="color:blue;" onmouseover="this.style.color=red" onmouseout="this.style.color=blue">Foo</a>
  131. 131. ADAPTIVE WEB DESIGN WORKSHOPRemember stu like this? <a href="foo.html" style="color:blue;" onmouseover="this.style.color=red" onmouseout="this.style.color=blue">Foo</a> a, a:link, a:visited { color: blue; } a:hover { color: red; }
  132. 132. ADAPTIVE WEB DESIGN WORKSHOPIsn’t this the same? for( i=0; i<objects.length; i++){ objects[i].style.display = none; }
  133. 133. ADAPTIVE WEB DESIGN WORKSHOPSmall improvement for( i=0; i<objects.length; i++){ objects[i].style.position = absolute; objects[i].style.left = -999em; }
  134. 134. ADAPTIVE WEB DESIGN WORKSHOPSeparation for( i=0; i<objects.length; i++){ objects[i].addClassName( hidden ); } .hidden { position: absolute; left: -999em; }
  135. 135. ADAPTIVE WEB DESIGN WORKSHOP Maintenance options๏ external style rules added to your CSS le (by hand)๏ external CSS le added to the document (by hand)๏ external CSS le added to the document via script๏ embedding CSS in the document via script 168
  136. 136. ADAPTIVE WEB DESIGN WORKSHOPOption 1: Add by hand /* =START WickedCool Script CSS (do not remove) */ .wicked { color: red; font: bold 4em/2 "Comic Sans"; } .cool { color: blue; font: bold 4em/2 "Comic Sans"; } /* =END WickedCool Script CSS */
  137. 137. ADAPTIVE WEB DESIGN WORKSHOPOption 2: Include by hand <script src="WickedCool.js"></script> <link rel="stylesheet" href="WickedCool.css" />
  138. 138. ADAPTIVE WEB DESIGN WORKSHOPOption 2: Include by hand <script src="WickedCool.js"></script> <link rel="stylesheet" href="WickedCool.css" /> <head> <!-- … --> <link rel="stylesheet" href="WickedCool.css" /> </head> <body> <!-- … --> <script src="WickedCool.js"></script> </body>
  139. 139. ADAPTIVE WEB DESIGN WORKSHOPOption 3: Scripted include function FindPath( filename ) { var path = false; var scripts = document.getElementsByTagName( script ); for( var i=0; i<scripts.length; i++ ) { if( scripts[i].getAttribute( src ) && scripts[i].getAttribute( src ) .indexOf( filename ) != -1 ) { path = scripts[i] .getAttribute( src ) .replace( new RegExp( filename ), ); break; } } return path; }
  140. 140. ADAPTIVE WEB DESIGN WORKSHOPOption 3: Scripted include var WickedCool = { jsFile: WickedCool.js, cssFile: WickedCool.css, initialize: function(){ // determine the path var path = FindPath( this.jsFile ); // add the CSS file var css = document.createElement( link ); css.setAttribute( rel, stylesheet ); css.setAttribute( href, path + this.cssFile ); document.getElementsByTagName( head )[0] .appendChild( css ); // do the rest of the wicked cool stuff } };
  141. 141. ADAPTIVE WEB DESIGN WORKSHOPOption 4: Scripted embed function addCSS( styles ) { var el = document.createElement( style ); el.setAttribute( type, text/css ); if ( el.styleSheet ) { el.styleSheet.cssText = styles; } else { el.appendChild( document.createTextNode( styles ) ); } document.getElementsByTagName( head )[0] .appendChild( el ); }
  142. 142. ADAPTIVE WEB DESIGN WORKSHOPOption 4: Scripted embed var WickedCool = { _css: .wicked { color: red; + font: bold 4em/2 "Comic Sans"; } + .cool { color: blue; + font: bold 4em/2 "Comic Sans"; }, initialize: function() { // add the CSS addCSS( this._css ); // do the rest of the wicked cool stuff } }; based on the work of Nicholas Zakas
  143. 143. Apply No StyleBefore Its Time
  144. 144. ADAPTIVE WEB DESIGN WORKSHOPHow do we do that? .TabInterface-folder { /* ... */ } #TabInterface .tab { /* ... */ } #TabInterface .tab.active { /* ... */ } 176
  145. 145. ADAPTIVE WEB DESIGN WORKSHOPHow do we do that? Tactic Default Activatedadd “-on” to the class .tabbed .tabbed-onadd an activation class .auto-submit .auto-submit.activechange the form of the .replace-me .replacedclass
  146. 146. ADAPTIVE WEB DESIGN WORKSHOPAdaptive UI
  147. 147. ADAPTIVE WEB DESIGN WORKSHOPAdaptive UI
  148. 148. ADAPTIVE WEB DESIGN WORKSHOPSwapping content var trigger = 659; // … function toggleDisplay() { var width = $window.width(); if ( showing == old && width <= trigger ) { $old_nav.replaceWith($new_nav); showing = new; } else if ( showing == new && width > trigger ) { $new_nav.replaceWith($old_nav); showing = old; } }
  149. 149. ADAPTIVE WEB DESIGN WORKSHOPSemantics <ul> <li> <a href="#"><img src="…" alt="" /></a> <span>Your new online source for information on our progress</span> </li> <li> <a href="#"><img src="…" alt="" /></a> <span>VillageReach Announces Mozambique National Expansion</span> </li> <li> <a href="#"><img src="…" alt="" /></a> <span>VillageReachs innovative approach for last mile communities</span> </li> … </ul>
  150. 150. ADAPTIVE WEB DESIGN WORKSHOPStyle? <ul style=”height: 300px;”> <li style=”height: 300px;” > <a href="#"><img src="…" alt="" /></a> <span>Your new online source for information on our progress</span> </li> <li style=”height: 300px;” > <a href="#"><img src="…" alt="" /></a> <span>VillageReach Announces Mozambique National Expansion</span> </li> <li style=”height: 300px;” > <a href="#"><img src="…" alt="" /></a> <span>VillageReachs innovative approach for last mile communities</span> </li> … </ul>
  151. 151. ADAPTIVE WEB DESIGN WORKSHOPStyle? <ul class="jcarousel-skin-vr" style=”height: 300px;”> <li style=”height: 300px;”> <a href="#"><img src="…" alt="" /></a> <span>Your new online source for information on our progress</span> </li> <li style=”height: 300px;”> <a href="#"><img src="…" alt="" /></a> <span>VillageReach Announces Mozambique National Expansion</span> </li> <li style=”height: 300px;”> <a href="#"><img src="…" alt="" /></a> <span>VillageReachs innovative approach for last mile communities</span> </li> … </ul>
  152. 152. ADAPTIVE WEB DESIGN WORKSHOPScript <ul id="vr-carousel"> <li> <a href="#"><img src="…" alt="" /></a> <span>Your new online source for information on our progress</span> </li> <li> <a href="#"><img src="…" alt="" /></a> <span>VillageReach Announces Mozambique National Expansion</span> </li> <li> <a href="#"><img src="…" alt="" /></a> <span>VillageReachs innovative approach for last mile communities</span> </li> … </ul>
  153. 153. ADAPTIVE WEB DESIGN WORKSHOPScript $j(#vr-carousel).jcarousel({ auto: 6, visible: 1, animation: 0, wrap: both, scroll: 1, initCallback: vrCarousel_initCallback, itemFirstInCallback: vrCarousel_itemFirstInCallback, itemFirstInCallback: vrCarousel_fadeIn, itemFirstOutCallback: vrCarousel_fadeOut });
  154. 154. ADAPTIVE WEB DESIGN WORKSHOPScript function vrCarousel_initCallback( carousel, item, idx, state ) { // Pause autoscrolling if the user moves // with the cursor over the clip. carousel.clip.hover(function() { carousel.stopAuto(); }, function() { carousel.startAuto(); }); $j(.jcarousel-item).css(opacity, 0); };
  155. 155. ADAPTIVE WEB DESIGN WORKSHOPScript function vrCarousel_initCallback( carousel, item, idx, state ) { var $i = carousel.list.find(‘img’), h = 0; // get the max h $i.each(function(){ var test = $j(this).height(); if ( test > h ){ h = test; } }); // … carousel.list.height(h); $j(.jcarousel-item).css({ opacity: 0, height: h }); };
  156. 156. http://flex.madebymufffin.com
  157. 157. User Experience Accessibility Interactivity Design Semantics BASIC ADVANCED Browser Capabilities Content
  158. 158. Accessibility
  159. 159. “special needs” can be CONTEXTUAL
  160. 160. ADAPTIVE WEB DESIGN WORKSHOPWhat is it?
  161. 161. ADAPTIVE WEB DESIGN WORKSHOPWhat is it? <button>Tweet</button> <a class=”button”>Tweet</a>
  162. 162. ADAPTIVE WEB DESIGN WORKSHOPWhat is it? <button>Tweet</button> <a class=”button”>Tweet</a>
  163. 163. ADAPTIVE WEB DESIGN WORKSHOPWhat is it?
  164. 164. ADAPTIVE WEB DESIGN WORKSHOPWhat is it? <button>Search Mail</button> <div>Search Mail</div>
  165. 165. ADAPTIVE WEB DESIGN WORKSHOPWhat is it? <button>Search Mail</button> <div>Search Mail</div>
  166. 166. ADAPTIVE WEB DESIGN WORKSHOPARIA maps the OS to the web
  167. 167. Semantics+
  168. 168. ADAPTIVE WEB DESIGN WORKSHOPAll the web’s a play… <section id="main" role="main"> <!-- The primary content for the page would go here --> </section>
  169. 169. <header role="banner">
  170. 170. <nav role="navigation">
  171. 171. <form role="search">
  172. 172. <section role="main">
  173. 173. <footer role="contentinfo">
  174. 174. <nav role="navigation">
  175. 175. <nav role="navigation">
  176. 176. ADAPTIVE WEB DESIGN WORKSHOPSemantic comparison Ad-hoc ARIA Role HTML5 #header, #top banner header (kind of) #main, #content main none #extra, .sidebar complementary, note aside #footer, #bottom contentinfo footer #nav navigation nav .hentry article article
  177. 177. ADAPTIVE WEB DESIGN WORKSHOPThese are the droids you seek <span role="button">OK</span> <div role="alert"> <p>Something went wrong.</p> </div> <div role="alertdialog"> <p>Something went wrong.</p> <img src="x.png" alt="dismiss" role="button" /> </div>
  178. 178. ADAPTIVE WEB DESIGN WORKSHOPWhat is it? <a role=”button”>Tweet</a> class=”button”>Tweet</a>
  179. 179. ADAPTIVE WEB DESIGN WORKSHOPWhat is it? <a role=”button”>Tweet</a>
  180. 180. ADAPTIVE WEB DESIGN WORKSHOPWhat’s happening? B B (off) (on) <span> <img src="bold-off.png" alt="bold" /> </span> <span> <img src="bold-on.png" alt="bold" /> </span>
  181. 181. ADAPTIVE WEB DESIGN WORKSHOPWhat’s happening? B B (off) (on) <span> <img src="bold-off.png" alt="not bold" /> </span> <span> <img src="bold-on.png" alt="bold" /> </span>
  182. 182. ADAPTIVE WEB DESIGN WORKSHOPWhat’s happening? B B (off) (on) <span role="button" aria-pressed="false"> <img src="bold-off.png" alt="not bold" /> </span> <span role="button" aria-pressed="true"> <img src="bold-on.png" alt="bold" /> </span>
  183. 183. ADAPTIVE WEB DESIGN WORKSHOPComplex interfaces
  184. 184. ADAPTIVE WEB DESIGN WORKSHOPTraditional approach <h1>Pumpkin Pie</h1> <div class="container"> <div class="section"> <h2>Overview</h2> <img src="pie.jpg" alt=""> <p>Whether youre 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>
  185. 185. ADAPTIVE WEB DESIGN WORKSHOPCleaner approach <h1>Pumpkin Pie</h1> <div class="tabbed"> <h2>Overview</h2> <img src="pie.jpg" alt="" /> <p>Whether youre 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> <!-- ... --> </ul> <h2>Directions</h2> <!-- ... --> </div>
  186. 186. ADAPTIVE WEB DESIGN WORKSHOPCleaner approach <h1>Pumpkin Pie</h1> <div class="tabbed"> <h2>Overview</h2> <img src="pie.jpg" alt="" /> <p>Whether youre 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> <!-- ... --> </ul> <h2>Directions</h2> <!-- ... --> </div>
  187. 187. ADAPTIVE WEB DESIGN WORKSHOPNo JS, basic CSS
  188. 188. ADAPTIVE WEB DESIGN WORKSHOPWidget logic Split Page the content & make some tabs JS? Yes No
  189. 189. ADAPTIVE WEB DESIGN WORKSHOPOn DOM ready <h1>Pumpkin Pie</h1> <div class="tabbed-on"> <section> <h2>Overview</h2> <img src="pie.jpg" alt=""> <p>Whether youre hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> <!-- ... --> </section> <!-- ... --> <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>
  190. 190. ADAPTIVE WEB DESIGN WORKSHOPAdding ARIA role="tablist" 232
  191. 191. ADAPTIVE WEB DESIGN WORKSHOPAdding ARIA role="tab" aria-selected="true" aria-controls="folder-1"
  192. 192. ADAPTIVE WEB DESIGN WORKSHOPAdding ARIA role="tab" aria-selected="false" aria-controls="folder-4"
  193. 193. ADAPTIVE WEB DESIGN WORKSHOPAdding ARIA role="tabpanel" aria-hidden="false" aria-labelledby="folder-1-tab"
  194. 194. ADAPTIVE WEB DESIGN WORKSHOPAdding ARIA role="application" aria-activedescendant="folder-1"
  195. 195. ADAPTIVE WEB DESIGN WORKSHOPResult!
  196. 196. ADAPTIVE WEB DESIGN WORKSHOPHey! Over here!
  197. 197. ADAPTIVE WEB DESIGN WORKSHOPHey! Over here! <input class="tweet-counter" value="140" disabled="disabled">
  198. 198. ADAPTIVE WEB DESIGN WORKSHOPHey! Over here! <span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong> </span>
  199. 199. ADAPTIVE WEB DESIGN WORKSHOPHey! Over here! <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span> .hidden { position: absolute; left: −999em; }
  200. 200. ADAPTIVE WEB DESIGN WORKSHOPHey! Over here! <span class="tweet-counter">maximum of 140 characters</span> <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span>
  201. 201. ADAPTIVE WEB DESIGN WORKSHOPHey! Over here! <span aria-live="polite" aria-atomic="true" class="tweet-counter">140<b class="hidden"> characters remaining</b></span>
  202. 202. ADAPTIVE WEB DESIGN WORKSHOPHey! Over here!
  203. 203. Photo credit: emilio labrador
  204. 204. ADAPTIVE WEB DESIGN WORKSHOPTypical hiding schemes Accessibility CSS Rules Display E ect E ect visibility: hidden; Element is hidden from Content is ignored by screen view, but is not removed readers from the normal ow (i.e. it still takes up the space it normally would) display: none; Element is removed from Content is ignored by screen the normal ow and hidden; readers the space it occupied is collapsed height: 0; Element is collapsed and Content is ignored by screen width: 0; contents are hidden readers overflow: hidden;
  205. 205. ADAPTIVE WEB DESIGN WORKSHOPTypical hiding schemes Accessibility CSS Rules Display E ect E ect text-indent: -999em; Contents are shifted o - Screen readers have access screen and hidden from to the content, but the view, but links may “focus” content is limited to text and oddly and negative indent inline elements may not prove long enough to fully hide content position: absolute; Content is removed from Screen readers have access left: -999em; the normal ow and shifted to the content o the left-hand edge; the space it occupied is collapsed
  206. 206. ADAPTIVE WEB DESIGN WORKSHOPTypical hiding schemes Accessibility CSS Rules Display E ect E ect position: absolute; Content is positioned Screen readers have access /* IE6, IE7 */ absolutely (and is removed to the content clip: rect( 1px 1px 1px 1px from the normal ow), but ); remains in place and is /* W3C */ clipped to become invisible clip: rect( 1px, 1px, 1px, 1px ); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden;
  207. 207. ADAPTIVE WEB DESIGN WORKSHOPTypical hiding schemes Accessibility CSS Rules Display E ect E ect visibility: hidden; Element is hidden from Content is ignored by screen view, but is not removed readers from the normal ow (i.e. it still takes up the space it normally would) display: none; Element is removed from Content is ignored by screen the normal ow and hidden; readers the space it occupied is collapsed height: 0; Element is collapsed and Content is ignored by screen width: 0; contents are hidden readers overflow: hidden;
  208. 208. ADAPTIVE WEB DESIGN WORKSHOP“Fixing” libraries (function(){ var $button = $(#myButton), $text = $(#myText), visible = true; $button.click(function(){ if ( visible ) { $text.slideUp(fast); } else { $text.slideDown(fast); } visible = ! visible; }); })();
  209. 209. ADAPTIVE WEB DESIGN WORKSHOP“Fixing” libraries (function(){ var $button = $(#myButton), $text = $(#myText), visible = true; $button.click(function(){ if ( visible ) { $text.slideUp(fast,function(){ $text.addClass(accessibly-hidden) .slideDown(0); }); } else { $text.slideUp(0,function(){ $text.removeClass(accessibly-hidden) .slideDown(fast); }); } visible = ! visible; }); })();
  210. 210. photo by cfpg
  211. 211. ADAPTIVE WEB DESIGN WORKSHOPManaging focus <div tabindex="0"> <p>This <code>div</code> can now receive focus using a keyboard’s <kbd>tab</kbd> key. How cool is that?</p> </div> <div tabindex="-1"> <p>This <code>div</code> won’t be focused by a user via the <kbd>tab</kbd> key, but JavaScript can <code>focus()</code> it. Nifty, huh?</p> </div>
  212. 212. Header
  213. 213. ADAPTIVE WEB DESIGN WORKSHOPARIA Roles <div id="header"> <a href="#donate" class="donate-link" title="Click here to view our donation options">Donate</a> <a href="http://villagereach.org/feed/" class="rss-link" title="View our RSS Feed">RSS Feed</a> <div id="site-title"> <a href="http://villagereach.org" title="Village Reach: Home"> <span>Village Reach</span> </a> </div> </div><!-- #header -->
  214. 214. FeaturesPrograms News
  215. 215. ADAPTIVE WEB DESIGN WORKSHOPARIA Roles <div class="entry-content entry"> <!-- Features --> <div class="boxes three home"> <!-- Programs --> </div> <div id="latestNews"> <!-- Latest News --> </div> </div>
  216. 216. Nav
  217. 217. ADAPTIVE WEB DESIGN WORKSHOPARIA Roles <div id="hybrid-search-3" class="widget search widget-search"> <div class="widget-inside"> <form method="get" class="search-form" id="search-form" action="http://villagereach.org/"> <!--Search Form --> </form><!-- .search-form --> </div> </div> <div id="navigation"> <div id="page-nav" class="page-nav"> <ul class="menu sf-menu"> <!-- Navigation --> </ul> </div> </div><!-- #navigation -->
  218. 218. Extra SocialNewsletter
  219. 219. ADAPTIVE WEB DESIGN WORKSHOPARIA Roles <div id="text-8" class="widget widget_text widget-widget_text"> <div class="widget-inside"> <!-- Extra --> </div> </div> <div id="text-7" class="widget widget_text widget-widget_text"> <div class="widget-inside"> <!-- Social --> </div> </div> <div id="mc_signup_container"> <!-- Newsletter --> </div>
  220. 220. Footer
  221. 221. ADAPTIVE WEB DESIGN WORKSHOPARIA Roles <div id="footer-container"> <div id="footer"> <p class="copyright">Copyright © 2011 <a class="site-link" href="http://villagereach.org" title="VillageReach" rel="home"><span>VillageReach</span></a>. - All rights reserved.</p> </div><!-- #footer --> </div><!-- #footer-container -->
  222. 222. ADAPTIVE WEB DESIGN WORKSHOPARIA Roles & States <div class="jcarousel-container jcarousel-container-horizontal" style="display: block; "> <ul id="vr-carousel"> <li> <a href="#"><img src="…" alt="" /></a> <span>Your new online source for information on our progress</span> </li> <li> <a href="#"><img src="…" alt="" /></a> <span>VillageReach Announces Mozambique National Expansion</span> </li> … </ul> </div>
  223. 223. ADAPTIVE WEB DESIGN WORKSHOPARIA Roles & States <div id="jcarousel-control"> <div class="jcarousel-prev jcarousel-prev-horizontal" style="display: block; " disabled="false"></div> <span id="jcarousel-control-caption"> VillageReach Announces Mozambique National Expansion </span> <div class="jcarousel-next jcarousel-next-horizontal" style="display: block; " disabled="false"></div> </div>
  224. 224. Adaptive Web Design Workshop by Aaron Gustafson More of the same: http://adaptivewebdesign.info http://easy-designs.net http://blog.easy-designs.net http://aaron-gustafson.com Slides available at http://slideshare.net/AaronGustafson © Aaron Gustafson. All Rights Reserved.

×