Beyond Responsive [18F 2015]

BEYOND
RESPONSIVE
Aaron Gustafson
@AaronGustafson
slideshare.net/AaronGustafson

[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

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

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%

[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%.
“

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

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

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

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

…but that’s concentrated in
61% of households

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

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%

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

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

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

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

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

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

Even when
we think
we know,
WE ARE
PROBABLY
WRONG

UserExperience
Browser Capabilities
BASIC ADVANCED

UserExperience
BASIC ADVANCED
Content

UserExperience
BASIC ADVANCED
Content
Semantics

UserExperience
BASIC ADVANCED
Content
Semantics
Design

UserExperience
BASIC ADVANCED
Content
Semantics
Design
Interactivity

UserExperience
BASIC ADVANCED
Content
Semantics
Design
Interactivity
Accessibility

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

Browsers ignore
what they don’t
understand

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

Modern
Browsers
Older Browsers

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

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

Graceful Degradation Progressive
Enhancement

Mobile
First
Responsive
Web Design
:-)

BEYOND RESPONSIVE
IxMap
JS?
No
No lightboxLoad

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

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

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>

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>

BEYOND RESPONSIVE
IxMap
JS?
No
No imageLoad

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

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

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

BEYOND RESPONSIVE
Until there is
data-image-src="/i/sample.jpg"></p>
data-image-src="/i/sample.jpg"
data-has-image="true">
<img alt="" src="/i/sample.jpg"/>
</p>

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

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

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

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

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

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

BEYOND RESPONSIVE
Smart CSS
display: block;
}

BEYOND RESPONSIVE
Smart CSS
display: block;
}
@media only screen and (min-width:400px) {
[data-img-src][data-image-loaded] {
display: block;
}
}

http://is.gd/lazyloading_demo

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

BEYOND RESPONSIVE
IxMap
JS?
No
LinksLoad

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

BEYOND RESPONSIVE
IxMap
JS?
No
LinksLoad
Yes
Yes
Reviews
Lazy Load the reviews
Verify browser
width condition
LIVE
No

BEYOND RESPONSIVE
IxMap
JS?
No
LinksLoad
Yes
Yes
Reviews
Lazy Load the reviews
Verify browser
width condition
LIVE Click
No

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

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>

BEYOND RESPONSIVE
Tabbed Interface

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>

BEYOND RESPONSIVE
Cleaner approach
<div class="tabbed-interface"> 
<h2>Overview</h2>
<img src="pie.jpg" alt="" />

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

BEYOND RESPONSIVE
No JS, basic CSS

BEYOND RESPONSIVE
IxMap
JS?
No
LinearLoad

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

BEYOND RESPONSIVE
Linear HTML
<div class="tabbed-interface"> 
<h2>Overview</h2>
<img src="pie.jpg" alt="" />

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

BEYOND RESPONSIVE
Tabbed
<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="">

</section>

</div>

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

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

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

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?

BEYOND RESPONSIVE
role="tablist"
108
Adding ARIA

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

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

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

Questions?
Tweet me at 
@AaronGustafson

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

Beyond Responsive [18F 2015]

More Related Content

What's hot (18)

Viewers also liked (9)

Similar to Beyond Responsive [18F 2015] (20)

More from Aaron Gustafson (20)

Recently uploaded (20)

Beyond Responsive [18F 2015]