After enjoying more than a decade of relative stability in designing for the 'desktop' web, smartphones had to come along and throw a wrench in the works. It seemed that in an instant, everything changed and nothing was certain any more. The truth is, though, nothing was ever certain. One of the web’s major strengths is its ability to adapt, to travel anywhere and everywhere in service of its users. All those years we were the ones restraining it with our desire to create a single monolithic experience. But experience is not monolithic. Every person is different, and we all bring our unique perspectives, experiences, and capabilities to the table. A one-size-fits-all approach rarely fits anyone well. When we embrace that, our designs, products, and experiences will be all the better for it.

1. Adapting
to Reality
Aaron Gustafson
@AaronGustafson
slideshare.net/AaronGustafson

2. Web design &
development is hard
© Brad Frost

3. Created by Vectors Market
from the Noun Project
640 × 480
In the beginning…

6. 800 × 600
Created by Vectors Market
from the Noun Project
Ok, we can go a little larger

9. Created by Vectors Market
from the Noun Project
1024 × 768
Ok, a bit larger, but that’s it

10. Created by Vectors Mark
from the Noun Project
1366 × 7681024 × 600
Created by Vectors Market
from the Noun Project
1280 × 800
Created by Vectors Market
from the Noun Project
800 × 600
Created by Vectors Market
from the Noun Project
Of course laptops…

11. 1024 × 768
Created by Vectors Market
from the Noun Project
The web’s “happy place”

12. 640 × 200
Created by Douglas Santos
from the Noun Project
Created by creative outlet
from the Noun Project
240 × 240
We were ignoring mobile…

13. 3840 × 2160320 × 480
Created by Vectors Market
from the Noun Project
Created by Vectors Market
from the Noun Project
Until this happened

14. Don’t even get me
started on tablets
© Brad Frost

15. Credit: OpenSignalMaps

18. 3840 × 2160320 × 480
Created by Vectors Market
from the Noun Project
Created by Vectors Market
from the Noun Project
Until this happened

19. 1920 × 1080Created by Vectors Market
from the Noun Project
7680 × 4320
Created by Vectors Market
from the Noun Project
Desktops today…

20. Chasing screen
sizes is clearly a
fool’s errand

21. In the second quarter of 2008
we detected 71 different
screen resolutions among our
visitors. In the first quarter of
2014 we detected
— Jason Samuels
IT Manager,
National Council on Family Relations
“
1062
One year after the iPhone
5 years ago!
Source

22. In 2008, 27 screen
resolutions showed up with
more than 10 visits, in 2014
that number was
— Jason Samuels
IT Manager,
National Council on Family Relations
“ 200
Source

23. Chasing screen
sizes is clearly a
fool’s errand

24. Designing for
screens is hard

25. And then there’s
everything else

26. Your content can and will go
anywhere that’s connected
Created by Vectors Market
from the Noun Project
Created by Vectors Market
from the Noun Project
Created by Vectors Market
from the Noun Project
Created by Vectors Market
from the Noun Project
wearables smart tvs IoT assistants

27. Meaning users will need to
interact in different ways
Created by Vectors Market
from the Noun Project
touch Created by Vectors Market
from the Noun Project
mouse
Created by bezier master
from the Noun Project
T9
Created by Christopher Holm-Hansen
from the Noun Project
eye tracking
Created by Vectors Market
from the Noun Project
remote
Created by Setyo Ari Wibowo
from the Noun Project
pen
Created by Vectors Market
from the Noun Project
keyboard
Created by Vectors Market
from the Noun Project
audio
Created by Vectors Market
from the Noun Project
gamepad
Created by Vectors Market
from the Noun Project
printCreated by Adriano Emerick
from the Noun Projectbraille

28. Over varied networks and
in changing conditions
Created by Vectors Market
from the Noun Project
hardline
Created by Vectors Market
from the Noun Project
wifi
Created by Vectors Market
from the Noun Project
mobile
Created by Vectors Market
from the Noun Project
homes Created by Vectors Market
from the Noun Project
buildings
Created by Vectors Market
from the Noun Project
cars
Created by Vectors Market
buses Created by Vectors Market
from the Noun Project
trains Created by Vectors Market
from the Noun Project
airplanes

29. And, ultimately, our users all
have different needs too

30. Anyone notice I
haven’t even
mentioned
browsers?
;-)

31. So...‽

32. REALITY CHECK
Nothing about our users’
experiences of the web
has ever been as
homogenous
as we imagined.

33. Treat your
ideal scenario
as an edge case

35. The reality

36. The reality

37. U.S. Smartphone penetration #s
released in January 2018
Source
< $30k
67%
$30-50k
82%
$50-75k
83%
>$75k
93%
49.55% of the population

38. U.S. Smartphone penetration #s
released in January 2018
Urban
83%
Suburban
78%
Rural
65%
Source

39. INTRO TO ADAPTIVE WEB DESIGN
Not all smartphones are equal
Dash JR K
3.5" (480 × 320)
256 MB RAM
512MB Memory
2MP camera
1.3 GHz Dual-core
Android 4.4
$43
Galaxy S5
5.1” (1920 × 1080)
2GB RAM
16GB Storage
16MP Camera
2.5GHz Quad-core
Android 4.4
$799

40. In the 2017 survey, Smartphone users
making < $30k/yr experienced app errors
52% of the time
Source

42. Photo Credit: Dylan Passmore

43. wheelchairs strollers bicycles skateboards

44. one arm arm injury new parent
permanent situational

