INTRO TO

Adaptive
Web Design
Aaron Gustafson
@aarongustafson
slideshare.net/AaronGustafson
© Brad Frost
“

Just four years ago the majority of our
visitors saw our website in Internet
Explorer on a Windows computer on a
minimu...
“

Windows users used to comprise
93.5% of our web visits. Now that
percentage is 72.4%. Visitors using a
Mac have more th...
“

The percentage visiting from a mobile
device or tablet … was just
0.1% in 2008. It has since grown
exponentially,

200-...
“

Four years ago 75.5% of our web
visitors used Internet Explorer. That
number has fallen to 37%. Firefox now
comprises 2...
“

In the second quarter of 2008
we detected 71 different
screen resolutions among our
visitors. In the first quarter of
2...
© Brad Frost
6.8 Billion

2011

2012

2010

2011

2010

2009
2009

2012

http://mobithinking.com/mobile-marketing-tools/latest-mobile-s...
“

Smartphone sales accounted for

nearly 85% of all mobile
phone sales in the US in Q1 2013.
http://www.chetansharma.com/...
“

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

…but that’s concentrated in

30% of households

http://www.chetansharma.com/usmarketupdateq12013.htm
© Brad Frost
© Brad Frost
RWD
To the Rescue!
INTRO TO ADAPTIVE WEB DESIGN

What is RWD?
๏

Fluid grids

๏

Flexible media

๏

Media queries

19
INTRO TO ADAPTIVE WEB DESIGN

Fluid Grids
6.5%

6.5%

6.5%

6.5%

32%

6.5%

6.5%

6.5%

6.5%

6.5%

6.5%

32%

32%

32%
6...
INTRO TO ADAPTIVE WEB DESIGN

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

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

But That’s the Easy Stuff
๏

Content strategy

๏

Page weight

๏

JavaScript support

๏

Int...
INTRO TO ADAPTIVE WEB DESIGN

What’s in a name?
๏

Responsive Web Design

๏

Adaptive Web Design

๏

Progressive Enhanceme...
© Brad Frost
We don’t know
Even when
we think
we know,
we’re probably
wrong
So how
do we cope?
Content
I like an escalator because
an escalator can never break,
it can only become stairs.

— Mitch Hedberg
Graceful
Degradation
Modern
Browsers
Older Browsers
Modern
Browsers
Older Browsers
User Experience
BASIC

ADVANCED

Browser Capabilities
User Experience
BASIC

ADVANCED

Browser Capabilities

Content
User Experience
BASIC

Semantics

Browser Capabilities

Content

ADVANCED
User Experience

Design
BASIC

Semantics

Browser Capabilities

Content

ADVANCED
User Experience

Interactivity
Design

BASIC

Semantics

Browser Capabilities

Content

ADVANCED
User Experience

Accessibility
Interactivity
Design

BASIC

Semantics

Browser Capabilities

Content

ADVANCED
User Experience

ARIA
JavaScript

{}
BASIC

↖

CSS

<>

Browser Capabilities

HTML

¶

Text & HTTP

ADVANCED
HTML
HTML5

HTML
Microformats
HTML4
MCMLXXVII
(that’s 1977)
HTML

CSS
fault tolerance
n. a system’s ability to continue to
operate when it encounters and
unexpected error.
Browsers ignore
what they don’t
understand
User Experience
BASIC

ADVANCED

Browser Capabilities

Content
Content
is why
we build
websites
Users must have
access to key
content tasks

&
Make sure
markup, styles
scripts don’t
obscure it.

&
User Experience
BASIC

Semantics

Browser Capabilities

Content

ADVANCED
INTRO TO ADAPTIVE WEB DESIGN

Semantics 101
<p>HTML5 introduces several <em>really</em>
useful elements and a ton of new A...
User Experience

Design
BASIC

Semantics

Browser Capabilities

Content

ADVANCED
:-)

Responsive
Web Design

Mobile
First
User Experience

Interactivity
Design

BASIC

Semantics

Browser Capabilities

Content

ADVANCED
But it’s not
only about
no JavaScript
๏Bugs
๏Browser Add-ons
๏Overzealous Firewalls
๏Underpowered devices
๏Page is still loading
User Experience

Accessibility
Interactivity
Design

BASIC

Semantics

Browser Capabilities

Content

ADVANCED
“special needs”
“special needs”
can be
CONTEXTUAL
User Experience

ARIA
JavaScript

{}
BASIC

↖

CSS

