3. Created by Vectors Market
from the Noun Project
640 × 480
In the beginning…
4.
5.
6. Created by Vectors Market
from the Noun Project
640 × 480
In the beginning…
7. 800 × 600
Created by Vectors Market
from the Noun Project
Ok, we can go a little larger.
8.
9.
10.
11. 800 × 600
Created by Vectors Market
from the Noun Project
Ok, we can go a little larger.
12. Created by Vectors Market
from the Noun Project
1024 × 768
Ok, a bit larger, but that’s it.
13. 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…
14. 1024 × 768
Created by Vectors Market
from the Noun Project
The web’s“happy place”.
15. 640 × 200
Created by Douglas Santos
from the Noun Project
Created by creative outlet
from the Noun Project
240 × 240
We were ignoring mobile…
16. 3840 × 2160320 × 480
Created by Vectors Market
from the Noun Project
Created by Vectors Market
from the Noun Project
Until this happened.
24. 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
Source
“
1062
One year after the iPhone
3 years ago!
25. “ 200
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
Source
29. 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
30. 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 Project
braille
31. 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
55. ADVANCED DESIGN METHODS
Responsive Web Design
๏ Fluid Grids
The overall layout (and grid structure, if used) adapts to the viewport
size, filling the width 100% up to a sensible maximum.
๏ Flexible Media
Images, videos & such scale with the layout and do not break out of their
parent
๏ Media Queries
Scoping CSS based on specific characteristics of the screen (width,
height, resolution, color depth, etc.)
58
57. ADVANCED DESIGN METHODS
Flexible Media
img,
video {
max-width: 100%;
height: auto;
}
Constrains the width
to the width of
the element’s parent
Ensures the image’s
natural aspect ratio
is maintained
66. ADVANCED DESIGN METHODS
Media Queries
@media screen {
/* screen styles go here */
}
@media print {
/* print styles go here */
}
67. ADVANCED DESIGN METHODS
Media Queries
@media screen and (min-width: 320px) {
/* Only used if in the screen media type
and the screen width is at least 320px
wide */
}
@media screen and (max-width: 900px) {
/* Only used if in the screen media type
and the screen width is less than
900px wide */
}
68. ADVANCED DESIGN METHODS
Media Queries
@media screen and (min-width: 320px)
and (max-width: 900px) {
/* Only used if in the screen media type
and the screen width is at least 320px
and less than 900px wide */
}
69. ADVANCED DESIGN METHODS
Media Queries
@media (min-resolution: 192dpi) {
/* Only used if the screen resolution is
equivalent to 192 dots per inch
(“retina”) */
}
70. ADVANCED DESIGN METHODS
How to pick media queries
1. Begin designing with the smallest size you want to support.
2. Stretch the browser window wider until it looks bad.
3. Add a media query and adjust the design.
4. Go back to Step 2.
73
107. ADVANCED DESIGN METHODS
How to pick media queries
1. Begin designing with the smallest size you want to support.
2. Stretch the browser window wider until it looks bad.
3. Add a media query and adjust the design.
4. Go back to Step 2.
109
116. ADVANCED DESIGN METHODS
Step by step
2. Write it out, then read it back.
119
How does this photo make you feel?
Embarrassing
Upsetting
Saddening
Bad Photo
Other it’s embarrassing•
117. ADVANCED DESIGN METHODS
Step by step
2. Write it out, then read it back.
120
Please describe the photo
It’s embarrassing
It’s a bad photo of me
It makes me sad
118. ADVANCED DESIGN METHODS
3. Look for semantics that support 1 & 2.
Step by step
121
heading
a
paragraph
a
img
a
119. ADVANCED DESIGN METHODS
Step by step
3. Look for semantics that support 1 & 2.
122
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)
120. ADVANCED DESIGN METHODS
Step by step
4. Think about how design can improve comprehension.
123
visually the mostimportant text
distinct from the
content & diminished
in importance
Less important &
distinct from content
121. ADVANCED DESIGN METHODS
Step by step
5. Consider how your design choices impact the reading experience.
124
Can’t tell what theepisode is called
122. ADVANCED DESIGN METHODS
Step by step
5. Consider how your design choices impact the reading experience.
125
Floated images crush the
text on small screens
Ouch
123. ADVANCED DESIGN METHODS
Step by step
6. Think about the many different ways folks might interact.
126
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
124. ADVANCED DESIGN METHODS
Step by step
6. Think about the many different ways folks might interact.
127
touch Created by Vectors Market
from the Noun Project
mouse
Created by Christopher Holm-Hansen
from the Noun Project
eye tracking
Hover?
125. ADVANCED DESIGN METHODS
Step by step
6. Think about the many different ways folks might interact.
128
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
126. ADVANCED DESIGN METHODS
Step by step
6. Think about the many different ways folks might interact.
129
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?
127. ADVANCED DESIGN METHODS
Step by step
6. Think about the many different ways folks might interact.
130
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
128. ADVANCED DESIGN METHODS
Step by step
7. Map the potential experiences.
131
Path A
Experience 1Start
Path B
Experience 2
Notes
Decision point Change
129. ADVANCED DESIGN METHODS
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.
133
133. ADVANCED DESIGN METHODS
Average viewing distances
Created by Vectors Market
from the Noun Project
12” Created by Vectors Market
from the Noun Project
18”
Created by Vectors Market
from the Noun Project
30”
Created by Vectors Market
from the Noun Project
8”
Created by Vectors Marke
from the Noun Project
9’
142. ADVANCED DESIGN METHODS
Em vs. Rem: All in the context
html {
font-size: 16px;
}
h1 {
font-size: 2em;
}
#section {
font-size: 20px;
}
This is an h1
This is some normal text.
This is an h1 inside #section
This is text in #section.
143. ADVANCED DESIGN METHODS
Em vs. Rem: All in the context
html {
font-size: 16px;
}
h1 {
font-size: 2rem;
}
#section {
font-size: 20px;
}
This is an h1
This is some normal text.
This is an h1 inside #section
This is text in #section.
159. ADVANCED DESIGN METHODS
Evaluate images case-by-case
๏ Does the image reiterate information found in the surrounding text?
๏ Is the image necessary to understand the surrounding content?
๏ Does the image contain text?
๏ Is the image a graph, chart, or table?
๏ Could the content of the image be presented in a different format that
would not require an image?
๏ Is the image purely presentational?
160
164. ADVANCED DESIGN METHODS
Quick format recap
๏ GIF
‣ for images with large swaths of solid colors
‣ Binary transparency
๏ JPG
‣ For photographs and images with gradations of color
‣ Can be compressed (introduces artifacts)
165
165. ADVANCED DESIGN METHODS
Quick format recap
๏ PNG (8-Bit)
‣ Alternative to GIF
‣ Can support alpha transparency (with the right creation software)
๏ PNG (24-bit)
‣ Alternative to JPG
‣ Usually larger than JPGs
‣ Supports alpha tranparency
166
166. ADVANCED DESIGN METHODS
Quick format recap
๏ WebP
‣ Newer format, not universally supported
‣ Smaller than JPGs and 24-bit PNGs
‣ Support alpha transparency
๏ JPEG 2000
‣ Newer format, not universally supported
‣ Like JPG, but with better compression
167
167. ADVANCED DESIGN METHODS
Indicating alternate formats
<picture>
<source type="image/webp" srcset="my.webp">
<img src="my.jpg" alt="Alt text goes here">
</picture>
first choice if WebP is supported fallback image
if it isn’t
169. You can also supply
different images
based on screen size,
resolution, etc.
170. ADVANCED DESIGN METHODS
Indicating alternate sizes
<img src="small.jpg"
sizes="100vw"
srcset="med.jpg 800w, large.jpg 1400w"
alt="…">
image will always
be displayed at full width
browser should choose
the best option based
on these sizing hints
fallback