Intro to Adaptive Web Design [ChaDev Lunch]

3,709 views

Published on

For years, designers and developers have griped about the difficulties they encountered in supporting the numerous desktop browsers out there, but mobile is even more fragmented. Phones, tablets, media players, video game systems—each device (and in some cases each browser on each device) has its own dimensions, quirks and capabilities. It can make your brain hurt just thinking about it.

Thankfully, going mobile doesn’t have to be a painful experience. In this session, Aaron Gustafson will introduce you to the concept of progressive enhancement and demonstrate why it is the way forward for web design, especially on mobile devices. In the course of his talk, he’ll walk you through progressive enhancement’s layered approach and show you how the latest techniques—mobile first, responsive design, and adaptive UI—fit in to the process.

Published in: Technology, Design
1 Comment
13 Likes
Statistics
Notes
  • I am very happy to read your articles it’s very useful for me,
    and I am completely satisfied with your website.
    All comments and articles are very useful and very good.
    Your blog is very attention-grabbing. I am loving all of the in
    turn you are sharing with each one!…
    Website Designing
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,709
On SlideShare
0
From Embeds
0
Number of Embeds
54
Actions
Shares
0
Downloads
1,228
Comments
1
Likes
13
Embeds 0
No embeds

No notes for slide

Intro to Adaptive Web Design [ChaDev Lunch]

  1. 1. INTRO TO Adaptive Web Design Aaron Gustafson @aarongustafson slideshare.net/AaronGustafson
  2. 2. © Brad Frost
  3. 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. 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. 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. 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. 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. 8. © Brad Frost
  9. 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. 10. Smartphones have reached 50% penetration in the US… “ http://www.chetansharma.com/usmarketupdateq12013.htm
  11. 11. …but that’s concentrated in 30% of households “ http://www.chetansharma.com/usmarketupdateq12013.htm
  12. 12. 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%
  13. 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 = Average US income 2013 < $30k 47% $30-50k 53% $50-75k 61% >$75k 81%
  14. 14. < $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
  15. 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 Opportunity!
  16. 16. The reality
  17. 17. © Brad Frost
  18. 18. © Brad Frost
  19. 19. RWDTo the Rescue!
  20. 20. INTRO TO ADAPTIVE WEB DESIGN What is RWD? ๏ Fluid grids ๏ Flexible media ๏ Media queries 22
  21. 21. 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%
  22. 22. INTRO TO ADAPTIVE WEB DESIGN Flexible Media img { max-width: 100%; height: auto; }
  23. 23. INTRO TO ADAPTIVE WEB DESIGN Media Queries @media screen and (min-width:450px) { /* Styles for screen media when browser is 450px wide or larger */ }
  24. 24. 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
  25. 25. INTRO TO ADAPTIVE WEB DESIGN What’s in a name? ๏ Responsive Web Design ๏ Adaptive Web Design ๏ Progressive Enhancement ๏ Aggressive Enhancement ๏ Responsible Web Design 35
  26. 26. INTRO TO ADAPTIVE WEB DESIGN What’s in a name? ๏ Responsive Web Design ๏ Adaptive Web Design ๏ Progressive Enhancement ๏ Aggressive Enhancement ๏ Responsible Web Design 36
  27. 27. © Brad Frost
  28. 28. We don’t know
  29. 29. Even when we think we know, we’re probably wrong
  30. 30. So how do we cope?
  31. 31. Content
  32. 32. I like an escalator because an escalator can never break, it can only become stairs. — Mitch Hedberg
  33. 33. Graceful Degradation
  34. 34. Modern Browsers Older Browsers
  35. 35. Modern Browsers Older Browsers
  36. 36. BASIC ADVANCED UserExperience Browser Capabilities
  37. 37. BASIC ADVANCED UserExperience Browser Capabilities Content
  38. 38. BASIC ADVANCED UserExperience Browser Capabilities Content Semantics
  39. 39. BASIC ADVANCED UserExperience Browser Capabilities Content Semantics Design
  40. 40. BASIC ADVANCED UserExperience Browser Capabilities Content Semantics Design Interactivity
  41. 41. BASIC ADVANCED UserExperience Browser Capabilities Content Semantics Design Interactivity Accessibility
  42. 42. BASIC ADVANCED UserExperience Browser Capabilities Text & HTTP HTML CSS JavaScript ¶ <> {} ↖ ARIA
  43. 43. HTML
  44. 44. HTML HTML5 Microformats HTML4
  45. 45. MCMLXXVII
  46. 46. MCMLXXVII(that’s 1977)
  47. 47. HTML CSS
  48. 48. fault tolerance n. a system’s ability to continue to operate when it encounters and unexpected error.
  49. 49. Browsers ignore what they don’t understand
  50. 50. BASIC ADVANCED UserExperience Browser Capabilities Content
  51. 51. Content is why we build websites
  52. 52. Users must have access to key content tasks&
  53. 53. Make sure markup, styles scripts don’t obscure it. &
  54. 54. BASIC ADVANCED UserExperience Browser Capabilities Content Semantics
  55. 55. 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>
  56. 56. BASIC ADVANCED UserExperience Browser Capabilities Content Semantics Design
  57. 57. Mobile First Responsive Web Design :-)
  58. 58. BASIC ADVANCED UserExperience Browser Capabilities Content Semantics Design Interactivity
  59. 59. But it’s not only about no JavaScript
  60. 60. ๏Bugs ๏Browser Add-ons ๏Overzealous Firewalls ๏Underpowered devices ๏Page is still loading
  61. 61. SPoF
  62. 62. BASIC ADVANCED UserExperience Browser Capabilities Content Semantics Design Interactivity
  63. 63. BASIC ADVANCED UserExperience Browser Capabilities Content Semantics Design Interactivity Accessibility
  64. 64. “special needs”
  65. 65. can be CONTEXTUAL “special needs”
  66. 66. BASIC ADVANCED UserExperience Browser Capabilities Text & HTTP HTML CSS JavaScript ¶ <> {} ↖ ARIA
  67. 67. Thank you!!! Further Reading http://is.gd/readlist_awd
  68. 68. codeandcreativity.com
  69. 69. CHADeviceLab.org @CHADeviceLab
  70. 70. 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/

×