Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (19)
Ähnlich wie Beyond Responsive [Web Design Day]
Ähnlich wie Beyond Responsive [Web Design Day] (20)
Mehr von Aaron Gustafson
Mehr von Aaron Gustafson (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Beyond Responsive [Web Design Day]
- 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 “ 1062
- 8. In 2008, 27 screen resolutions showed up with more than 10 visits, in 2014 that number was“ 200
- 9. © Brad Frost
- 13. Smartphones have reached 75% penetration in the US… “ Source
- 14. …but that’s concentrated in 61% of households
- 15. U.S. Smartphone penetration #s released in March 2015 Source < $30k 50% $30-50k 71% $50-75k 72% >$75k 84%
- 16. 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%
- 17. < $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!
- 18. Smartphone users making < $30k/yr experienced app errors 52% of the time Source
- 19. 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
- 20. 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
- 21. As of Q4 2014, 62% of new non-phone AT&T subscriptions are connected cars Source
- 28. © Brad Frost
- 29. We DON’T know
- 31. We DON’T know
- 32. Even when we think we know, WE ARE PROBABLY WRONG
- 33. So how do we COPE?
- 42. UserExperience Browser Capabilities BASIC ADVANCED Text & HTTP HTML CSS JavaScript ¶ <> {} ↖ ARIA
- 43. HTML
- 45. Browsers ignore what they don’t understand
- 46. I like an escalator because an escalator can never break, it can only become stairs. — Mitch Hedberg
- 51. a dynamic web page can never break, it can only become a web page.
- 55. ๏Bugs ๏Browser Add-ons ๏Overzealous Firewalls ๏Underpowered devices ๏Page is still loading
- 59. SPoF
- 61. Content
- 69. BEYOND RESPONSIVE IxMap No Yes Verify browser width condition LIVE JS? No No lightboxLoad
- 70. BEYOND RESPONSIVE IxMap No Yes Verify browser width condition LIVE JS? No No lightboxLoad
- 71. BEYOND RESPONSIVE IxMap No JS? No No lightboxLoad Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE
- 72. BEYOND RESPONSIVE IxMap No JS? No No lightboxLoad Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE
- 73. 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>
- 74. 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>
- 80. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Verify browser width condition
- 81. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Verify browser width condition
- 82. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
- 83. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS 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 There is no image… <p class="entry-image" data-image-src="/i/sample.jpg"></p>
- 86. 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>
- 87. BEYOND RESPONSIVE CSS at rest [data-image-src] { display: none; }
- 88. BEYOND RESPONSIVE CSS at play [data-image-src][data-image-loaded] { display: block; }
- 89. 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(); };
- 90. BEYOND RESPONSIVE JS Watcher var browser_width = 0; window.watchResize(function(){ browser_width = window.innerWidth || document.body.offsetWidth; });
- 91. 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; } });
- 92. BEYOND RESPONSIVE IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition LIVE
- 93. BEYOND RESPONSIVE Smart CSS [data-image-src][data-image-loaded] { display: block; }
- 94. 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; } }
- 100. BEYOND RESPONSIVE NO!!!! #reviews { display: none; } @media only screen and (min-width:50em) { #reviews { display: block; } }
- 103. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Verify browser width condition LIVE No Hold for user action
- 104. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Verify browser width condition LIVE No Hold for user action
- 105. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE No Hold for user action
- 106. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews 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 Click No Hold for user action
- 108. BEYOND RESPONSIVE IxMap JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE Click No Hold for user action
- 109. BEYOND RESPONSIVE Lazy Loading <section class="aux reviews" id="reviews"> <header id="tab-reviews"> <a href="reviews.html" class="disabled">…</a> </header> </section>
- 110. 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>
- 113. 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>
- 114. 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>
- 115. 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>
- 116. BEYOND RESPONSIVE No JS, basic CSS
- 119. BEYOND RESPONSIVE IxMap JS? No LinearLoad Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard)
- 120. BEYOND RESPONSIVE IxMap JS? No LinearLoad Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard)
- 121. 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>
- 122. 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>
- 123. 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>
- 126. BEYOND RESPONSIVE IxMap JS? No LinearLoad Yes Verify space for tabs LIVE No Accordion Build accordion
- 127. 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
- 128. BEYOND RESPONSIVE JS?Load IxMap Yes Tabs Yes Verify space for tabs LIVE No Linear <?>
- 129. BEYOND RESPONSIVE JS?Load IxMap Yes Tabs Yes Verify space for tabs LIVE No Linear 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?