<>

Browser Capabilities

HTML

¶

Text & HTTP

ADVANCED
Thank you!!!
Further Reading
http://is.gd/readlist_awd
Intro to Adaptive Web Design
by Aaron Gustafson
@AaronGustafson

Further reading:
http://adaptivewebdesign.info
http://blo...
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Upcoming SlideShare
Loading in...5
×

Intro to Adaptive Web Design [edUi 2013]

1,371

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.

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.

What You'll Learn:

* What progressive enhancement is
* How it’s different from ‘graceful degradation’
* How progressive enhancement leads to a better user experience

Published in: Technology, Design

Intro to Adaptive Web Design [edUi 2013]

  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. 6.8 Billion 2011 2012 2010 2011 2010 2009 2009 2012 http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/a#subscribers
  10. 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. 11. “ Smartphones have reached 50% penetration in the US… http://www.chetansharma.com/usmarketupdateq12013.htm
  12. 12. “ …but that’s concentrated in 30% of households http://www.chetansharma.com/usmarketupdateq12013.htm
  13. 13. © Brad Frost
  14. 14. © Brad Frost
  15. 15. RWD To the Rescue!
  16. 16. INTRO TO ADAPTIVE WEB DESIGN What is RWD? ๏ Fluid grids ๏ Flexible media ๏ Media queries 19
  17. 17. INTRO TO ADAPTIVE WEB DESIGN Fluid Grids 6.5% 6.5% 6.5% 6.5% 32% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 32% 32% 32% 66% 48% 48% 100% 6.5% 6.5%
  18. 18. INTRO TO ADAPTIVE WEB DESIGN Flexible Media img { max-width: 100%; height: auto; }
  19. 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. 20. 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. 31
  21. 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. 22. © Brad Frost
  23. 23. We don’t know
  24. 24. Even when we think we know, we’re probably wrong
  25. 25. So how do we cope?
  26. 26. Content
  27. 27. I like an escalator because an escalator can never break, it can only become stairs. — Mitch Hedberg
  28. 28. Graceful Degradation
  29. 29. Modern Browsers Older Browsers
  30. 30. Modern Browsers Older Browsers
  31. 31. User Experience BASIC ADVANCED Browser Capabilities
  32. 32. User Experience BASIC ADVANCED Browser Capabilities Content
  33. 33. User Experience BASIC Semantics Browser Capabilities Content ADVANCED
  34. 34. User Experience Design BASIC Semantics Browser Capabilities Content ADVANCED
  35. 35. User Experience Interactivity Design BASIC Semantics Browser Capabilities Content ADVANCED
  36. 36. User Experience Accessibility Interactivity Design BASIC Semantics Browser Capabilities Content ADVANCED
  37. 37. User Experience ARIA JavaScript {} BASIC ↖ CSS <> Browser Capabilities HTML ¶ Text & HTTP ADVANCED
  38. 38. HTML
  39. 39. HTML5 HTML Microformats HTML4
  40. 40. MCMLXXVII (that’s 1977)
  41. 41. HTML CSS
  42. 42. fault tolerance n. a system’s ability to continue to operate when it encounters and unexpected error.
  43. 43. Browsers ignore what they don’t understand
  44. 44. User Experience BASIC ADVANCED Browser Capabilities Content
  45. 45. Content is why we build websites
  46. 46. Users must have access to key content tasks &
  47. 47. Make sure markup, styles scripts don’t obscure it. &
  48. 48. User Experience BASIC Semantics Browser Capabilities Content ADVANCED
  49. 49. 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>
  50. 50. User Experience Design BASIC Semantics Browser Capabilities Content ADVANCED
  51. 51. :-) Responsive Web Design Mobile First
  52. 52. User Experience Interactivity Design BASIC Semantics Browser Capabilities Content ADVANCED
  53. 53. But it’s not only about no JavaScript
  54. 54. ๏Bugs ๏Browser Add-ons ๏Overzealous Firewalls ๏Underpowered devices ๏Page is still loading
  55. 55. User Experience Accessibility Interactivity Design BASIC Semantics Browser Capabilities Content ADVANCED
  56. 56. “special needs”
  57. 57. “special needs” can be CONTEXTUAL
  58. 58. User Experience ARIA JavaScript {} BASIC ↖ CSS <> Browser Capabilities HTML ¶ Text & HTTP ADVANCED
  59. 59. Thank you!!! Further Reading http://is.gd/readlist_awd
  60. 60. 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×