Beyond Responsive Workshop [Beyond Tellerrand 2014]

BEYOND
RESPONSIVE
Aaron Gustafson
@AaronGustafson
slideshare.net/AaronGustafson

Just four years ago 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 72.4%. Visitors using a
Mac have more than tripled.“

The percentage visiting from a mobile
device or tablet … was just
0.1% in 2008. It has since grown
exponentially,
200-400% per year,
to 6.2% today.
“

Four years ago 75.5% of our web
visitors used Internet Explorer. That
number has fallen to 37%. Firefox now
comprises 25.5%, Safari 19.5%, and
Chrome 15.3%.
“

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

Beyond Responsive Workshop [Beyond Tellerrand 2014]

There is no WebKit
on Mobile
— Peter-Paul Koch“

WebKit vs. Acid3
http://www.quirksmode.org/webkit_mobile.html

Surely there’s
platform
consistency!?!
— Any sane individual
“

There is no Android
— Stephanie Rieger
“

http://yfrog.com/z/ob5kndj

But Android
is NOT unique
in this

The culprits?
ZOOM LEVEL
(Ok, this one’s on Android)

Smartphones have reached
56% penetration in the US…
“

…but that’s concentrated in
30% of households
“ http://www.chetansharma.com/usmarketupdateq12013.htm

U.S. Smartphone penetration #s
released in February
http://www.pewinternet.org/2014/02/27/part-1-how-the-internet-has-woven-itself-into-american-life/
< $30k
47%
$30-50k
53%
$50-75k
61%
>$75k
81%

U.S. Smartphone penetration #s
released in February
http://www.pewinternet.org/2014/02/27/part-1-how-the-internet-has-woven-itself-into-american-life/
$30k = Average US income 2013
< $30k
47%
$30-50k
53%
$50-75k
61%
>$75k
81%

< $30k
47%
$30-50k
53%
$50-75k
61%
>$75k
81%
0
30000
60000
90000
120000
<30k $30-50k $50-70k >$70k
Population(inthousands)
8,767
U.S. Smartphone vs. Income distribution

< $30k
47%
$30-50k
53%
$50-75k
61%
>$75k
81%
0
30000
60000
90000
120000
<30k $30-50k $50-70k >$70k
Population(inthousands)
8,767
U.S. Smartphone vs. Income distribution
Opportunity!

Even when
we think
we know,
WE ARE
PROBABLY
WRONG

BASIC ADVANCED
UserExperience
Browser Capabilities

BASIC ADVANCED
UserExperience
Content

BASIC ADVANCED
UserExperience
Content
Semantics

BASIC ADVANCED
UserExperience
Content
Semantics
Design

BASIC ADVANCED
UserExperience
Content
Semantics
Design
Interactivity

BASIC ADVANCED
UserExperience
Content
Semantics
Design
Interactivity
Accessibility

BASIC ADVANCED
UserExperience
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

on Progressive
Enhancement
Responsive
Web Design
Mobile
First

Mobile
First
Responsive
Web Design

Mobile
First
Responsive
Web Design
:-)

BEYOND RESPONSIVE
Interface experience Map
Load

BEYOND RESPONSIVE
JS?Load

BEYOND RESPONSIVE
JS?
No
No lightboxLoad

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

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

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

BEYOND RESPONSIVE
IxMap
No
JS?
No
No lightbox
Yes
Yes
Lightbox
Create link
Verify browser
width condition
LIVE
Load

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

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

BEYOND RESPONSIVE
IxMap
No
JS?
No
No lightboxLoad
Yes
Yes
Lightbox
Create link
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?Load

BEYOND RESPONSIVE
IxMap
JS?
No
No imageLoad

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

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
IxMap
No
JS?
No
No image
Yes
Yes
Image
Adjust markup
Add custom CSS
Verify browser
width condition
Load

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

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

BEYOND RESPONSIVE
IxMap
No
No
No imageJS?Load
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

BEYOND RESPONSIVE
Until there is
data-image-src="/i/sample.jpg"
data-has-image="true">
<img alt="" src="/i/sample.jpg" alt=””/>
</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

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
Verify browser
width condition
LIVE Click
No

BEYOND RESPONSIVE
IxMap
JS?
No
Links
Yes
Yes
Reviews
Verify browser
width condition
LIVE Click
No
Load

BEYOND RESPONSIVE
IxMap
Yes
Yes
Reviews
Verify browser
width condition
LIVE Click
No
JS?
No
LinksLoad

BEYOND RESPONSIVE
IxMap
Yes
Reviews
Click
JS?
No
LinksLoad
Yes
Verify browser
width condition
LIVE
No

BEYOND RESPONSIVE
IxMap
Click
JS?
No
LinksLoad
Yes
Yes
Reviews
Verify browser
width condition
LIVE
No

BEYOND RESPONSIVE
IxMap
JS?
No
LinksLoad
Yes
Verify browser
width condition
LIVE
No
Click
Yes
Reviews

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
IxMap
JS?
No
Linear
Yes
Tabs
Make tabs
Load

BEYOND RESPONSIVE
IxMap
Yes
Tabs
Make tabs
JS?
No
LinearLoad

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
Make tabs
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
<?>

BEYOND RESPONSIVE
JS?Load
IxMap
Yes
Tabs
Yes
Verify space
for tabs
LIVE
No
Linear
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"
133
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

BEYOND RESPONSIVE
role="application"
aria-activedescendant="folder-1"
Adding ARIA

Now it’s time
for YOU
to do
some work

BEYOND RESPONSIVE
Interfaces
๏ Carousel
๏ Video Gallery
๏ Tab Interface v2
๏ Data Tables
๏ Scorecard
141
๏ Complex Navigation
๏ Timeline
๏ Modal Dialogs
๏ Accordion
๏ Shopping Cart

BEYOND RESPONSIVE
Video Gallery

BEYOND RESPONSIVE
Complex Navigation

BEYOND RESPONSIVE
Modal Dialogs

BEYOND RESPONSIVE
Shopping Cart

http://is.gd/bt_beyond_responsive
Password: tellerrand
Further Reading:
http://is.gd/readlist_awd

BEYOND RESPONSIVE
The Ask:
๏ Imagine at least 2 different ways to experience the interface from a
UX standpoint
๏ How might it look different?
๏ How might it behave differently?
๏ Can you speed up the download/optimize performance?
๏ What happens without JavaScript?
๏ Sketch it out.
๏ Have fun!
153

Beyond Responsive Workshop [Beyond Tellerrand 2014]

More Related Content

What's hot (19)

Similar to Beyond Responsive Workshop [Beyond Tellerrand 2014] (20)

More from Aaron Gustafson (20)

Recently uploaded (20)

Beyond Responsive Workshop [Beyond Tellerrand 2014]