Intro to Adaptive Web Design [ChaDev Lunch]

1. INTRO TO Adaptive Web Design Aaron Gustafson @aarongustafson slideshare.net/AaronGustafson

2. © Brad Frost

3. “ Just four years ago 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 72.4%. Visitors using a Mac have more than tripled.

5. “ The percentage visiting from a mobile device or tablet … was just 0.1% in 2008. It has since grown exponentially, 200-400% per year, to 6.2% today.

6. “ Four years ago 75.5% of our web visitors used Internet Explorer. That number has fallen to 37%. Firefox now comprises 25.5%, Safari 19.5%, and Chrome 15.3%.

7. “ In the second quarter of 2008 we detected 71 diferent screen resolutions among our visitors. In the frst quarter of 2012 we detected 830

8. © Brad Frost

9. “ Smartphone sales accounted for nearly 85% of all mobile phone sales in the US in Q1 2013. http://www.chetansharma.com/usmarketupdateq12013.htm

10. “ Smartphones have reached 50% penetration in the US… http://www.chetansharma.com/usmarketupdateq12013.htm

12. “ …but that’s concentrated in 30% of households http://www.chetansharma.com/usmarketupdateq12013.htm

13. U.S. Smartphone penetration #s released in February < $30k 47% $30-50k 53% $50-75k 61% >$75k 81% http://www.pewinternet.org/2014/02/27/part-1-how-the-internet-has-woven-itself-into-american-life/

14. U.S. Smartphone penetration #s released in February < $30k 47% $30-50k 53% $50-75k 61% >$75k 81% $30k = Average US income 2013 http://www.pewinternet.org/2014/02/27/part-1-how-the-internet-has-woven-itself-into-american-life/

15. U.S. Smartphone vs. Income distribution < $30k 47% $30-50k 53% $50-75k 61% >$75k 81% 8,767 120000 Population (in thousands) 90000 60000 30000 0 <30k $30-50k $50-70k >$70k

16. U.S. Smartphone vs. Income distribution < $30k 47% $30-50k 53% $50-75k 61% >$75k 81% 8,767 120000 Population (in thousands) Opportunity! 90000 60000 30000 0 <30k $30-50k $50-70k >$70k

18. The reality

20. © Brad Frost

22. © Brad Frost

23. RWD To the Rescue!

24. INTRO TO ADAPTIVE WEB DESIGN What is RWD? ๏ Fluid grids ๏ Flexible media ๏ Media queries 22

25. INTRO TO ADAPTIVE WEB DESIGN Fluid Grids 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 32% 32% 32% 32% 66% 48% 48% 100%

26. INTRO TO ADAPTIVE WEB DESIGN Flexible Media img { max-width: 100%; height: auto; }

27. INTRO TO ADAPTIVE WEB DESIGN Media Queries @media screen and (min-width:450px) { /* Styles for screen media when browser is 450px wide or larger */ }

36. INTRO TO ADAPTIVE WEB DESIGN But That’s the Easy Stuf ๏ Content strategy ๏ Page weight ๏ JavaScript support ๏ Interaction methods ๏ Network latency & performance ๏ Hardware performance ๏ Screen resolution ๏ Sensor availability ๏ etc. 34

37. INTRO TO ADAPTIVE WEB DESIGN What’s in a name? ๏ Responsive Web Design ๏ Adaptive Web Design ๏ Progressive Enhancement ๏ Aggressive Enhancement ๏ Responsible Web Design 35

38. INTRO TO ADAPTIVE WEB DESIGN What’s in a name? ๏ Responsive Web Design ๏ Adaptive Web Design ๏ Progressive Enhancement ๏ Aggressive Enhancement ๏ Responsible Web Design 36

39. © Brad Frost

40. We don’t know

41. Even when we think we know, we’re probably wrong

42. So how do we cope?

43. Content

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

47. Graceful Degradation

48. Modern Browsers Older Browsers

49. Modern Browsers Older Browsers