Beyond Responsive [Future of Web Design 2015]

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

BEYOND
RESPONSIVE
Aaron Gustafson
@AaronGustafson
slideshare.net/AaronGustafson

© Brad Frost

[In 2008] the majority of our visitors
saw our website in Internet
Explorer on a Windows computer on a
minimum 1,024 pixel...

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

[In 2008] 74.9% of our web visitors
used Internet Explorer. That  
number has fallen to 19.7%.  
Firefox now comprises 20%...

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

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

© Brad Frost

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

< $30k
50%
$30-50k
71%
$50-75k
72%
>$75k
84%
Population(in
thousands)
0
30000
60000
90000
120000
<30k $30-50k $50-70k >$70...

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
Cloud FX
3.5” (480 × 320)
...

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

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

© Brad Frost

We DON’T know

We DON’T know

Even when
we think
we know,
WE ARE
PROBABLY
WRONG

So how
do we COPE?

Progressive
Enhancement

Technological 
restrictions

UserExperience
Browser Capabilities
BASIC ADVANCED

UserExperience
Browser Capabilities
BASIC ADVANCED
Content

UserExperience
Browser Capabilities
BASIC ADVANCED
Content
Semantics

UserExperience
Browser Capabilities
BASIC ADVANCED
Content
Semantics
Design

UserExperience
Browser Capabilities
BASIC ADVANCED
Content
Semantics
Design
Interactivity

UserExperience
Browser Capabilities
BASIC ADVANCED
Content
Semantics
Design
Interactivity
Accessibility

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

HTML

HTML
HTML5
Microformats
HTML4

Browsers ignore
what they don’t
understand

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

Graceful
Degradation

Modern
Browsers
Older Browsers

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

SPoF

Graceful Degradation Progressive
Enhancement

Content

Mobile
First
Responsive
Web Design
:-)

BEYOND RESPONSIVE
Lightboxes

BEYOND RESPONSIVE
Lightboxes

BEYOND RESPONSIVE
IxMap
JS?
No
No lightboxLoad

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

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

BEYOND RESPONSIVE
No need to link
<figure id="fig-1">
<img src="/path/small.png"
data-enlarged="/path/large.png"
alt="">
<...

BEYOND RESPONSIVE
Make the connection
<figure id="fig-1">
<img src="/path/small.png"
data-enlarged="/path/large.png"
alt="...

BEYOND RESPONSIVE
Lightboxes

BEYOND RESPONSIVE
Thumbnails

BEYOND RESPONSIVE
Thumbnails

BEYOND RESPONSIVE
IxMap
JS?
No
No imageLoad

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
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 imageLoad
Yes
Yes
Image
Adjust markup
Add custom CSS
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
<p class="entry-image"
data-image-src="/i/sample.jpg"></p>
<p class="entry-image"
data-im...

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( resiz...

$BEYOND RESPONSIVE JS Watcher var browser_width = 0; window.watchResize(function(){ browser_width = window.innerWidth || do...$

BEYOND RESPONSIVE
JS Watcher
window.watchResize(function(){
var threshold = 400,
image = document.createElement('img'),
pa...

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

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

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

BEYOND RESPONSIVE
Thumbnails

http://is.gd/lazyloading_demo

http://is.gd/lazyloading_demo

http://is.gd/lazyloading_demo

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

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

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

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

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

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

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

BEYOND RESPONSIVE
Lazy Loading
<section class="aux reviews loaded" id="reviews">
<header id="tab-reviews">
<a href="review...

http://is.gd/lazyloading_demo

BEYOND RESPONSIVE
Tabbed Interface

BEYOND RESPONSIVE
Traditional approach
<h1>Pumpkin Pie</h1>
<div class="container"> 
<ul class="tabs">
<li><a href="#">Ove...

BEYOND RESPONSIVE
Cleaner approach
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface"> 
<h2>Overview</h2>
<img src="pie.jp...

BEYOND RESPONSIVE
Cleaner approach
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface"> 
<h2>Overview</h2>
<img src="pie.jp...

BEYOND RESPONSIVE
No JS, basic CSS

BEYOND RESPONSIVE
IxMap
JS?
No
LinearLoad

BEYOND RESPONSIVE
IxMap
JS?
No
LinearLoad

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

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

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

BEYOND RESPONSIVE
Tabbed
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface TabInterface-enabled"> 
<ul class="tabs">
<li><...

BEYOND RESPONSIVE
Tabbed
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface TabInterface-enabled"> 
<ul class="tabs">
<li><...

BEYOND RESPONSIVE
IxMap
JS?
No
LinearLoad

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 & ke...

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

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

BEYOND RESPONSIVE
Result!

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

Beyond Responsive [18F 2015] by Aaron Gustafson 5211 views
Intro to Adaptive Web Design [ChaDe... by Aaron Gustafson 4117 views
Falling in Love with Forms [F0WD 2015] by Aaron Gustafson 2220 views
Beyond Responsive [Web Design Day] by Aaron Gustafson 166 views
So You've Got a Seat at the Table. ... by Andrea Mignolo 2048 views
Storymapping The User Experience by Donna Lichaw 32212 views

View on Slideshare

1 of 135 Ad

View on Slideshare

1 of 135 Ad