3. Created by Vectors Market
from the Noun Project
640 × 480
In the beginning…
4.
5.
6. 800 × 600
Created by Vectors Market
from the Noun Project
Ok, we can go a little larger
7.
8.
9.
10. Created by Vectors Market
from the Noun Project
1024 × 768
Ok, a bit larger, but that’s it
11. Created by Vectors Mark
from the Noun Project
1366 × 768
1024 × 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…
12. 1024 × 768
Created by Vectors Market
from the Noun Project
The web’s “happy place”
13. 640 × 200
Created by Douglas Santos
from the Noun Project
Created by creative outlet
from the Noun Project
240 × 240
We were ignoring mobile…
14. 3840 × 2160
320 × 480
Created by Vectors Market
from the Noun Project
Created by Vectors Market
from the Noun Project
Until this happened
22. 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
23. 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
27. 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
28. 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 Vectors Market
from the Noun Project
keyboard
29. 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
print
Created by Adriano Emerick
from the Noun Project
braille
30. 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
78. ADAPTING TO REALITY
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
79. ADAPTING TO REALITY
Step by step
2. Write it out, then read it back.
83
How does this photo make you feel?
Embarrassing
Upsetting
Saddening
Bad Photo
Other it’s embarrassing
•
80. ADAPTING TO REALITY
Step by step
2. Write it out, then read it back.
84
Please describe the photo
It’s embarrassing
It’s a bad photo of me
It makes me sad
81. ADAPTING TO REALITY
3. Look for semantics that support 1 & 2.
Step by step
85
heading
a
paragraph
a
img
a
82. ADAPTING TO REALITY
Step by step
3. Look for semantics that support 1 & 2.
86
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)
83. ADAPTING TO REALITY
Step by step
4. Think about how design can improve comprehension.
87
visually the most
important text
distinct from the
content & diminished
in importance
Less important &
distinct from content
84. ADAPTING TO REALITY
Step by step
5. Consider how your design choices impact the reading experience.
88
Can’t tell what the
episode is called
85. ADAPTING TO REALITY
Step by step
5. Consider how your design choices impact the reading experience.
89
Floated images crush the
text on small screens
Ouch
86. ADAPTING TO REALITY
Step by step
6. Think about the many different ways folks might interact.
90
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
Created by Vectors Market
from the Noun Project
print
Created by Adriano Emerick
from the Noun Project
braille
Created by Vectors Market
from the Noun Project
audio
87. ADAPTING TO REALITY
Step by step
6. Think about the many different ways folks might interact.
91
touch Created by Vectors Market
from the Noun Project
mouse
Created by Christopher Holm-Hansen
from the Noun Project
eye tracking
Hover?
88. ADAPTING TO REALITY
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 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
89. ADAPTING TO REALITY
Step by step
6. Think about the many different ways folks might interact.
93
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?
90. ADAPTING TO REALITY
Step by step
6. Think about the many different ways folks might interact.
94
Created by Vectors Market
from the Noun Project
print
Created by Adriano Emerick
from the Noun Project
braille
Text expansions?
Created by Vectors Market
from the Noun Project
audio
91. ADAPTING TO REALITY
Step by step
7. Map the potential experiences.
95
Path A
Experience 1
Start
Path B
Experience 2
Notes
Decision point Change
92. ADAPTING TO REALITY
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.
97