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: Layer by Layer [edUi 2013]

86 views

Published on

In this half-day workshop, Aaron Gustafson will teach you everything you need to know about modern web design with progressive enhancement. 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. 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.

Required Reading

In order to participate in this workshop you will either need to read the first chapter of Aaron’s book (free download) or attend Aaron’s other edUi talk, Intro to Adaptive Web Design.

What You'll Learn:

* A greater understanding of semantic markup, including the improved semantics of HTML5
* How CSS parsers work and how you can use their logic to apply advanced CSS (including CSS3) in a layered fashion
* Where concepts like “mobile first” and ”responsive design” fit in with progressive enhancement and your workflow
* How to wield the awesome power of JavaScript wisely while keeping a watchful eye on how it can affect the user experience or your sites
* How accessibility concerns can be easily factored into your development process
* More about ARIA roles & states and how you can employ them to improve the experience of those using screen readers

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

  • Be the first to like this

Adaptive Web Design: Layer by Layer [edUi 2013]

  1. 1. Adaptive Web Design LAYER BY LAYER Aaron Gustafson @AaronGustafson slideshare.net/AaronGustafson
  2. 2. Slides http://is.gd/edui_awd_workshop Password: edui2013 Further Reading http://is.gd/readlist_awd
  3. 3. ADAPTIVE WEB DESIGN: LAYER BY LAYER Thumbnails
  4. 4. ADAPTIVE WEB DESIGN: LAYER BY LAYER Thumbnails
  5. 5. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No No image Yes No Verify browser width condition Yes Image Adjust markup Add custom CSS
  6. 6. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No No image Yes No Verify browser width condition Yes Image Adjust markup Add custom CSS
  7. 7. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No No image Yes No Verify browser width condition Yes Image Adjust markup Add custom CSS
  8. 8. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No No image Yes No Verify browser width condition Yes Image Adjust markup Add custom CSS
  9. 9. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No No image Yes No Verify browser width condition Yes Image Adjust markup Add custom CSS
  10. 10. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No No image Yes No Verify browser width condition Yes Image Adjust markup Add custom CSS
  11. 11. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No No image Yes No Verify browser width condition Yes Image Adjust markup Add custom CSS
  12. 12. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No No image Yes No Verify browser width condition Yes Image Adjust markup Add custom CSS
  13. 13. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No No image Yes No Verify browser width condition Yes Image Adjust markup Add custom CSS
  14. 14. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No No image Yes No Verify browser width condition Yes Image Adjust markup Add custom CSS
  15. 15. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No No image Yes No Verify browser width condition Yes Image Adjust markup Add custom CSS
  16. 16. ADAPTIVE WEB DESIGN: LAYER BY LAYER There is no image… <p class="entry-image" data-image-src="/i/sample.jpg"></p>
  17. 17. ADAPTIVE WEB DESIGN: LAYER BY LAYER Until there is <p class="entry-image" data-image-src="/i/sample.jpg"></p> <p class="entry-image" data-image-src="/i/sample.jpg" data-has-image="true"> <img alt="" src="/i/sample.jpg" alt=””/> </p>
  18. 18. ADAPTIVE WEB DESIGN: LAYER BY LAYER CSS at rest [data-image-src] { display: none; }
  19. 19. ADAPTIVE WEB DESIGN: LAYER BY LAYER CSS at play [data-image-src][data-image-loaded] { display: block; }
  20. 20. ADAPTIVE WEB DESIGN: LAYER BY LAYER JS Watcher window.watchResize = function(callback) { var resizing; function done() { clearTimeout( resizing ); resizing = null; callback(); } window.onresize = function(){ if ( resizing ) { clearTimeout( resizing ); resizing = null; } resizing = setTimeout( done, 50 ); }; callback(); };
  21. 21. ADAPTIVE WEB DESIGN: LAYER BY LAYER JS Watcher var browser_width = 0; window.watchResize(function(){ browser_width = window.innerWidth || document.body.offsetWidth; });
  22. 22. ADAPTIVE WEB DESIGN: LAYER BY LAYER JS Watcher window.watchResize(function(){ var threshold = 400, image = document.createElement('img'), paragraphs = document.getElementsByTagName('p'), i = paragraphs.length, p, loaded, src, img; if ( browser_width >= threshold ) { image.setAttribute('alt',''); while ( i-- ) { p = paragraphs[i]; src = p.getAttribute('data-image-src'); loaded = p.getAttribute('data-image-loaded'); if ( src != null && loaded == null ) { img = image.cloneNode(true); img.setAttribute('src',src); p.appendChild( img ); p.setAttribute('data-image-loaded',''); } } image = paragraphs = p = img = null; } });
  23. 23. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No No image Yes No Verify browser width condition LIVE Yes Image Adjust markup Add custom CSS
  24. 24. ADAPTIVE WEB DESIGN: LAYER BY LAYER Smart CSS [data-image-src][data-image-loaded] { display: block; }
  25. 25. ADAPTIVE WEB DESIGN: LAYER BY LAYER Smart CSS [data-image-src][data-image-loaded] { display: block; } @media only screen and (min-width:400px) { [data-img-src][data-image-loaded] { display: block; } }
  26. 26. ADAPTIVE WEB DESIGN: LAYER BY LAYER Lightboxes
  27. 27. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No No lightbox Yes No Verify browser width condition LIVE Yes Lightbox Create link Make image clickable
  28. 28. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No No lightbox Yes No Verify browser width condition LIVE Yes Lightbox Create link Make image clickable
  29. 29. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No No lightbox Yes No Verify browser width condition LIVE Yes Lightbox Create link Make image clickable
  30. 30. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No No lightbox Yes No Verify browser width condition LIVE Yes Lightbox Create link Make image clickable
  31. 31. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No No lightbox Yes No Verify browser width condition LIVE Yes Lightbox Create link Make image clickable
  32. 32. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No No lightbox Yes No Verify browser width condition LIVE Yes Lightbox Create link Make image clickable
  33. 33. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No No lightbox Yes No Verify browser width condition LIVE Yes Lightbox Create link Make image clickable
  34. 34. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No No lightbox Yes No Verify browser width condition LIVE Yes Lightbox Create link Make image clickable
  35. 35. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No No lightbox Yes No Verify browser width condition LIVE Yes Lightbox Create link Make image clickable
  36. 36. ADAPTIVE WEB DESIGN: LAYER BY LAYER No need to link <figure id="fig-1"> <img src="/path/small.png" data-enlarged="/path/large.png" alt=""> <figcaption> <h6>Retreats 4 Geeks</h6> <p>We built this site for our intimate retreat series.</p> </figcaption> </figure>
  37. 37. ADAPTIVE WEB DESIGN: LAYER BY LAYER Make the connection <figure id="fig-1"> <img src="/path/small.png" data-enlarged="/path/large.png" alt="" class="enlargable"> <p class="enlarge"><a href="#enlarge">Click to Enlarge</a></p> <figcaption> <h6>Retreats 4 Geeks</h6> <p>We built this site for our intimate retreat series.</p> </figcaption> </figure>
  38. 38. ADAPTIVE WEB DESIGN: LAYER BY LAYER Tabbed Interface
  39. 39. ADAPTIVE WEB DESIGN: LAYER BY LAYER Traditional approach <h1>Pumpkin Pie</h1> <div class="container"> <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 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> <!-- ... --> </div>
  40. 40. ADAPTIVE WEB DESIGN: LAYER BY LAYER Cleaner approach <h1>Pumpkin Pie</h1> <div class="tabbed-interface"> <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> <!-- ... --> </ul> <h2>Directions</h2> <!-- ... --> </div>
  41. 41. ADAPTIVE WEB DESIGN: LAYER BY LAYER Cleaner approach <h1>Pumpkin Pie</h1> <div class="tabbed-interface"> <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> <!-- ... --> </ul> <h2>Directions</h2> <!-- ... --> </div>
  42. 42. ADAPTIVE WEB DESIGN: LAYER BY LAYER No JS, basic CSS
  43. 43. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No Linear Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard)
  44. 44. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No Linear Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard)
  45. 45. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No Linear Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard)
  46. 46. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No Linear Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard)
  47. 47. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No Linear Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard)
  48. 48. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No Linear Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard)
  49. 49. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No Linear Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard)
  50. 50. ADAPTIVE WEB DESIGN: LAYER BY LAYER Linear HTML <h1>Pumpkin Pie</h1> <div class="tabbed-interface"> <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> <!-- ... --> </ul> <h2>Directions</h2> <!-- ... --> </div>
  51. 51. ADAPTIVE WEB DESIGN: LAYER BY LAYER Tabbed <h1>Pumpkin Pie</h1> <div class="tabbed-interface TabInterface-enabled"> <ul class="tabs"> <li><a href="#folder-1">Overview</a></li> <li><a href="#folder-2">Ingredients</a></li> <li><a href="#folder-3">Directions</a></li> <li><a href="#folder-4">Nutrition</a></li> </ul> <section id=”folder-1”> <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> <!-- ... --> </section> <!-- ... --> </div>
  52. 52. ADAPTIVE WEB DESIGN: LAYER BY LAYER Tabbed <h1>Pumpkin Pie</h1> <div class="tabbed-interface TabInterface-enabled"> <ul class="tabs"> <li><a href="#folder-1">Overview</a></li> <li><a href="#folder-2">Ingredients</a></li> <li><a href="#folder-3">Directions</a></li> <li><a href="#folder-4">Nutrition</a></li> </ul> <section id=”folder-1”> <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> <!-- ... --> </section> <!-- ... --> </div>
  53. 53. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load
  54. 54. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No Linear Yes No Accordion Verify space for tabs LIVE Yes Build accordion Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard)
  55. 55. ADAPTIVE WEB DESIGN: LAYER BY LAYER No UI Construction Flow Load Insert details & summary JS? Yes Native Yes <?> Verify space for tabs LIVE Linear Yes Support details & summary? No Accordion Build accordion Tabs
  56. 56. ADAPTIVE WEB DESIGN: LAYER BY LAYER Adding ARIA role="tablist" 44
  57. 57. ADAPTIVE WEB DESIGN: LAYER BY LAYER Adding ARIA role="tab" aria-selected="true" aria-controls="folder-1"
  58. 58. ADAPTIVE WEB DESIGN: LAYER BY LAYER Adding ARIA role="tab" aria-selected="false" aria-controls="folder-4"
  59. 59. ADAPTIVE WEB DESIGN: LAYER BY LAYER Adding ARIA role="tabpanel" aria-hidden="false" aria-labelledby="folder-1-tab"
  60. 60. ADAPTIVE WEB DESIGN: LAYER BY LAYER Adding ARIA role="application" aria-activedescendant="folder-1"
  61. 61. ADAPTIVE WEB DESIGN: LAYER BY LAYER Result!
  62. 62. http://is.gd/lazyloading_demo
  63. 63. http://is.gd/lazyloading_demo
  64. 64. http://is.gd/lazyloading_demo
  65. 65. http://is.gd/lazyloading_demo
  66. 66. ADAPTIVE WEB DESIGN: LAYER BY LAYER NO!!!! #reviews { display: none; } @media only screen and (min-width:50em) { #reviews { display: block; } }
  67. 67. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No Links Yes No Verify browser width condition LIVE Hold for user action Click Yes Reviews Lazy Load the reviews
  68. 68. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No Links Yes No Verify browser width condition LIVE Hold for user action Click Yes Reviews Lazy Load the reviews
  69. 69. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No Links Yes No Verify browser width condition LIVE Hold for user action Click Yes Reviews Lazy Load the reviews
  70. 70. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No Links Yes No Verify browser width condition LIVE Hold for user action Click Yes Reviews Lazy Load the reviews
  71. 71. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No Links Yes No Verify browser width condition LIVE Hold for user action Click Yes Reviews Lazy Load the reviews
  72. 72. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No Links Yes No Verify browser width condition LIVE Hold for user action Click Yes Reviews Lazy Load the reviews
  73. 73. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No Links Yes No Verify browser width condition LIVE Hold for user action Click Yes Reviews Lazy Load the reviews
  74. 74. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No Links Yes No Verify browser width condition LIVE Hold for user action Click Yes Reviews Lazy Load the reviews
  75. 75. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No Links Yes No Verify browser width condition LIVE Hold for user action Click Yes Reviews Lazy Load the reviews
  76. 76. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No Links Yes No Verify browser width condition LIVE Hold for user action Click Yes Reviews Lazy Load the reviews
  77. 77. ADAPTIVE WEB DESIGN: LAYER BY LAYER UI Construction Flow Load JS? No Links Yes No Verify browser width condition LIVE Hold for user action Click Yes Reviews Lazy Load the reviews
  78. 78. ADAPTIVE WEB DESIGN: LAYER BY LAYER Lazy Loading <section class="aux reviews" id="reviews"> <header id="tab-reviews"> <a href="reviews.html" class="disabled">…</a> </header> </section>
  79. 79. ADAPTIVE WEB DESIGN: LAYER BY LAYER Lazy Loading <section class="aux reviews loaded" id="reviews"> <header id="tab-reviews"> <a href="reviews.html" class="disabled open">…</a> </header> <div role="tabpanel"> <div id="p-reviews" aria-labeledby="tab-reviews"> <ol class="reviews-list"> <li> <img src="images/avatar.png" alt="Commenter Name"> <div class="review-meta"> <h3>Awesome shirt!</h3> <a href="#"><time datetime="2010-01-20" pubdate="">11/12/2011</time></a> By Bruce Bosco </div> <div class="review-content"> <p>This shirt looks awesome and is really comfortable to wear. It did shrink quite a lot when washed, but that could have just been how I ran it. All in all, it's my favourite shirt, and I love wearing it.</p> </div> </li> <!-- … --> </ol> </div> </div> </section>
  80. 80. Now it’s time for YOU to do some work
  81. 81. ADAPTIVE WEB DESIGN: LAYER BY LAYER Carousel
  82. 82. ADAPTIVE WEB DESIGN: LAYER BY LAYER Video Gallery
  83. 83. ADAPTIVE WEB DESIGN: LAYER BY LAYER Tabbed Interface
  84. 84. ADAPTIVE WEB DESIGN: LAYER BY LAYER Data Tables
  85. 85. ADAPTIVE WEB DESIGN: LAYER BY LAYER Scorecard
  86. 86. ADAPTIVE WEB DESIGN: LAYER BY LAYER Complex Navigation
  87. 87. ADAPTIVE WEB DESIGN: LAYER BY LAYER Timeline
  88. 88. ADAPTIVE WEB DESIGN: LAYER BY LAYER Modal Dialogs
  89. 89. ADAPTIVE WEB DESIGN: LAYER BY LAYER Accordion
  90. 90. ADAPTIVE WEB DESIGN: LAYER BY LAYER Shopping Cart
  91. 91. ADAPTIVE WEB DESIGN: LAYER BY LAYER Interfaces ๏ Carousel ๏ Complex Navigation ๏ Video Gallery ๏ Timeline ๏ Tab Interface v2 ๏ Modal Dialogs ๏ Data Tables ๏ Accordion ๏ Scorecard ๏ Shopping Cart 74
  92. 92. Slides http://is.gd/edui_awd_workshop Password: edui2013 Further Reading http://is.gd/readlist_awd
  93. 93. Thank you!!!

×