45. one arm arm injury new parent
permanent situational
26K 13M 8M+ +
21 Million People

46. So how can we make
our interfaces work
for everyone?

47. Approach your job
with an open mind
and empathy for
your users.

48. We try stuff,
make mistakes,
& learn from them

49. Progressive
Enhancement

50. UserExperience
Browser Capabilities
BASIC ADVANCED

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

52. Mono

53. Stereo

54. Surround
Sound

55. 5.1 Channel
Surround

56. 7.1 Channel
Surround

57. 16.2 Channel Surround

58. Sometimes it’s
all you need

59. Kindle 3 = Free global data

60. Graceful
Degradation

61. Modern
Browsers
Older Browsers

62. Modern
Browsers
Older Browsers

64. I’m sorry,
you need
more channels

66. INTRO TO ADAPTIVE WEB DESIGN
They’re actually related
Graceful Degradation Progressive
Enhancement

67. Technological
restrictions

71. What matters

72. “Mobile first”

73. It’s all about process

74. INTRO TO ADAPTIVE WEB DESIGN
Step by step
1. Focus on what matters.
80
The essential nugget

75. INTRO TO ADAPTIVE WEB DESIGN
Step by step
2. Write it out, then read it back.
82
How does this photo make you feel?
Embarrassing
Upsetting
Saddening
Bad Photo
Other it’s embarrassing•

76. INTRO TO ADAPTIVE WEB DESIGN
Step by step
2. Write it out, then read it back.
83
Please describe the photo
It’s embarrassing
It’s a bad photo of me
It makes me sad

77. INTRO TO ADAPTIVE WEB DESIGN
3. Look for semantics that support 1 & 2.
Step by step
84
heading
a
paragraph
a
img
a

78. INTRO TO ADAPTIVE WEB DESIGN
Step by step
3. Look for semantics that support 1 & 2.
85
heading (also .p-name)a (also .u-url)
paragraph
a
(also .p-author
& .h-card)
.h-entry (feed)
img (also .u-photo)
a (also rel-tag)

79. INTRO TO ADAPTIVE WEB DESIGN
Step by step
4. Think about how design can improve comprehension.
86
visually the mostimportant text
distinct from the
content & diminished
in importance
Less important &
distinct from content

80. INTRO TO ADAPTIVE WEB DESIGN
Step by step
5. Consider how your design choices impact the reading experience.
87
Can’t tell what theepisode is called

81. INTRO TO ADAPTIVE WEB DESIGN
Step by step
5. Consider how your design choices impact the reading experience.
88
Floated images crush the
text on small screens
Ouch

82. INTRO TO ADAPTIVE WEB DESIGN
Step by step
6. Think about the many different ways folks might interact.
89
Created by Vectors Market
from the Noun Project
touch Created by Vectors Market
from the Noun Project
mouse
Created by bezier master
from the Noun Project
T9
Created by Christopher Holm-Hansen
from the Noun Project
eye tracking Created by Vectors Market
from the Noun Project
remote
Created by Setyo Ari Wibowo
from the Noun Project
pen
Created by Vectors Market
from the Noun Project
keyboard
Created by Vectors Market
from the Noun Project
gamepadCreated by Vectors Market
from the Noun Project
printCreated by Adriano Emerick
from the Noun Projectbraille
Created by Vectors Market
from the Noun Project
audio

83. INTRO TO ADAPTIVE WEB DESIGN
Step by step
6. Think about the many different ways folks might interact.
90
touch Created by Vectors Market
from the Noun Project
mouse
Created by Christopher Holm-Hansen
from the Noun Project
eye tracking
Hover?

84. INTRO TO ADAPTIVE WEB DESIGN
Step by step
6. Think about the many different ways folks might interact.
91
Created by Vectors Market
from the Noun Project
touch Created by Vectors Market
from the Noun Project
mouse
Created by bezier master
from the Noun Project
T9
Created by Christopher Holm-Hansen
from the Noun Project
eye tracking Created by Vectors Market
from the Noun Project
remote
Created by Setyo Ari Wibowo
from the Noun Project
pen
Created by Vectors Market
from the Noun Project
keyboard
Created by Vectors Market
from the Noun Project
gamepad
Focus & target?
Created by Vectors Market
from the Noun Project
audio

85. INTRO TO ADAPTIVE WEB DESIGN
Step by step
6. Think about the many different ways folks might interact.
92
Created by Vectors Market
from the Noun Project
touch Created by Vectors Market
from the Noun Project
mouse
Created by Setyo Ari Wibowo
from the Noun Project
pen
Gestures?

86. INTRO TO ADAPTIVE WEB DESIGN
Step by step
6. Think about the many different ways folks might interact.
93
Created by Vectors Market
from the Noun Project
printCreated by Adriano Emerick
from the Noun Projectbraille
Text expansions?
Created by Vectors Market
from the Noun Project
audio

87. INTRO TO ADAPTIVE WEB DESIGN
Step by step
7. Map the potential experiences.
94
Path A
Experience 1Start
Path B
Experience 2
Notes
Decision point Change

88. INTRO TO ADAPTIVE WEB DESIGN
Step by step
1. Focus on what matters.
2. Write it out, then read it back.
3. Look for semantics that support 1 & 2.
4. Think about how design can improve comprehension.
5. Consider how your design choices impact the reading experience.
6. Think about the many different ways folks might interact.
7. Map the potential experiences.
8. Iterate.
96

89. Thank you!
@AaronGustafson
aaron-gustafson.com
slideshare.net/AaronGustafson