1 / 97

Intro to Adaptive Web Design [edUi 2013]

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. <br><br>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. <br><br>Note: If you plan to take participate in Aaron’s workshop, Adaptive Web Design: Layer by Layer, you will want to attend this session or read the first chapter of Aaron’s book (free download) in order to get the necessary background. <br><br>What You'll Learn: <br><br>* What progressive enhancement is <br>* How it’s different from ‘graceful degradation’ <br>* How progressive enhancement leads to a better user experience

AaronGustafson
Download Presentation

Intro to Adaptive Web Design [edUi 2013]

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. 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. 6.8 Billion 2009 2010 2012 2011 2009 2010 2011 2012 http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/a#subscribers

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

  11. “ 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. © Brad Frost

  14. © Brad Frost

  15. RWD To the Rescue!

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

  17. 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%

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

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

  20. 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. 31

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

  22. © Brad Frost

  23. We don’t know

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

  25. So how do we cope?

  26. Content

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

  28. Graceful Degradation

  29. Modern Browsers Older Browsers

  30. Modern Browsers Older Browsers

  31. User Experience BASIC ADVANCED Browser Capabilities

  32. User Experience BASIC ADVANCED Browser Capabilities Content

  33. User Experience Browser Capabilities Semantics BASIC ADVANCED Content

  34. User Experience Design Browser Capabilities Semantics BASIC ADVANCED Content

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

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

More Related