Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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!
Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]
Upcoming SlideShare
Loading in …5
×

Beyond Responsive [Web Design Day]

65 views

Published on

Slides from the workshop.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Beyond Responsive [Web Design Day]

  1. 1. BEYOND RESPONSIVE Aaron Gustafson @AaronGustafson slideshare.net/AaronGustafson
  2. 2. © Brad Frost
  3. 3. [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
  4. 4. Windows users used to comprise 93.5% of our web visits. Now that percentage is 68.2%. “
  5. 5. 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%
  6. 6. [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%. “
  7. 7. In the second quarter of 2008 we detected 71 different screen resolutions among our visitors. In the first quarter of 2014 we detected “ 1062
  8. 8. In 2008, 27 screen 
 resolutions showed up with more than 10 visits, in 2014 that number was“ 200
  9. 9. © Brad Frost
  10. 10. Smartphones have reached 75% penetration in the US… “ Source
  11. 11. …but that’s concentrated in 61% of households
  12. 12. U.S. Smartphone penetration #s released in March 2015 Source < $30k 50% $30-50k 71% $50-75k 72% >$75k 84%
  13. 13. 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%
  14. 14. < $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!
  15. 15. Smartphone users making < $30k/yr
 experienced app errors
 52% of the time Source
  16. 16. 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
  17. 17. 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
  18. 18. As of Q4 2014, 62% of new
 non-phone AT&T subscriptions are
 connected cars Source
  19. 19. © Brad Frost
  20. 20. We DON’T know
  21. 21. We DON’T know
  22. 22. Even when we think we know, WE ARE PROBABLY WRONG
  23. 23. So how do we COPE?
  24. 24. Progressive Enhancement
  25. 25. Technological
 restrictions
  26. 26. UserExperience Browser Capabilities BASIC ADVANCED
  27. 27. UserExperience Browser Capabilities BASIC ADVANCED Content
  28. 28. UserExperience Browser Capabilities BASIC ADVANCED Content Semantics
  29. 29. UserExperience Browser Capabilities BASIC ADVANCED Content Semantics Design
  30. 30. UserExperience Browser Capabilities BASIC ADVANCED Content Semantics Design Interactivity
  31. 31. UserExperience Browser Capabilities BASIC ADVANCED Content Semantics Design Interactivity Accessibility
  32. 32. UserExperience Browser Capabilities BASIC ADVANCED Text & HTTP HTML CSS JavaScript ¶ <> {} ↖ ARIA
  33. 33. HTML
  34. 34. HTML HTML5 Microformats HTML4
  35. 35. Browsers ignore what they don’t understand
  36. 36. I like an escalator because an escalator can never break, it can only become stairs. — Mitch Hedberg
  37. 37. Graceful Degradation
  38. 38. Modern Browsers Older Browsers
  39. 39. Modern Browsers Older Browsers
  40. 40. a dynamic web page can never break, it can only become a web page.
  41. 41. ๏Bugs ๏Browser Add-ons ๏Overzealous Firewalls ๏Underpowered devices ๏Page is still loading
  42. 42. SPoF
  43. 43. Graceful Degradation Progressive Enhancement
  44. 44. Content
  45. 45. Mobile First Responsive Web Design :-)
  46. 46. BEYOND RESPONSIVE Lightboxes
  47. 47. BEYOND RESPONSIVE Lightboxes
  48. 48. BEYOND RESPONSIVE IxMap JS? No No lightboxLoad
  49. 49. BEYOND RESPONSIVE IxMap JS? No No lightboxLoad
  50. 50. BEYOND RESPONSIVE IxMap No Yes Verify browser width condition LIVE JS? No No lightboxLoad
  51. 51. BEYOND RESPONSIVE IxMap No Yes Verify browser width condition LIVE JS? No No lightboxLoad
  52. 52. BEYOND RESPONSIVE IxMap No JS? No No lightboxLoad Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE
  53. 53. BEYOND RESPONSIVE IxMap No JS? No No lightboxLoad Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE
  54. 54. 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>
  55. 55. 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>
  56. 56. BEYOND RESPONSIVE Lightboxes
  57. 57. BEYOND RESPONSIVE Thumbnails
  58. 58. BEYOND RESPONSIVE Thumbnails
  59. 59. BEYOND RESPONSIVE IxMap JS? No No imageLoad
  60. 60. BEYOND RESPONSIVE IxMap JS? No No imageLoad
  61. 61. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Verify browser width condition
  62. 62. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Verify browser width condition
  63. 63. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
  64. 64. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
  65. 65. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
  66. 66. BEYOND RESPONSIVE There is no image… <p class="entry-image" data-image-src="/i/sample.jpg"></p>
  67. 67. 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>
  68. 68. BEYOND RESPONSIVE CSS at rest [data-image-src] { display: none; }
  69. 69. BEYOND RESPONSIVE CSS at play [data-image-src][data-image-loaded] { display: block; }
  70. 70. 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(); };
  71. 71. BEYOND RESPONSIVE JS Watcher var browser_width = 0; window.watchResize(function(){ browser_width = window.innerWidth || document.body.offsetWidth; });
  72. 72. 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; } });
  73. 73. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition LIVE
  74. 74. BEYOND RESPONSIVE Smart CSS [data-image-src][data-image-loaded] { display: block; }
  75. 75. 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; } }
  76. 76. BEYOND RESPONSIVE Thumbnails
  77. 77. http://is.gd/lazyloading_demo
  78. 78. http://is.gd/lazyloading_demo
  79. 79. http://is.gd/lazyloading_demo
  80. 80. http://is.gd/lazyloading_demo
  81. 81. BEYOND RESPONSIVE NO!!!! #reviews { display: none; } @media only screen and (min-width:50em) { #reviews { display: block; } }
  82. 82. BEYOND RESPONSIVE IxMap JS? No LinksLoad
  83. 83. BEYOND RESPONSIVE IxMap JS? No LinksLoad
  84. 84. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Verify browser width condition LIVE No Hold for user action
  85. 85. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Verify browser width condition LIVE No Hold for user action
  86. 86. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE No Hold for user action
  87. 87. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE No Hold for user action
  88. 88. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE Click No Hold for user action
  89. 89. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE Click No Hold for user action
  90. 90. BEYOND RESPONSIVE Lazy Loading <section class="aux reviews" id="reviews"> <header id="tab-reviews"> <a href="reviews.html" class="disabled">…</a> </header> </section>
  91. 91. 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>
  92. 92. http://is.gd/lazyloading_demo
  93. 93. BEYOND RESPONSIVE Tabbed Interface
  94. 94. 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>
  95. 95. 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>
  96. 96. 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>
  97. 97. BEYOND RESPONSIVE No JS, basic CSS
  98. 98. BEYOND RESPONSIVE IxMap JS? No LinearLoad
  99. 99. BEYOND RESPONSIVE IxMap JS? No LinearLoad
  100. 100. BEYOND RESPONSIVE IxMap JS? No LinearLoad Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard)
  101. 101. BEYOND RESPONSIVE IxMap JS? No LinearLoad Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard)
  102. 102. 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>
  103. 103. 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>
  104. 104. 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>
  105. 105. BEYOND RESPONSIVE IxMap JS? No LinearLoad
  106. 106. BEYOND RESPONSIVE IxMap JS? No LinearLoad Yes Verify space for tabs LIVE
  107. 107. BEYOND RESPONSIVE IxMap JS? No LinearLoad Yes Verify space for tabs LIVE No Accordion Build accordion
  108. 108. 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
  109. 109. BEYOND RESPONSIVE JS?Load IxMap Yes Tabs Yes Verify space for tabs LIVE No Linear <?>
  110. 110. BEYOND RESPONSIVE JS?Load IxMap Yes Tabs Yes Verify space for tabs LIVE No Linear No Accordion Build accordion <?>
  111. 111. 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?
  112. 112. BEYOND RESPONSIVE role="tablist" 108 Adding ARIA
  113. 113. BEYOND RESPONSIVE role="tab" aria-selected="true" aria-controls="folder-1" Adding ARIA
  114. 114. BEYOND RESPONSIVE role="tab" aria-selected="false" aria-controls="folder-4" Adding ARIA
  115. 115. BEYOND RESPONSIVE role="tabpanel" aria-hidden="false" aria-labelledby="folder-1-tab" Adding ARIA
  116. 116. BEYOND RESPONSIVE Result!

×