Intro to Adaptive Web Design [ChaDev Lunch]
•
13 likes•4,104 views
This document summarizes key changes in web usage over the past decade that have necessitated responsive and adaptive web design approaches. It notes that desktop usage has declined while mobile usage has grown exponentially, with over 50% of US households now owning smartphones. Browser and device fragmentation has also increased dramatically. The document then introduces concepts of responsive web design like fluid grids, flexible images and media queries to build websites that can adapt to different screens. It emphasizes the importance of progressive enhancement and graceful degradation to ensure accessibility across browsers. Overall it argues for content-first, semantics-based approaches to building websites that can provide good experiences across devices.
Recommended
Recommended
More Related Content
What's hot
What's hot (12)
Viewers also liked
Viewers also liked (8)
Similar to Intro to Adaptive Web Design [ChaDev Lunch]
Similar to Intro to Adaptive Web Design [ChaDev Lunch] (20)
More from Aaron Gustafson
More from Aaron Gustafson (20)
Recently uploaded
Recently uploaded (20)
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 different screen resolutions among our visitors. In the first 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 http://www.pewinternet.org/2014/02/27/part-1-how-the-internet-has-woven-itself-into-american-life/ < $30k 47% $30-50k 53% $50-75k 61% >$75k 81%
- 14. U.S. Smartphone penetration #s released in February http://www.pewinternet.org/2014/02/27/part-1-how-the-internet-has-woven-itself-into-american-life/ $30k = Average US income 2013 < $30k 47% $30-50k 53% $50-75k 61% >$75k 81%
- 15. < $30k 47% $30-50k 53% $50-75k 61% >$75k 81% 0 30000 60000 90000 120000 <30k $30-50k $50-70k >$70k Population(inthousands) 8,767 U.S. Smartphone vs. Income distribution
- 16. < $30k 47% $30-50k 53% $50-75k 61% >$75k 81% 0 30000 60000 90000 120000 <30k $30-50k $50-70k >$70k Population(inthousands) 8,767 U.S. Smartphone vs. Income distribution Opportunity!
- 18. The reality
- 20. © Brad Frost
- 22. © Brad Frost
- 24. INTRO TO ADAPTIVE WEB DESIGN What is RWD? ๏ Fluid grids ๏ Flexible media ๏ Media queries 22
- 25. INTRO TO ADAPTIVE WEB DESIGN Fluid Grids 100% 48% 48% 32% 66% 32% 32% 32% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5%
- 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 Stuff ๏ 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
- 57. BASIC ADVANCED UserExperience Browser Capabilities Text & HTTP HTML CSS JavaScript ¶ <> {} ↖ ARIA
- 58. HTML
- 60. MCMLXXVII
- 65. HTML CSS
- 66. fault tolerance n. a system’s ability to continue to operate when it encounters and unexpected error.
- 70. Browsers ignore what they don’t understand
- 73. Users must have access to key content tasks&
- 74. Make sure markup, styles scripts don’t obscure it. &
- 77. INTRO TO ADAPTIVE WEB DESIGN Semantics 101 <p>HTML5 introduces several <em>really</em> useful elements and a ton of new APIs.</p> <p>Please fill out the form below. <strong>Note: all fields are required.</strong></p> <p>I like to work with markup languages because <strong>they are simple and easy to read</strong>. They also have that certain <i lang="fr" title="I don’t know what">je ne sais quoi</i>.</p>
- 94. But it’s not only about no JavaScript
- 95. ๏Bugs ๏Browser Add-ons ๏Overzealous Firewalls ๏Underpowered devices ๏Page is still loading
- 96. SPoF
- 99. “special needs”
- 103. BASIC ADVANCED UserExperience Browser Capabilities Text & HTTP HTML CSS JavaScript ¶ <> {} ↖ ARIA
- 108. Intro to Adaptive Web Design by Aaron Gustafson @AaronGustafson Further reading: http://adaptivewebdesign.info http://blog.easy-designs.net http://mobilewebbestpractices.com Slides available at http://slideshare.net/AaronGustafson This presentation is licensed under Creative Commons Attribution-Noncommercial-Share Alike 3.0 except where otherwise noted flickr Photo Credits http://www.flickr.com/photos/aarongustafson/galleries/72157637122441956/