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
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;
}
}
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>
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>
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>
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
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>