1. BEYOND
RESPONSIVE
Aaron Gustafson
@AaronGustafson
slideshare.net/AaronGustafson

2. © Brad Frost

3. [In 2008] the majority of our visitors
saw our website in Internet
Explorer on a Windows computer on a
minimum 1,024 pixel wide screen.
Times have really changed.
“
Jason Samuels
IT Manager,
National Council on Family Relations
Source

4. Windows users used to comprise
93.5% of our web visits. Now that
percentage is 68.2%.
“

5. The percentage visiting from a mobile
device or tablet … was just
0.2% in 2008. It has since grown
exponentially to 14.4% today.“ 14.4%

6. [In 2008] 74.9% of our web visitors
used Internet Explorer. That
number has fallen to 19.7%.
Firefox now comprises 20%,
Safari 16.7%, and Chrome 37%.
“

7. In the second quarter of 2008
we detected 71 different
screen resolutions among our
visitors. In the first quarter of
2014 we detected
“

8. In the second quarter of 2008
we detected 71 different
screen resolutions among our
visitors. In the first quarter of
2014 we detected
“ 1062

9. In 2008, 27 screen
resolutions showed up with
more than 10 visits, in 2014
that number was“ 200

10. © Brad Frost

14. Smartphones have reached
75% penetration in the US…
“ Source

15. …but that’s concentrated in
61% of households

16. U.S. Smartphone penetration #s
released in March 2015
Source
< $30k
50%
$30-50k
71%
$50-75k
72%
>$75k
84%

17. U.S. Smartphone penetration #s
released in March 2015
Source
$30k = Average US income 2013
< $30k
50%
$30-50k
71%
$50-75k
72%
>$75k
84%

18. < $30k
50%
$30-50k
71%
$50-75k
72%
>$75k
84%
Population(in
thousands)
0
30000
60000
90000
120000
<30k $30-50k $50-70k >$70k
U.S. Smartphone vs. Income distribution
Opportunity!

19. Smartphone users making < $30k/yr
experienced app errors
52% of the time
Source

20. Galaxy S5
5.1” (1920 × 1080)
2GB RAM
16GB Storage
16MP Camera
2.5GHz Quad-core
Android 4.4
$799

21. Galaxy S5
5.1” (1920 × 1080)
2GB RAM
16GB Storage
16MP Camera
2.5GHz Quad-core
Android 4.4
$799
Cloud FX
3.5” (480 × 320)
128MB RAM
256MB Storage
2MP Camera
1GHz Single-core
Firefox OS 1.3
$35

22. Galaxy S5
5.1” (1920 × 1080)
2GB RAM
16GB Storage
16MP Camera
2.5GHz Quad-core
Android 4.4
$799
Dash JR K
3.5" (480 × 320)
256 MB RAM
512MB Memory
2MP camera
1.3 GHz Dual-core
Android 4.4
$43

23. As of Q4 2014, 62% of new
non-phone AT&T subscriptions are
connected cars
Source

30. © Brad Frost

31. We DON’T know

33. We DON’T know

34. Even when
we think
we know,
WE ARE
PROBABLY
WRONG

35. So how
do we COPE?

36. Progressive
Enhancement

37. Technological
restrictions

38. UserExperience
Browser Capabilities
BASIC ADVANCED

39. UserExperience
Browser Capabilities
BASIC ADVANCED
Content

40. UserExperience
Browser Capabilities
BASIC ADVANCED
Content
Semantics

41. UserExperience
Browser Capabilities
BASIC ADVANCED
Content
Semantics
Design

42. UserExperience
Browser Capabilities
BASIC ADVANCED
Content
Semantics
Design
Interactivity

43. UserExperience
Browser Capabilities
BASIC ADVANCED
Content
Semantics
Design
Interactivity
Accessibility

44. UserExperience
Browser Capabilities
BASIC ADVANCED
Text & HTTP
HTML
CSS
JavaScript
¶
<>
{}
↖
ARIA

45. HTML

46. HTML
HTML5
Microformats
HTML4

47. Browsers ignore
what they don’t
understand

48. I like an escalator because
an escalator can never break,
it can only become stairs.
— Mitch Hedberg

49. Graceful
Degradation

