Beyond Responsive [18F 2015]

transcript

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

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

Galaxy S5 5.1” (1920 × 1080)

2GB RAM

16GB Storage

16MP Camera

2.5GHz Quad-core

Android 4.4

Cloud FX3.5” (480 × 320)

128MB RAM

256MB Storage

2MP Camera

1GHz Single-core

Firefox OS 1.3

Galaxy S5 5.1” (1920 × 1080)

2GB RAM

16GB Storage

16MP Camera

2.5GHz Quad-core

Android 4.4

Dash JR K3.5" (480 × 320)

256 MB RAM

512MB Memory

2MP camera

1.3 GHz Dual-core

Android 4.4

As of Q4 2014, 62% of newnon-phone AT&T subscriptions are

connected carsSource

We DON’T know

Even when we think we know, WE ARE

PROBABLY WRONG

So how do we COPE?

Progressive Enhancement

Technologicalrestrictions

Browser CapabilitiesBASIC ADVANCED

Content

Semantics

Content

Semantics

Design

Content

Semantics

Design

Interactivity

Content

Semantics

Design

Interactivity

Accessibility

Text & HTTP

JavaScript

HTMLHTML5

Microformats

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

Graceful Degradation Progressive Enhancement

Content

Mobile First

Responsive Web Design

BEYOND RESPONSIVE

Lightboxes

BEYOND RESPONSIVE

Lightboxes

BEYOND RESPONSIVE

JS?No No lightboxLoad

BEYOND RESPONSIVE

Verify browser width conditionLIVE

BEYOND RESPONSIVE

Lightbox

Create link Make image clickable

BEYOND RESPONSIVE

Lightbox

Create link Make image clickable

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

JS?No No imageLoad

BEYOND RESPONSIVE

JS?No No imageLoad

BEYOND RESPONSIVE

JS?No No imageLoad

Verify browser width condition

BEYOND RESPONSIVE

JS?No No imageLoad

BEYOND RESPONSIVE

JS?No No imageLoad

Adjust markup Add custom CSS

BEYOND RESPONSIVE

JS?No No imageLoad

BEYOND RESPONSIVE

JS?No No imageLoad

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>

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

JS?No No imageLoad

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

BEYOND RESPONSIVE

NO!!!!#reviews { display: none; }

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

BEYOND RESPONSIVE

JS?No LinksLoad

BEYOND RESPONSIVE

JS?No LinksLoad

BEYOND RESPONSIVE

JS?No LinksLoad

NoHold for user action

BEYOND RESPONSIVE

JS?No LinksLoad

BEYOND RESPONSIVE

JS?No LinksLoad

Reviews

Lazy Load the reviews

BEYOND RESPONSIVE

JS?No LinksLoad

Reviews

BEYOND RESPONSIVE

JS?No LinksLoad

Reviews

Verify browser width conditionLIVE Click

BEYOND RESPONSIVE

JS?No LinksLoad

Reviews

Verify browser width conditionLIVE Click

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

JS?No LinearLoad

BEYOND RESPONSIVE

JS?No LinearLoad

BEYOND RESPONSIVE

JS?No LinearLoad

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

BEYOND RESPONSIVE

JS?No LinearLoad

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

JS?No LinearLoad

BEYOND RESPONSIVE

JS?No LinearLoad

Verify space for tabsLIVE

BEYOND RESPONSIVE

JS?No LinearLoad

NoAccordion

Build accordion

BEYOND RESPONSIVE

JS?No LinearLoad

NoAccordion

Build accordion

BEYOND RESPONSIVE

JS?Load

No Linear

Accordion

Build accordion

Native

Insert details & summary

Support details & summary?

BEYOND RESPONSIVE

role="tablist"

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

Beyond Responsive [18F 2015]

Technology