Slide 1
Slide 1 text
Reaching For Stars:
Why Images Matter
Vitaly Friedman (illustrations by Simon C Page, Nelson Cash)
March 1st, 2017 @ ImageCon, San Francisco, USA
Slide 2
Slide 2 text
Vitaly Friedman, editor-in-chief
and co-founder of SmashingMag
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
4K | Hubble The Final Frontier - Official Final Film, https://youtu.be/R5bkXdiVDg4
Slide 7
Slide 7 text
4K | Hubble The Final Frontier - Official Final Film, https://youtu.be/R5bkXdiVDg4
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
“Designing for the Web today is like
visualizing a tesseract. We craft user-
centeric, responsive experiences by
manipulating the shadows of a tesseract.
— Tim Brown, Typekit
Slide 18
Slide 18 text
State of Images
Slide 19
Slide 19 text
“If we want to stand out — to outperform
our competitors — we need to delight
customers with a remarkable design and
a unique, charming personality. Be slow
and mindful. With an unprecedented
attention to detail.
— à la Mogens Møller
Slide 20
Slide 20 text
“We should underpromise, overdeliver.
Capture attention and guide it skillfully.
On the web today, it all boils down to one
single thing: outstanding storytelling
through great art direction.
— à la Mogens Møller
Slide 21
Slide 21 text
Arthur Rackham, “Goldilocks and the three bears”
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
“We should underpromise, overdeliver.
Capture attention and guide it skillfully.
On the web today, it all boils down to one
single thing: outstanding storytelling
through great art direction.
— à la Mogens Møller
Slide 30
Slide 30 text
“We should underpromise, overdeliver.
Capture attention and guide it skillfully.
On the web today, it all boils down to one
single thing: outstanding storytelling
through great art direction.
— à la Mogens Møller
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
— photos get bigger, screens larger (4K/5K),
— high-res images have a high payload (65.7%),
— responsive images up and running,
— wide support, inconsistent behavior,
— not all images are created equal,
— image bloat costs performance (Parallax),
— start render time difficult to measure,
— user context often impossible to predict.
State Of Images (2017)
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
3840×2160
Native resolution of Ultra HDTV, or 4K (2160p).
4K screens can serve 8-megapixel images.
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
5120×2880
Native resolution of Retina 5K iMac (2880p).
Apple’s default resolution setting is 2560×1440.
5K screens can serve 14.7-megapixel images.
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
7680×4320
8K screens can serve 33-megapixel images (4320p).
A heavily compressed desktop wallpaper is 11.7 MB.
Slide 47
Slide 47 text
@mrjoe
Slide 48
Slide 48 text
@mrjoe
Title Text
Slide 49
Slide 49 text
@mrjoe
Slide 50
Slide 50 text
@mrjoe
Slide 51
Slide 51 text
@mrjoe
Title Text
Slide 52
Slide 52 text
@mrjoe
Considered purchase
Slide 53
Slide 53 text
@mrjoe
Considered purchase
Slide 54
Slide 54 text
Shades of Images
— logos, branding, advertising
— icons, emoji and illustrations
— vector and photography
— charts and graphs
— maps and interactive 3D views
— animation, interaction, states
— formats, compression, algorithms
— accessible fallback
Slide 55
Slide 55 text
“Responsive Images in Practice”, Eric Portis, http://alistapart.com/article/responsive-images-in-practice
Slide 56
Slide 56 text
“Responsive Images in Practice”, Eric Portis, http://alistapart.com/article/responsive-images-in-practice
Slide 57
Slide 57 text
“Responsive Images in Practice”, Eric Portis, http://alistapart.com/article/responsive-images-in-practice
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
— photos get bigger, screens larger (4K/5K),
— high-res images have a high payload (65.7%),
— responsive images up and running,
— wide support, inconsistent behavior,
— not all images are created equal,
— image bloat costs performance (Parallax),
— start render time difficult to measure,
— user context often impossible to predict.
State Of Images (2017)
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
• JavaScript
var size =
window.getCo
PropertyValu
if (size ==
// Load so
}
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
An image isn’t an image. Today, it’s a
family of image variants. We talk about
creating design systems for front-end.
Should we start thinking of behavior and
appearance of images the same way?
Slide 82
Slide 82 text
The Perfect Workflow
• To deal with the overhead of responsive images,
companies have to automate their image workflows.
— Create a project for a website or page,
— Upload all images in a high resolution,
— Define settings, aspect ratios, DPR, compression, formats,
— Set a focal point on images with a visual editor,
— Define accessible labels and alternate text,
— Automatically crop/reisze/optimize/generate all images,
— Markup / CSS are automatically generated,
— Download all images and markup in a .zip,
— Download all images and markup in a .zip,
Slide 83
Slide 83 text
— Download all images and markup in a .zip,
— Live preview displays the behavior in-browser,
— Integration in CMS: automatic updates of markup/CSS,
— Integration in Dropbox: automatic sharing/syncing,
— Maintenance easy through managing a project,
— Enable context-aware resizing for finer adjustments,
— Supporting , srcset, sizes, image-set, formats.
The Perfect Workflow
• To deal with the overhead of responsive images,
companies have to automate their image workflows.
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
“...Given two identical images that are
displayed at the same size on a
website, one can be much smaller
than the other in file size if it’s heavily
compressed and its dimensions are
much larger than the original.
— Daan Jobsis
Slide 92
Slide 92 text
600×400px file, 0% JPEG quality,
displayed in 600×400 (file size 7 Kb)
Slide 93
Slide 93 text
600×400px file, 0% JPEG quality,
displayed in 300×200 (file size 7 Kb)
Slide 94
Slide 94 text
600×400px file (7 Kb)
________________________________0
0% JPEG quality
displayed in 300×200
300×200px file (21 Kb)
_________________________________
80% JPEG quality
displayed in 300×200
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
Aftonbladet’s Images Strategy
• Design specification defined main requirements:
• Optimization of the mobile version,
• The pages should be easy to cache,
• Solution: Loading images with JavaScript after
HTML and CSS have fully loaded.
• A single HTML file to be served to all users,
• All images on a content delivery network (CDN),
• No complexity in the image-serving logic,
• Serving different image versions to different devices.
Slide 98
Slide 98 text
• Editors can select compression rates, but aggressive
compression is a default.
• 30% JPEG quality: bright-red areas don’t compress well.
Slide 99
Slide 99 text
• On average, the “large” screen has 650 Kb,
“medium” — 570 Kb, “small” — 450 Kb.
• The homepage on a mobile device has 40 images.
Slide 100
Slide 100 text
• The original photo has 1600px width, 971 Kb.
Quality 60 brings the size down to 213 Kb.
Slide 101
Slide 101 text
• Blurring unimportant parts of the photo brings
the size down to 147 Kb.
Slide 102
Slide 102 text
Sequential JPEG Progressive JPEG
Images taken from http://www.pixelstech.net/article/1374757887-Use-progressive-JPEG-to-improve-user-experience 13 / 44
Slide 103
Slide 103 text
Scans
14 / 44
Slide 104
Slide 104 text
Default Scan Levels
Thanks to Frédéric Kayser for creating 'jsk': http://encode.ru/threads/1800-JSK-JPEG-Scan-Killer-progressive-JPEG-explained-in-slowmo 15 / 44
Slide 105
Slide 105 text
16 / 44
Slide 106
Slide 106 text
17 / 44
Slide 107
Slide 107 text
18 / 44
Slide 108
Slide 108 text
1st Scan Layer Has Small Byte Size
Ships Fast
&
Shows Soon
19 / 44
Slide 109
Slide 109 text
31 / 44
Slide 110
Slide 110 text
1
32 / 44
Slide 111
Slide 111 text
2
33 / 44
Slide 112
Slide 112 text
3
34 / 44
Slide 113
Slide 113 text
4
35 / 44
Slide 114
Slide 114 text
5
36 / 44
Slide 115
Slide 115 text
37 / 44
Slide 116
Slide 116 text
No content
Slide 117
Slide 117 text
No content
Slide 118
Slide 118 text
“What if you have a large photo that
requires a transparent shadow?
PNG is too large in file size, and
JPEG isn’t good enough in quality.
Trick: create a regular non-
transparent JPG and an 8-bit PNG
(alpha mask) and load both images
inside an SVG container.
Slide 119
Slide 119 text
No content
Slide 120
Slide 120 text
No content
Slide 121
Slide 121 text
• hero-image.svg:
Slide 122
Slide 122 text
• HTML/CSS:
, background: url("hero-image.svg")
• hero-image.svg:
, background: url("hero-image.svg")
• hero-image.svg:
Slide 123
Slide 123 text
No content
Slide 124
Slide 124 text
No content
Slide 125
Slide 125 text
• CSS:
body {
font-family: 'Elena Regular',
AvenirNext, Avenir, /* iOS */
'Roboto Slab', 'Droid Serif', /* Android */
'Segoe UI', /* Microsoft */
Georgia, 'Times New Roman', serif; /* Fallback */
}
Slide 126
Slide 126 text
No content
Slide 127
Slide 127 text
• CSS:
body {
font-family: 'Elena Regular', /* Web font */
AvenirNext, Avenir, /* iOS */
-apple-system, BlinkMacSystemFont, /* macOS San Francisco */
Roboto Slab', 'Droid Serif', /* Android */
'Segoe UI', /* Microsoft */
Oxygen-Sans, /* KDE */
Ubuntu, /* Ubuntu */
Cantarell, /* GNOME */
Georgia, 'Times New Roman', serif; /* Fallback */
}
Slide 128
Slide 128 text
• CSS:
.lowBattery {
font-family: /* 'Elena Regular' */ /* Web font */
AvenirNext, Avenir, /* iOS */
-apple-system, BlinkMacSystemFont, /* macOS San Francisco */
Roboto Slab', 'Droid Serif', /* Android */
'Segoe UI', /* Microsoft */
Oxygen-Sans, /* KDE */
Ubuntu, /* Ubuntu */
Cantarell, /* GNOME */
Georgia, 'Times New Roman', serif; /* Fallback */
}
Slide 129
Slide 129 text
No content
Slide 130
Slide 130 text
— photos get bigger, screens larger (4K/5K),
— high-res images have a high payload (65.7%),
— responsive images up and running,
— wide support, inconsistent behavior,
— not all images are created equal,
— image bloat costs performance (Parallax),
— start render time difficult to measure,
— user context often impossible to predict.
State Of Images (2017)
Slide 131
Slide 131 text
Design Patterns
Slide 132
Slide 132 text
“The design process is weird and
complicated because it involves
people and systems, which often
are weird and complicated.
— à la Mark Boulton
Slide 133
Slide 133 text
Junior Designers vs. Senior Designers, https://medium.com/the-year-of-the-looking-glass/junior-designers-vs-senior-designers-fbe483d3b51e
Slide 134
Slide 134 text
Junior Designers vs. Senior Designers, https://medium.com/the-year-of-the-looking-glass/junior-designers-vs-senior-designers-fbe483d3b51e
Slide 135
Slide 135 text
Patty Toland, FilamentGroup, “Design Consistency for RWD”, https://t.co/Tb0q1gMwQS
Slide 136
Slide 136 text
No content
Slide 137
Slide 137 text
No content
Slide 138
Slide 138 text
No content
Slide 139
Slide 139 text
No content
Slide 140
Slide 140 text
No content
Slide 141
Slide 141 text
No content
Slide 142
Slide 142 text
No content
Slide 143
Slide 143 text
No content
Slide 144
Slide 144 text
No content
Slide 145
Slide 145 text
Clockwise Rightwards and
Leftwards Open Circle Arrows
With Circled One Overlay
(also known as U+1F502,
🔂 or \u1f502).
Slide 146
Slide 146 text
Person Raising Both Hands in
Celebration (also known as
Festivus Miracle Emoji,
U+1F64C, f64c; or \u1f64c).
Slide 147
Slide 147 text
%
Slide 148
Slide 148 text
No content
Slide 149
Slide 149 text
No content
Slide 150
Slide 150 text
No content
Slide 151
Slide 151 text
No content
Slide 152
Slide 152 text
No content
Slide 153
Slide 153 text
No content
Slide 154
Slide 154 text
No content
Slide 155
Slide 155 text
No content
Slide 156
Slide 156 text
No content
Slide 157
Slide 157 text
No content
Slide 158
Slide 158 text
No content
Slide 159
Slide 159 text
No content
Slide 160
Slide 160 text
Responsive Iconography
— simplify icons for smaller screens
— save vertical space by inlining navigation
— choose larger icons for critical actions
— accordion icons should be large
— emoji can seece up an interface.
Slide 161
Slide 161 text
No content
Slide 162
Slide 162 text
No content
Slide 163
Slide 163 text
No content
Slide 164
Slide 164 text
No content
Slide 165
Slide 165 text
No content
Slide 166
Slide 166 text
No content
Slide 167
Slide 167 text
No content
Slide 168
Slide 168 text
No content
Slide 169
Slide 169 text
No content
Slide 170
Slide 170 text
No content
Slide 171
Slide 171 text
No content
Slide 172
Slide 172 text
No content
Slide 173
Slide 173 text
No content
Slide 174
Slide 174 text
No content
Slide 175
Slide 175 text
No content
Slide 176
Slide 176 text
Summary
— never hide important actions
— define priorities for navigation items
— thumbs drive interactions
— consider curtain navigation for complex UIs
— use tabs at the bottom as filters
— combine filters and navigation in one
— adjust the view and fidelity if necessary
— consider tagging/filters instead of sections
— accordions always work well
Slide 177
Slide 177 text
No content
Slide 178
Slide 178 text
No content
Slide 179
Slide 179 text
No content
Slide 180
Slide 180 text
No content
Slide 181
Slide 181 text
No content
Slide 182
Slide 182 text
No content
Slide 183
Slide 183 text
No content
Slide 184
Slide 184 text
No content
Slide 185
Slide 185 text
No content
Slide 186
Slide 186 text
No content
Slide 187
Slide 187 text
No content
Slide 188
Slide 188 text
No content
Slide 189
Slide 189 text
Responsive Tables
— prioritize important columns
— use steppers for navigation
— visualize content
— reposition headings
— adjust the level of fidelity
— extract content and “redesign” it.
Slide 190
Slide 190 text
No content
Slide 191
Slide 191 text
No content
Slide 192
Slide 192 text
No content
Slide 193
Slide 193 text
No content
Slide 194
Slide 194 text
No content
Slide 195
Slide 195 text
No content
Slide 196
Slide 196 text
No content
Slide 197
Slide 197 text
No content
Slide 198
Slide 198 text
No content
Slide 199
Slide 199 text
No content
Slide 200
Slide 200 text
No content
Slide 201
Slide 201 text
No content
Slide 202
Slide 202 text
No content
Slide 203
Slide 203 text
No content
Slide 204
Slide 204 text
No content
Slide 205
Slide 205 text
No content
Slide 206
Slide 206 text
No content
Slide 207
Slide 207 text
No content
Slide 208
Slide 208 text
No content
Slide 209
Slide 209 text
No content
Slide 210
Slide 210 text
No content
Slide 211
Slide 211 text
No content
Slide 212
Slide 212 text
Responsive Maps and Charts
— divide content into visual/textual views
— turn a drop-down into a map
— prompt a list view for small tap areas
— integrate autosuggest with the map
— make maps tap-friendly despite geography
— load maps/lightboxes conditionally
— reposition labels and exploration points.
Slide 213
Slide 213 text
No content
Slide 214
Slide 214 text
No content
Slide 215
Slide 215 text
No content
Slide 216
Slide 216 text
No content
Slide 217
Slide 217 text
No content
Slide 218
Slide 218 text
No content
Slide 219
Slide 219 text
No content
Slide 220
Slide 220 text
No content
Slide 221
Slide 221 text
No content
Slide 222
Slide 222 text
No content
Slide 223
Slide 223 text
No content
Slide 224
Slide 224 text
No content
Slide 225
Slide 225 text
No content
Slide 226
Slide 226 text
No content
Slide 227
Slide 227 text
No content
Slide 228
Slide 228 text
No content
Slide 229
Slide 229 text
No content
Slide 230
Slide 230 text
No content
Slide 231
Slide 231 text
Builders and Steppers
— break down the task in small steps
— each step is a full-screen experience
— each step is an accordion (open/collapsed)
— let users define settings to filter ouptput
— optimize for quick input (autocomplete)
— steppers are often better than input
— accordions always work well.
Slide 232
Slide 232 text
No content
Slide 233
Slide 233 text
No content
Slide 234
Slide 234 text
Summary
Slide 235
Slide 235 text
No content
Slide 236
Slide 236 text
No content
Slide 237
Slide 237 text
No content
Slide 238
Slide 238 text
No content
Slide 239
Slide 239 text
No content
Slide 240
Slide 240 text
No content
Slide 241
Slide 241 text
No content
Slide 242
Slide 242 text
No content
Slide 243
Slide 243 text
No content
Slide 244
Slide 244 text
No content
Slide 245
Slide 245 text
No content
Slide 246
Slide 246 text
No content
Slide 247
Slide 247 text
Summary
— expand the design to fill the screen
— footnotes and sidenotes on the side
— consider multi-column/panel layout
— extend product grids and features
— bring important actions into the focus
Slide 248
Slide 248 text
No content
Slide 249
Slide 249 text
No content
Slide 250
Slide 250 text
No content
Slide 251
Slide 251 text
Art Direction
Slide 252
Slide 252 text
No content
Slide 253
Slide 253 text
No content
Slide 254
Slide 254 text
No content
Slide 255
Slide 255 text
No content
Slide 256
Slide 256 text
No content
Slide 257
Slide 257 text
No content
Slide 258
Slide 258 text
No content
Slide 259
Slide 259 text
No content
Slide 260
Slide 260 text
No content
Slide 261
Slide 261 text
No content
Slide 262
Slide 262 text
No content
Slide 263
Slide 263 text
No content
Slide 264
Slide 264 text
No content
Slide 265
Slide 265 text
No content
Slide 266
Slide 266 text
No content
Slide 267
Slide 267 text
No content
Slide 268
Slide 268 text
No content
Slide 269
Slide 269 text
No content
Slide 270
Slide 270 text
No content
Slide 271
Slide 271 text
No content
Slide 272
Slide 272 text
No content
Slide 273
Slide 273 text
No content
Slide 274
Slide 274 text
No content
Slide 275
Slide 275 text
No content
Slide 276
Slide 276 text
No content
Slide 277
Slide 277 text
No content
Slide 278
Slide 278 text
No content
Slide 279
Slide 279 text
No content
Slide 280
Slide 280 text
No content
Slide 281
Slide 281 text
No content
Slide 282
Slide 282 text
No content
Slide 283
Slide 283 text
No content
Slide 284
Slide 284 text
No content
Slide 285
Slide 285 text
No content
Slide 286
Slide 286 text
No content
Slide 287
Slide 287 text
No content
Slide 288
Slide 288 text
No content
Slide 289
Slide 289 text
No content
Slide 290
Slide 290 text
No content
Slide 291
Slide 291 text
No content
Slide 292
Slide 292 text
No content
Slide 293
Slide 293 text
No content
Slide 294
Slide 294 text
No content
Slide 295
Slide 295 text
• Allow Users To Select Country Early On
The earlier you know the shipping country, the
earlier you can display the final price.
Slide 296
Slide 296 text
• Reassure Users About Delivery Times
Also, emphasize that checking out is a little
investment, and when the item will be delivered.
Slide 297
Slide 297 text
No content
Slide 298
Slide 298 text
No content
Slide 299
Slide 299 text
No content
Slide 300
Slide 300 text
No content
Slide 301
Slide 301 text
• Eliminate All Concerns At Once
Communicate subtotal, taxes, shipping costs,
delivery time, fees, charger and total price early.
Slide 302
Slide 302 text
No content
Slide 303
Slide 303 text
No content
Slide 304
Slide 304 text
No content
Slide 305
Slide 305 text
No content
Slide 306
Slide 306 text
Summary
— re-adjust shapes for smaller screens
— define and boost up your signature
— adjust animation to make more sense
— find a signature and tune it up
— integrate audio and video meaningfully
— break, repair and break things again.
Slide 307
Slide 307 text
Conclusion
Slide 308
Slide 308 text
No content
Slide 309
Slide 309 text
No content
Slide 310
Slide 310 text
Thank you.
Slide 311
Slide 311 text
Image credits
4K | Hubble The Final Frontier - Official Final Film
https://youtu.be/R5bkXdiVDg4
Horsehead Nebula, Paper4PC
http://paper4pc.com/outer-space-stars-nebulae-horsehead-nebula.html
Big Dipper Constellation, One Minute Astronomer
http://oneminuteastronomer.com/4002/big-dipper-constellation/
Official California State Flag
https://in.pinterest.com/pin/526921225132469196/
Ursa Major, Name a Star Alive
http://blog.nameastarlive.com/author/rbraastad/page/3/
Data kindly collected by httparchive
http://httparchive.org/
Slide 312
Slide 312 text
Image credits
Arthur Rackham, Goldilocks and the Three Bears
https://en.wikipedia.org/wiki/Goldilocks_and_the_Three_Bears
Uber Pricing Surge, The Logical Indian, https://thelogicalindian.com/story-feed/awareness/voice-of-
customer-dear-government-we-need-regulations-against-the-surge-pricing-of-olauber/
Mailchimp, Love What You Do
http://static.mailchimp.com/web/guides/love-what-you-do/package/love-what-you-do.pdf
iMac 5K Retina Display, ExtremeTech, https://www.extremetech.com/gaming/192305-analyzing-the-
imac-5k-retina-display-how-do-you-squeeze-5k-out-of-a-last-gen-gpu
LG’s 98-inch 8K TV, Technobuffalo, https://www.technobuffalo.com/2016/01/07/lgs-98-inch-8k-tv-
makes-my-tv-look-like-a-stupid-toy-and-now-im-sad/
Slide 313
Slide 313 text
Image credits
Lenovo Thinkvision 28”
http://psref.lenovo.com/Product/ThinkVision_28
Responsive Images Use Cases (Dog, Art Direction),
https://responsiveimages.org/
Tobias Baldauf, Your Hero Images Need You! Save the Day with HTTP2 Image Loading,
https://vimeo.com/166145048
The New System Font Stack, Ire Aderinokun,
https://bitsofco.de/the-new-system-font-stack/
Considered and Non-considered Purchases, Joe Leech, https://www.shopify.com/partners/blog/3-high-
impact-tips-for-designing-an-ecommerce-site-that-converts
Voyage Golden Record, Charlotte Symphony
http://www.charlottesymphony.org/educationguide/voyager-golden-record/