50. Modern
Browsers
Older Browsers

51. Modern
Browsers
Older Browsers

53. a dynamic web page can
never break, it can only
become a web page.

57. ๏Bugs
๏Browser Add-ons
๏Overzealous Firewalls
๏Underpowered devices
๏Page is still loading

61. SPoF

62. Graceful Degradation Progressive
Enhancement

63. Content

66. Mobile
First
Responsive
Web Design
:-)

67. BEYOND RESPONSIVE
Lightboxes

68. BEYOND RESPONSIVE
Lightboxes

69. BEYOND RESPONSIVE
IxMap
JS?
No
No lightboxLoad

70. BEYOND RESPONSIVE
IxMap
JS?
No
No lightboxLoad

71. BEYOND RESPONSIVE
IxMap
No
Yes
Verify browser
width condition
LIVE
JS?
No
No lightboxLoad

72. BEYOND RESPONSIVE
IxMap
No
Yes
Verify browser
width condition
LIVE
JS?
No
No lightboxLoad

73. BEYOND RESPONSIVE
IxMap
No
JS?
No
No lightboxLoad
Yes
Yes
Lightbox
Create link
Make image clickable
Verify browser
width condition
LIVE

74. BEYOND RESPONSIVE
IxMap
No
JS?
No
No lightboxLoad
Yes
Yes
Lightbox
Create link
Make image clickable
Verify browser
width condition
LIVE

75. BEYOND RESPONSIVE
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>

76. BEYOND RESPONSIVE
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>

77. BEYOND RESPONSIVE
Lightboxes

78. BEYOND RESPONSIVE
Thumbnails

79. BEYOND RESPONSIVE
Thumbnails

80. BEYOND RESPONSIVE
IxMap
JS?
No
No imageLoad

81. BEYOND RESPONSIVE
IxMap
JS?
No
No imageLoad

82. BEYOND RESPONSIVE
IxMap
No
JS?
No
No imageLoad
Yes
Verify browser
width condition

83. BEYOND RESPONSIVE
IxMap
No
JS?
No
No imageLoad
Yes
Verify browser
width condition

84. BEYOND RESPONSIVE
IxMap
No
JS?
No
No imageLoad
Yes
Yes
Image
Adjust markup
Add custom CSS
Verify browser
width condition

85. BEYOND RESPONSIVE
IxMap
No
JS?
No
No imageLoad
Yes
Yes
Image
Adjust markup
Add custom CSS
Verify browser
width condition

86. BEYOND RESPONSIVE
IxMap
No
JS?
No
No imageLoad
Yes
Yes
Image
Adjust markup
Add custom CSS
Verify browser
width condition

87. BEYOND RESPONSIVE
There is no image…
<p class="entry-image"
data-image-src="/i/sample.jpg"></p>

88. BEYOND RESPONSIVE
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"/>
</p>

89. BEYOND RESPONSIVE
CSS at rest
[data-image-src] {
display: none;
}

90. BEYOND RESPONSIVE
CSS at play
[data-image-src][data-image-loaded] {
display: block;
}

91. BEYOND RESPONSIVE
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();
};

92. BEYOND RESPONSIVE
JS Watcher
var browser_width = 0;
window.watchResize(function(){
browser_width = window.innerWidth ||
document.body.offsetWidth;
});

93. BEYOND RESPONSIVE
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;
}
});

94. BEYOND RESPONSIVE
IxMap
No
JS?
No
No imageLoad
Yes
Yes
Image
Adjust markup
Add custom CSS
Verify browser
width condition
LIVE

95. BEYOND RESPONSIVE
Smart CSS
[data-image-src][data-image-loaded] {
display: block;
}

96. BEYOND RESPONSIVE
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;
}
}

97. BEYOND RESPONSIVE
Thumbnails

98. http://is.gd/lazyloading_demo

99. http://is.gd/lazyloading_demo

100. http://is.gd/lazyloading_demo

101. http://is.gd/lazyloading_demo

102. BEYOND RESPONSIVE
NO!!!!
#reviews {
display: none;
}
@media only screen and (min-width:50em) {
#reviews {
display: block;
}
}

103. BEYOND RESPONSIVE
IxMap
JS?
No
LinksLoad

