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

© 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 72%

>$75k 84%

< $30k 50%

$30-50k 71%

$50-75k 72%

>$75k 84%

Popu

latio

n (in

th

ousa

nds)

0

30000

60000

90000

120000

<30k $30-50k $50-70k >$70k

U.S. Smartphone vs. Income distribution

Opportunity!

Smartphone users making < $30k/yrexperienced app errors52% 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 FX3.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 K3.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 newnon-phone AT&T subscriptions are

connected carsSource

© 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

Technologicalrestrictions

Use

r Exp

erie

nce

Browser CapabilitiesBASIC ADVANCED

Use

r Exp

erie

nce

Browser CapabilitiesBASIC ADVANCED

Content

Use

r Exp

erie

nce

Browser CapabilitiesBASIC ADVANCED

Content

Semantics

Use

r Exp

erie

nce

Browser CapabilitiesBASIC ADVANCED

Content

Semantics

Design

Use

r Exp

erie

nce

Browser CapabilitiesBASIC ADVANCED

Content

Semantics

Design

Interactivity

Use

r Exp

erie

nce

Browser CapabilitiesBASIC ADVANCED

Content

Semantics

Design

Interactivity

Accessibility

Use

r Exp

erie

nce

Browser CapabilitiesBASIC ADVANCED

Text & HTTP

HTML

CSS

JavaScript

¶

<>

{}

↖

ARIA

HTML

HTMLHTML5

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 conditionLIVE

JS?No No lightboxLoad

BEYOND RESPONSIVE

IxMap

No

Yes

Verify browser width conditionLIVE

JS?No No lightboxLoad

BEYOND RESPONSIVE

IxMap

No

JS?No No lightboxLoad

Yes

Yes

Lightbox

Create link Make image clickable

Verify browser width conditionLIVE

BEYOND RESPONSIVE

IxMap

No

JS?No No lightboxLoad

Yes

Yes

Lightbox

Create link Make image clickable

Verify browser width conditionLIVE

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

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-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 Watcherwindow.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 Watchervar browser_width = 0; window.watchResize(function(){ browser_width = window.innerWidth || document.body.offsetWidth; });

BEYOND RESPONSIVE

JS Watcherwindow.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 conditionLIVE

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:400px) { [data-img-src][data-image-loaded] { display: block; } }

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 conditionLIVE

NoHold for user action

BEYOND RESPONSIVE

IxMap

JS?No LinksLoad

Yes

Verify browser width conditionLIVE

NoHold for user action

BEYOND RESPONSIVE

IxMap

JS?No LinksLoad

Yes

Yes

Reviews

Lazy Load the reviews

Verify browser width conditionLIVE

NoHold for user action

BEYOND RESPONSIVE

IxMap

JS?No LinksLoad

Yes

Yes

Reviews

Lazy Load the reviews

Verify browser width conditionLIVE

NoHold for user action

BEYOND RESPONSIVE

IxMap

JS?No LinksLoad

Yes

Yes

Reviews

Lazy Load the reviews

Verify browser width conditionLIVE Click

NoHold for user action

BEYOND RESPONSIVE

IxMap

JS?No LinksLoad

Yes

Yes

Reviews

Lazy Load the reviews

Verify browser width conditionLIVE Click

NoHold for user action

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>

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="#">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<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>

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>

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 & keyboard)

BEYOND RESPONSIVE

IxMap

JS?No LinearLoad

Yes

Tabs

Split content into sections Make tabs Assign event handlers (mouse & keyboard)

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>

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>

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>

BEYOND RESPONSIVE

IxMap

JS?No LinearLoad

BEYOND RESPONSIVE

IxMap

JS?No LinearLoad

Yes

Verify space for tabsLIVE

BEYOND RESPONSIVE

IxMap

JS?No LinearLoad

Yes

Verify space for tabsLIVE

NoAccordion

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 tabsLIVE

NoAccordion

Build accordion

BEYOND RESPONSIVE

JS?Load

IxMap

Yes

Tabs

Yes

Verify space for tabsLIVE

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

BEYOND RESPONSIVE

Result!

BEYOND RESPONSIVE

Result!

BEYOND RESPONSIVE

Tabbed Interface

Questions?

Tweet me at@AaronGustafson

Thank you!

@AaronGustafson aaron-gustafson.com

slideshare.net/AaronGustafson