Slide 1
Slide 1 text
DESIGNING THE
HI-DPI WEB
Slide 2
Slide 2 text
DAVID DEMAREE
hello my name is
@ddemaree on your favorite
social network
Slide 3
Slide 3 text
W H A T I S
“HI-DPI”
Slide 4
Slide 4 text
Hi-DPI device characteristics
A high density display
Typically > 160 pixels per inch
Scaled UI graphics
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
SCREEN
Slide 7
Slide 7 text
SCREEN
demaree.me/hdweb
1024 px
CSS
Slide 8
Slide 8 text
Scaling factor
Ratio of screen pixels to CSS pixels
on a single dimension
height: 2px
width: 2px
CSS Standard (1x)
Android
‘hdpi’ (1.5x)
‘Retina’/
‘xhdpi’ (2x)
Slide 9
Slide 9 text
height: 2px
width: 2px
CSS
There is no such thing as half a
screen pixel, therefore artwork
is blended/scaled on Android
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Retina “disasters”
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Rasterized text
Image buttons
Blurry photo
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Fine detail + dark/black background = fuzzy rendering at 2x
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Rendered using Cufon
(HTML5 Canvas)
Slide 19
Slide 19 text
Why you should
support hi-DPI devices
Slide 20
Slide 20 text
Future friendly
Slide 21
Slide 21 text
Future friendly
Fit & finish
Slide 22
Slide 22 text
Future friendly
Fit & finish
Clearer text/graphics aid
usability
Slide 23
Slide 23 text
Future friendly
Fit & finish
Clearer text/graphics aid
usability
Slide 24
Slide 24 text
Why you might not
support hi-DPI devices
Slide 25
Slide 25 text
Bandwidth
Slide 26
Slide 26 text
Bandwidth
Legacy browser/device
support
Slide 27
Slide 27 text
Bandwidth
Legacy browser/device
support
Your site looks good
enough at 1x
Slide 28
Slide 28 text
HI-DPI RULES OF THUMB
Slide 29
Slide 29 text
CSS & web fonts
where possible
HI-DPI RULES OF THUMB
Slide 30
Slide 30 text
CSS & web fonts
where possible
SVG or icon fonts
where appropriate
HI-DPI RULES OF THUMB
Slide 31
Slide 31 text
CSS & web fonts
where possible
SVG or icon fonts
where appropriate
Responsive images
as needed
HI-DPI RULES OF THUMB
Slide 32
Slide 32 text
CSS3
Slide 33
Slide 33 text
CSS3 colors (rgba, hsla) 9+ ✓ ✓ ✓ ✓ ✓ ✓
Border radius 9+ ✓ ✓ ✓ ✓ ✓ ✓
Multiple backgrounds 9+ ✓ ✓ ✓ ✓ ✓ ✓
Box shadow 9+ ✓ ✓ ✓ ✓ ✓ ✓
2D/3D transforms 9+ ✓ ✓ ✓ ✓ ✓ 2D only
Text shadow 10+ ✓ ✓ ✓ ✓ ✓ ✓
Gradients 10+ ✓ ✓ ✓ ✓ ✓ ✓
Border images ✓ ✓ ✓ ✓ ✓ ✓
Text stroke ✓ ✓ ✓ ✓
Masks ✓ ✓ ✓ ✓
iOS
CSS3 Browser Support
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
Full CSS3 support (Chrome) No/limited support (IE 7-8)
Slide 38
Slide 38 text
.navigation-bar {
background-color: #04aef4;
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, #04aef4), color-stop(100%, #048ac2));
background-image: -webkit-linear-gradient(top, #04aef4, #048ac2);
background-image: -moz-linear-gradient(top, #04aef4, #048ac2);
background-image: -ms-linear-gradient(top, #04aef4, #048ac2);
background-image: -o-linear-gradient(top, #04aef4, #048ac2);
background-image: linear-gradient(top, #04aef4, #048ac2);
color: white;
border-bottom: 1px solid #ccc;
display: table;
width: 100%;
}
Vendor prefixes
You hate ‘em, right?
Slide 39
Slide 39 text
Use Sass
Slide 40
Slide 40 text
bit.ly/sassintro
Slide 41
Slide 41 text
#linear-gradient {
@include background-image(linear-gradient(left top, white, #dddddd));
}
SASS + COMPASS
Slide 42
Slide 42 text
#linear-gradient {
@include background-image(linear-gradient(left top, white, #dddddd));
}
SASS + COMPASS
#linear-gradient {
background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-
stop(0%, #ffffff), color-stop(100%, #dddddd));
background-image: -webkit-linear-gradient(left top, #ffffff, #dddddd);
background-image: -moz-linear-gradient(left top, #ffffff, #dddddd);
background-image: -o-linear-gradient(left top, #ffffff, #dddddd);
background-image: linear-gradient(left top, #ffffff, #dddddd);
}
COMPILES TO CSS
Slide 43
Slide 43 text
WEB FONTS
Slide 44
Slide 44 text
Web font advantages
Real, native browser text
Scales to any size
Robust cross-browser
support
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
BusyConf.com
Simple receipt page made delightful
through creative use of web fonts
Slide 47
Slide 47 text
Sites we like
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
Challenges
⚠
Slide 52
Slide 52 text
Challenges
Serving multiple font formats
⚠
Slide 53
Slide 53 text
Challenges
Serving multiple font formats
Cross-platform rendering
Font loading & fallbacks
Licensing
⚠
Slide 54
Slide 54 text
Hundreds of commercial typefaces
Licensing + CDN hosting included
Unlimited websites +
500,000 pageviews for $49/yr
Also included with
Adobe Creative Cloud membership
Slide 55
Slide 55 text
New free font service powered
by Typekit technology
Hundreds of free/open-source
fonts, including Cooper Black
No signup required
Integrated into
Edge Tools & Services
Adobe Edge Web Fonts
Slide 56
Slide 56 text
ICON FONTS
Slide 57
Slide 57 text
⚠
▻
☁
⬇
␡
Icon glyphs from SS Standard & SS Social by Symbolset
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
No expenses found
Try another category, perhaps?
Slide 61
Slide 61 text
Slide 62
Slide 62 text
Single color only
font-family: ‘SSSocial’
content: ‘flickr’
Slide 63
Slide 63 text
Single color only
font-family: ‘SSSocial’
content: ‘flickr’
Slide 64
Slide 64 text
Single color only
font-family: ‘SSSocial’
content: ‘flickr’
Flickr’s actual logo is rendered in 2
colors, which icon fonts don’t support
Slide 65
Slide 65 text
Accessibility
Generated content is invisible to search engines, but not to assistive devices
Inbox
Inbox
Slide 66
Slide 66 text
Accessibility
Generated content is invisible to search engines, but not to assistive devices
Inbox
Inbox
This will be read by VoiceOver on iOS as:
“Inbox Tray, Inbox.”
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
“Capital D, link”
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
SVG
Slide 72
Slide 72 text
Adobe Illustrator CS6
Slide 73
Slide 73 text
SVG
4 KB
PNG @1x - 220×70px
3 KB
PNG @2x - 440×140px
6 KB
Slide 74
Slide 74 text
iOS
9–10 4.0
SVG browser support
2-3
7-8
✓
␡ These browsers/devices will see no image,
or else will need a bitmap fallback
Slide 75
Slide 75 text
#logo {
/* 1x PNG for IE 7-8/Android 2-3 */
background-image: url('/assets/logo.png');
/* SVG for everyone else */
background-image: url('/assets/logo.svg');
}
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
Same artwork, but 96 KB larger
from inefficient SVG encoding
Slide 78
Slide 78 text
TIP: Use “SVG Tiny” profile when exporting artwork
Slide 79
Slide 79 text
RESPONSIVE
IMAGES
Slide 80
Slide 80 text
The bad news
There is no single
solution (yet) for serving
high-resolution images
Slide 81
Slide 81 text
Proposed web standards
Easy, native responsive image support coming to a
browser near you at some point
Slide 82
Slide 82 text
Proposed syntax
Not implemented by any browser as of Oct 2012
Slide 83
Slide 83 text
Media query syntax
Proposed syntax
Not implemented by any browser as of Oct 2012
Slide 84
Slide 84 text
New image set syntax
Proposed syntax
Not implemented by any browser as of Oct 2012
Slide 85
Slide 85 text
Proposed syntax
Not implemented by any browser as of Oct 2012
Slide 86
Slide 86 text
#selector {
background-image: url(no-image-set.png);
background-image: -webkit-image-set(url(myimage.jpg) 1x,
url(myimage-hires.jpg) 2x);
/* other prefixes for -moz, -o and -ms go here */
}
Proposed image-set syntax
Available today in Chrome, Safari 6, iOS 6
Slide 87
Slide 87 text
What are our
options today?
Slide 88
Slide 88 text
Just serve one resolution
Slide 89
Slide 89 text
Different kinds of images
require different solutions
Slide 90
Slide 90 text
resolutions
Different kinds of images
require different solutions
Slide 91
Slide 91 text
No content
Slide 92
Slide 92 text
Small, finely detailed logos look bad on
Retina, especially on dark backgrounds
Slide 93
Slide 93 text
1280×486px photo looks okay on Retina
Slide 94
Slide 94 text
Sample photo @ 1x
1280×486
= 193 KB
Slide 95
Slide 95 text
Sample photo @ 1x
1280×486
= 193 KB Sample photo @ 2x
2560×972
= 602 KB
Slide 96
Slide 96 text
210px Gravatar photo @2x
Slide 97
Slide 97 text
1x Gravatar
58 KB
2x Gravatar
188 KB
Slide 98
Slide 98 text
1x Gravatar
58 KB
2x Gravatar
188 KB
1.5x Gravatar
117 KB
Slide 99
Slide 99 text
CSS @media queries
Slide 100
Slide 100 text
#logo {
background-image: url(/assets/logo.png);
background-size: 400px, 200px;
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
#logo {
background-image: url("/assets/[email protected]");
}
}
@media queries + background-size
Slide 101
Slide 101 text
#logo {
background-image: url(/assets/logo.png);
background-size: 400px, 200px;
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
#logo {
background-image: url("/assets/[email protected]");
}
}
@media queries + background-size
background-size fixes the image at its 1x size (in CSS
pixels), otherwise 2x versions would be twice as large.
Slide 102
Slide 102 text
#logo {
background-image: url(/assets/logo.png);
background-size: 400px, 200px;
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
#logo {
background-image: url("/assets/[email protected]");
}
}
@media queries + background-size
Just like width breakpoints in a responsive grid,
media queries establish pixel density breakpoints for
replacing 1x images with higher-quality ones
Slide 103
Slide 103 text
#logo {
background-image: url(/assets/logo.png);
background-size: 400px, 200px;
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
#logo {
background-image: url("/assets/[email protected]");
}
}
@media queries + background-size
Slide 104
Slide 104 text
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
/* Retina-specific stuff here */
}
It wouldn’t be CSS if there weren’t f$%&ing vendor prefixes
Slide 105
Slide 105 text
No content
Slide 106
Slide 106 text
.app-icon {
background-image: url(icons.png);
}
@media screen and (min-device-pixel-ratio: 1.5) {
.app-icon {
background-image: url([email protected]);
/* Size of 1x sprite set */
background-size: 750px 144px;
}
}
Responsive CSS sprites
Slide 107
Slide 107 text
.app-icon.logo {
/* All other measurements in CSS px */
background-position: -648px -90px;
width: 82px;
}
Responsive CSS sprites
Slide 108
Slide 108 text
HTML + JavaScript
Slide 109
Slide 109 text
// Returns the scaling factor, e.g. 1.5 or 2
if((window.devicePixelRatio === undefined ? 1 »
: window.devicePixelRatio) > 1) {
document.cookie='HTTP_IS_RETINA=1;path=/';
}
devicePixelRatio property
Available in WebKit browsers + Opera
Sets a cookie ‘HTTP_IS_RETINA’ if scaling factor > 1
Slide 110
Slide 110 text
Changes the src attribute of all
![]()
tags inside a container
Uses data attributes to track opt
into replacement, track which
images have been replaced
Loads both 1x and 2x versions, with
noticeable “flash of non-Retina
content”
Naïve JavaScript replacement
on Apple.com
Slide 111
Slide 111 text
github.com/scottjehl/picturefill
Slide 112
Slide 112 text
Picturefill polyfills the proposed syntax
using
elements and JavaScript
Slide 113
Slide 113 text
No silver bullets
Slide 114
Slide 114 text
No content
Slide 115
Slide 115 text
Use the most appropriate strategy for
each kind of image
Slide 116
Slide 116 text
Use the most appropriate strategy for
each kind of image
Whenever possible, use CSS
Slide 117
Slide 117 text
Use the most appropriate strategy for
each kind of image
Whenever possible, use CSS
Try serving only one resolution
Slide 118
Slide 118 text
Use the most appropriate strategy for
each kind of image
Whenever possible, use CSS
Try serving only one resolution
Use Picturefill if true responsive images
are needed
Slide 119
Slide 119 text
THANK YOU
Slide 120
Slide 120 text
DAVID DEMAREE
BYE my name WAs
✉
[email protected]
@ddemaree
log.demaree.me
typekit.com
html.adobe.com