Beyond Responsive [18F 2015]
•
10 likes•5,177 views
Responsive web design has taken our industry by storm and with good reason: it helps us improve our reach with less effort. But incorporating responsive design is not the goal, meeting your user’s needs is. Responsive design is not an end in itself… it’s just the beginning. Embracing the heterogenous nature of the web—the myriad web-enabled devices with vastly different dimensions, screen sizes, networks, and capabilities in use by countless individuals, each with their own special needs—allows you to craft experiences that will work anywhere at any time. It also helps you build robust systems that adapt in ways far beyond aesthetics. This talk will cover a number of considerations that you should be aware of, beyond screen size and pixel density, and provide examples of how to adapt your interfaces so they rise to meet your users’ needs.
Recommended
Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (9)
Similar to Beyond Responsive [18F 2015]
Similar to Beyond Responsive [18F 2015] (20)
More from Aaron Gustafson
More from Aaron Gustafson (20)
Recently uploaded
Recently uploaded (20)
Beyond Responsive [18F 2015]
- 2. © Brad Frost
- 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. Windows users used to comprise 93.5% of our web visits. Now that percentage is 68.2%. “
- 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. [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. In the second quarter of 2008 we detected 71 different screen resolutions among our visitors. In the first quarter of 2014 we detected “
- 8. In the second quarter of 2008 we detected 71 different screen resolutions among our visitors. In the first quarter of 2014 we detected “ 1062
- 9. In 2008, 27 screen resolutions showed up with more than 10 visits, in 2014 that number was“ 200
- 10. © Brad Frost
- 14. Smartphones have reached 75% penetration in the US… “ Source
- 15. …but that’s concentrated in 61% of households
- 16. U.S. Smartphone penetration #s released in March 2015 Source < $30k 50% $30-50k 71% $50-75k 72% >$75k 84%
- 17. 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%
- 18. < $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!
- 19. Smartphone users making < $30k/yr experienced app errors 52% of the time Source
- 20. Galaxy S5 5.1” (1920 × 1080) 2GB RAM 16GB Storage 16MP Camera 2.5GHz Quad-core Android 4.4 $799
- 21. 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
- 22. 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
- 23. As of Q4 2014, 62% of new non-phone AT&T subscriptions are connected cars Source
- 30. © Brad Frost
- 31. We DON’T know
- 33. We DON’T know
- 34. Even when we think we know, WE ARE PROBABLY WRONG
- 35. So how do we COPE?
- 44. UserExperience Browser Capabilities BASIC ADVANCED Text & HTTP HTML CSS JavaScript ¶ <> {} ↖ ARIA
- 45. HTML
- 47. Browsers ignore what they don’t understand
- 48. I like an escalator because an escalator can never break, it can only become stairs. — Mitch Hedberg
- 53. a dynamic web page can never break, it can only become a web page.
- 57. ๏Bugs ๏Browser Add-ons ๏Overzealous Firewalls ๏Underpowered devices ๏Page is still loading
- 61. SPoF
- 63. Content
- 71. BEYOND RESPONSIVE IxMap No Yes Verify browser width condition LIVE JS? No No lightboxLoad
- 72. BEYOND RESPONSIVE IxMap No Yes Verify browser width condition LIVE JS? No No lightboxLoad
- 73. BEYOND RESPONSIVE IxMap No JS? No No lightboxLoad Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE
- 74. BEYOND RESPONSIVE IxMap No JS? No No lightboxLoad Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE
- 75. 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>
- 76. 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>
- 82. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Verify browser width condition
- 83. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Verify browser width condition
- 84. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
- 85. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
- 86. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
- 87. BEYOND RESPONSIVE There is no image… <p class="entry-image" data-image-src="/i/sample.jpg"></p>
- 88. 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>
- 89. BEYOND RESPONSIVE CSS at rest [data-image-src] { display: none; }
- 90. BEYOND RESPONSIVE CSS at play [data-image-src][data-image-loaded] { display: block; }
- 91. 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(); };
- 92. BEYOND RESPONSIVE JS Watcher var browser_width = 0; window.watchResize(function(){ browser_width = window.innerWidth || document.body.offsetWidth; });
- 93. 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; } });
- 94. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition LIVE
- 95. BEYOND RESPONSIVE Smart CSS [data-image-src][data-image-loaded] { display: block; }
- 96. 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; } }
- 102. BEYOND RESPONSIVE NO!!!! #reviews { display: none; } @media only screen and (min-width:50em) { #reviews { display: block; } }
- 105. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Verify browser width condition LIVE No Hold for user action
- 106. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Verify browser width condition LIVE No Hold for user action
- 107. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE No Hold for user action
- 108. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE No Hold for user action
- 109. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE Click No Hold for user action
- 110. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE Click No Hold for user action
- 111. BEYOND RESPONSIVE Lazy Loading <section class="aux reviews" id="reviews"> <header id="tab-reviews"> <a href="reviews.html" class="disabled">…</a> </header> </section>
- 112. 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>
- 115. 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>
- 116. 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>
- 117. 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>
- 118. BEYOND RESPONSIVE No JS, basic CSS
- 121. BEYOND RESPONSIVE IxMap JS? No LinearLoad Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard)
- 122. BEYOND RESPONSIVE IxMap JS? No LinearLoad Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard)
- 123. 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>
- 124. 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>
- 125. 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>
- 128. BEYOND RESPONSIVE IxMap JS? No LinearLoad Yes Verify space for tabs LIVE No Accordion Build accordion
- 129. 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
- 130. 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?