104. BEYOND RESPONSIVE
IxMap
JS?
No
LinksLoad

105. BEYOND RESPONSIVE
IxMap
JS?
No
LinksLoad
Yes
Verify browser
width condition
LIVE
No
Hold for user action

106. BEYOND RESPONSIVE
IxMap
JS?
No
LinksLoad
Yes
Verify browser
width condition
LIVE
No
Hold for user action

107. BEYOND RESPONSIVE
IxMap
JS?
No
LinksLoad
Yes
Yes
Reviews
Lazy Load the reviews
Verify browser
width condition
LIVE
No
Hold for user action

108. BEYOND RESPONSIVE
IxMap
JS?
No
LinksLoad
Yes
Yes
Reviews
Lazy Load the reviews
Verify browser
width condition
LIVE
No
Hold for user action

109. BEYOND RESPONSIVE
IxMap
JS?
No
LinksLoad
Yes
Yes
Reviews
Lazy Load the reviews
Verify browser
width condition
LIVE Click
No
Hold for user action

110. BEYOND RESPONSIVE
IxMap
JS?
No
LinksLoad
Yes
Yes
Reviews
Lazy Load the reviews
Verify browser
width condition
LIVE Click
No
Hold for user action

111. BEYOND RESPONSIVE
Lazy Loading
<section class="aux reviews" id="reviews">
<header id="tab-reviews">
<a href="reviews.html" class="disabled">…</a>
</header>
</section>

112. BEYOND RESPONSIVE
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>

113. http://is.gd/lazyloading_demo

114. BEYOND RESPONSIVE
Tabbed Interface

115. BEYOND RESPONSIVE
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>

116. BEYOND RESPONSIVE
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>

117. BEYOND RESPONSIVE
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>

118. BEYOND RESPONSIVE
No JS, basic CSS

119. BEYOND RESPONSIVE
IxMap
JS?
No
LinearLoad

120. BEYOND RESPONSIVE
IxMap
JS?
No
LinearLoad

121. BEYOND RESPONSIVE
IxMap
JS?
No
LinearLoad
Yes
Tabs
Split content into sections
Make tabs
Assign event handlers (mouse & keyboard)

122. BEYOND RESPONSIVE
IxMap
JS?
No
LinearLoad
Yes
Tabs
Split content into sections
Make tabs
Assign event handlers (mouse & keyboard)

123. BEYOND RESPONSIVE
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>

124. BEYOND RESPONSIVE
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>

125. BEYOND RESPONSIVE
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>

126. BEYOND RESPONSIVE
IxMap
JS?
No
LinearLoad

127. BEYOND RESPONSIVE
IxMap
JS?
No
LinearLoad
Yes
Verify space
for tabs
LIVE

128. BEYOND RESPONSIVE
IxMap
JS?
No
LinearLoad
Yes
Verify space
for tabs
LIVE
No
Accordion
Build accordion

129. BEYOND RESPONSIVE
IxMap
JS?
No
LinearLoad
Yes
Tabs
Split content into sections
Make tabs
Assign event handlers (mouse & keyboard)
Yes
Verify space
for tabs
LIVE
No
Accordion
Build accordion

130. BEYOND RESPONSIVE
JS?Load
IxMap
Yes
Tabs
Yes
Verify space
for tabs
LIVE
No
Linear
No
Accordion
Build accordion
<?>
Yes
Native
Insert details
& summary
Support details & summary?

131. BEYOND RESPONSIVE
role="tablist"
108
Adding ARIA

132. BEYOND RESPONSIVE
role="tab"
aria-selected="true"
aria-controls="folder-1"
Adding ARIA

133. BEYOND RESPONSIVE
role="tab"
aria-selected="false"
aria-controls="folder-4"
Adding ARIA

134. BEYOND RESPONSIVE
role="tabpanel"
aria-hidden="false"
aria-labelledby="folder-1-tab"
Adding ARIA

135. BEYOND RESPONSIVE
Result!

136. BEYOND RESPONSIVE
Result!

137. BEYOND RESPONSIVE
Tabbed Interface

138. Questions?
Tweet me at
@AaronGustafson

139. Thank you!
@AaronGustafson
aaron-gustafson.com
slideshare.net/AaronGustafson