Planning Adaptive Interfaces [RWD Summit 2016]

1. PLANNING ADAPTIVE INTERFACES Aaron Gustafson @AaronGustafson slideshare.net/AaronGustafson

2. Web design is HARD © 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

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. Chasing screen
 sizes is a
 FOOL’S ERRAND © 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 < $30k 50% $30-50k 71% $50-75k 72% >$75k 84% Source

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

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

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

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

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

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

24. We DON’T know

25. Even when we
 think we know, we’re probably
 WRONG

26. So how do we COPE?

27. Progressive Enhancement

28. Technological
 restrictions

29. User Experience BASIC ADVANCED Browser Capabilities

30. User Experience BASIC ADVANCED Browser Capabilities Content

31. User Experience Browser Capabilities Semantics BASIC ADVANCED Content

32. User Experience Design Browser Capabilities Semantics BASIC ADVANCED Content

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

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

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

36. HTML

37. HTML5 Microformats HTML HTML4

38. Browsers ignore what they don’t understand

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

40. a dynamic web page can never break, it can only become a web page.

43. ๏Bugs ๏Browser Add-ons ๏Overzealous Firewalls ๏Underpowered devices ๏Page is still loading

47. SPoF

48. Content

50. So how do we PLAN
 for the unexpected?