html5-img
1 / 139

Beyond Responsive [18F 2015]

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

AaronGustafson
Download Presentation

Beyond Responsive [18F 2015]

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. BEYOND RESPONSIVE Aaron Gustafson @AaronGustafson slideshare.net/AaronGustafson

  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

  11. “ Smartphones have reached 75% penetration in the US… Source

  12. …but that’s concentrated in 61% of households

  13. U.S. Smartphone penetration #s released in March 2015 < $30k 50% $30-50k 71% $50-75k 72% >$75k 84% Source

  14. U.S. Smartphone penetration #s released in March 2015 < $30k 50% $30-50k 71% $50-75k 72% >$75k 84% $30k = Average US income 2013 Source

  15. U.S. Smartphone vs. Income distribution < $30k 50% $30-50k 71% $50-75k 72% >$75k 84% 120000 Opportunity! Population (in 90000 thousands) 60000 30000 0 <30k $30-50k $50-70k >$70k

  16. Smartphone users making < $30k/yr
 experienced app errors
 52% of the time Source

  17. Galaxy S5 5.1” (1920 × 1080) 2GB RAM 16GB Storage 16MP Camera 2.5GHz Quad-core Android 4.4 $799

  18. Galaxy S5 Cloud FX 5.1” (1920 × 1080) 3.5” (480 × 320) 2GB RAM 128MB RAM 16GB Storage 256MB Storage 16MP Camera 2MP Camera 2.5GHz Quad-core 1GHz Single-core Android 4.4 Firefox OS 1.3 $799 $35

  19. Galaxy S5 Dash JR K 5.1” (1920 × 1080) 3.5" (480 × 320) 2GB RAM 256 MB RAM 16GB Storage 512MB Memory 16MP Camera 2MP camera 2.5GHz Quad-core 1.3 GHz Dual-core Android 4.4 Android 4.4 $799 $43

  20. As of Q4 2014, 62% of new
 non-phone AT&T subscriptions are
 connected cars Source

  21. © Brad Frost

  22. We DON’T know

  23. We DON’T know

  24. Even when we think we know, WE ARE PROBABLY WRONG

  25. So how do we COPE?

  26. Progressive Enhancement

  27. Technological
 restrictions

  28. User Experience BASIC ADVANCED Browser Capabilities

  29. User Experience BASIC ADVANCED Browser Capabilities Content

  30. User Experience Browser Capabilities Semantics BASIC ADVANCED Content

  31. User Experience Design Browser Capabilities Semantics BASIC ADVANCED Content

  32. User Experience Interactivity Design Browser Capabilities Semantics BASIC ADVANCED Content

  33. User Experience Accessibility Interactivity Design Browser Capabilities Semantics BASIC ADVANCED Content

  34. User Experience ARIA JavaScript ↖ {} CSS <> Browser Capabilities HTML BASIC ADVANCED ¶ Text & HTTP

  35. HTML

  36. HTML5 Microformats HTML HTML4

  37. Browsers ignore what they don’t understand

  38. I like an escalator because an escalator can never break, it can only become stairs. — Mitch Hedberg

  39. Graceful Degradation

  40. Modern Browsers Older Browsers

More Related