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

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

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

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

14.
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%

15.
< $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!

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

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

18.
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

19.
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

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

21.
© Brad Frost

22.
We DON’T know

23.
We DON’T know

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

25.
So how
do we COPE?

26.
Progressive
Enhancement

27.
Technological
restrictions

28.
UserExperience
Browser Capabilities
BASIC ADVANCED

29.
UserExperience
Browser Capabilities
BASIC ADVANCED
Content

30.
UserExperience
Browser Capabilities
BASIC ADVANCED
Content
Semantics

31.
UserExperience
Browser Capabilities
BASIC ADVANCED
Content
Semantics
Design

32.
UserExperience
Browser Capabilities
BASIC ADVANCED
Content
Semantics
Design
Interactivity

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

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

35.
HTML

36.
HTML
HTML5
Microformats
HTML4

37.
Browsers ignore
what they don’t
understand

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

39.
Graceful
Degradation

40.
Modern
Browsers
Older Browsers

41.
Modern
Browsers
Older Browsers

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

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

44.
SPoF

45.
Graceful Degradation Progressive
Enhancement

46.
Content

47.
Mobile
First
Responsive
Web Design
:-)

48.
BEYOND RESPONSIVE
Lightboxes

49.
BEYOND RESPONSIVE
Lightboxes

50.
BEYOND RESPONSIVE
IxMap
JS?
No
No lightboxLoad

51.
BEYOND RESPONSIVE
IxMap
JS?
No
No lightboxLoad

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

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

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

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

56.
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>

57.
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>

58.
BEYOND RESPONSIVE
Lightboxes

59.
BEYOND RESPONSIVE
Thumbnails

60.
BEYOND RESPONSIVE
Thumbnails

61.
BEYOND RESPONSIVE
IxMap
JS?
No
No imageLoad

62.
BEYOND RESPONSIVE
IxMap
JS?
No
No imageLoad

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

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

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

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

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

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

69.
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>

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

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

72.
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();
};

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

74.
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;
}
});

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

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

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

78.
BEYOND RESPONSIVE
Thumbnails

79.
http://is.gd/lazyloading_demo

80.
http://is.gd/lazyloading_demo

81.
http://is.gd/lazyloading_demo

82.
http://is.gd/lazyloading_demo

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

84.
BEYOND RESPONSIVE
IxMap
JS?
No
LinksLoad

85.
BEYOND RESPONSIVE
IxMap
JS?
No
LinksLoad

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

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

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

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

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

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

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

93.
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>

94.
http://is.gd/lazyloading_demo

95.
BEYOND RESPONSIVE
Tabbed Interface

96.
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>

97.
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>

98.
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>

99.
BEYOND RESPONSIVE
No JS, basic CSS

100.
BEYOND RESPONSIVE
IxMap
JS?
No
LinearLoad

101.
BEYOND RESPONSIVE
IxMap
JS?
No
LinearLoad

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

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

104.
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>

105.
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>

106.
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>

107.
BEYOND RESPONSIVE
IxMap
JS?
No
LinearLoad

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

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

110.
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

111.
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?

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

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

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

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

116.
BEYOND RESPONSIVE
Result!

117.
BEYOND RESPONSIVE
Result!

118.
BEYOND RESPONSIVE
Tabbed Interface

119.
Questions?
Tweet me at
@AaronGustafson

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