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

1. Adaptive
Web Design
LAYER BY LAYER
Aaron Gustafson
@AaronGustafson
slideshare.net/AaronGustafson

2. Slides
http://is.gd/edui_awd_workshop
Password: edui2013
Further Reading
http://is.gd/readlist_awd

3. ADAPTIVE WEB DESIGN: LAYER BY LAYER
Thumbnails

4. ADAPTIVE WEB DESIGN: LAYER BY LAYER
Thumbnails

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. ADAPTIVE WEB DESIGN: LAYER BY LAYER
There is no image…
<p class="entry-image"
data-image-src="/i/sample.jpg"></p>

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. ADAPTIVE WEB DESIGN: LAYER BY LAYER
CSS at rest
[data-image-src] {
display: none;
}

19. ADAPTIVE WEB DESIGN: LAYER BY LAYER
CSS at play
[data-image-src][data-image-loaded] {
display: block;
}

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. ADAPTIVE WEB DESIGN: LAYER BY LAYER
JS Watcher
var browser_width = 0;
window.watchResize(function(){
browser_width = window.innerWidth ||
document.body.offsetWidth;
});

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. 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. ADAPTIVE WEB DESIGN: LAYER BY LAYER
Smart CSS
[data-image-src][data-image-loaded] {
display: block;
}

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. ADAPTIVE WEB DESIGN: LAYER BY LAYER
Lightboxes

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. ADAPTIVE WEB DESIGN: LAYER BY LAYER
Tabbed Interface

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. 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. 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. ADAPTIVE WEB DESIGN: LAYER BY LAYER
No JS, basic CSS

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. ADAPTIVE WEB DESIGN: LAYER BY LAYER
UI Construction Flow
Load

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. 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. ADAPTIVE WEB DESIGN: LAYER BY LAYER
Adding ARIA
role="tablist"
44

57. ADAPTIVE WEB DESIGN: LAYER BY LAYER
Adding ARIA
role="tab"
aria-selected="true"
aria-controls="folder-1"

58. ADAPTIVE WEB DESIGN: LAYER BY LAYER
Adding ARIA
role="tab"
aria-selected="false"
aria-controls="folder-4"

59. ADAPTIVE WEB DESIGN: LAYER BY LAYER
Adding ARIA
role="tabpanel"
aria-hidden="false"
aria-labelledby="folder-1-tab"

60. ADAPTIVE WEB DESIGN: LAYER BY LAYER
Adding ARIA
role="application"
aria-activedescendant="folder-1"

61. ADAPTIVE WEB DESIGN: LAYER BY LAYER
Result!

62. http://is.gd/lazyloading_demo

63. http://is.gd/lazyloading_demo

64. http://is.gd/lazyloading_demo

65. http://is.gd/lazyloading_demo

66. ADAPTIVE WEB DESIGN: LAYER BY LAYER
NO!!!!
#reviews {
display: none;
}
@media only screen and (min-width:50em) {
#reviews {
display: block;
}
}

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Now it’s time
for YOU
to do
some work

81. ADAPTIVE WEB DESIGN: LAYER BY LAYER
Carousel

82. ADAPTIVE WEB DESIGN: LAYER BY LAYER
Video Gallery

83. ADAPTIVE WEB DESIGN: LAYER BY LAYER
Tabbed Interface

84. ADAPTIVE WEB DESIGN: LAYER BY LAYER
Data Tables

85. ADAPTIVE WEB DESIGN: LAYER BY LAYER
Scorecard

86. ADAPTIVE WEB DESIGN: LAYER BY LAYER
Complex Navigation

87. ADAPTIVE WEB DESIGN: LAYER BY LAYER
Timeline

88. ADAPTIVE WEB DESIGN: LAYER BY LAYER
Modal Dialogs

89. ADAPTIVE WEB DESIGN: LAYER BY LAYER
Accordion

90. ADAPTIVE WEB DESIGN: LAYER BY LAYER
Shopping Cart

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. Slides
http://is.gd/edui_awd_workshop
Password: edui2013
Further Reading
http://is.gd/readlist_awd

93. Thank you!!!