Designing the Hi-DPI Web

On optimizing web sites and apps for next-generation displays and the post-pixel future. Presented at ChicagoWebConf 2012 at 1871 in Chicago, IL.

Transcript

1. DESIGNING THE HI-DPI WEB
2. DAVID DEMAREE hello my name is @ddemaree on your favorite social network
3. W H A T I S “HI-DPI”
4. Hi-DPI device characteristics A high density display Typically > 160 pixels per inch Scaled UI graphics
6. SCREEN
7. SCREEN demaree.me/hdweb 1024 px CSS
8. 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)
9. height: 2px width: 2px CSS There is no such thing as half a screen pixel, therefore artwork is blended/scaled on Android
12. Retina “disasters”
14. Rasterized text Image buttons Blurry photo
16. Fine detail + dark/black background = fuzzy rendering at 2x
18. Rendered using Cufon (HTML5 Canvas)
19. Why you should support hi-DPI devices
20. Future friendly
21. Future friendly Fit & finish
22. Future friendly Fit & finish Clearer text/graphics aid usability
23. Future friendly Fit & finish Clearer text/graphics aid usability
24. Why you might not support hi-DPI devices
25. Bandwidth
26. Bandwidth Legacy browser/device support
27. Bandwidth Legacy browser/device support Your site looks good enough at 1x
28. HI-DPI RULES OF THUMB
29. CSS & web fonts where possible HI-DPI RULES OF THUMB
30. CSS & web fonts where possible SVG or icon fonts where appropriate HI-DPI RULES OF THUMB
31. CSS & web fonts where possible SVG or icon fonts where appropriate Responsive images as needed HI-DPI RULES OF THUMB
32. CSS3
33. 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
37. Full CSS3 support (Chrome) No/limited support (IE 7-8)
38. .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?
39. Use Sass
40. bit.ly/sassintro
41. #linear-gradient { @include background-image(linear-gradient(left top, white, #dddddd)); } SASS + COMPASS
42. #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
43. WEB FONTS
44. Web font advantages Real, native browser text Scales to any size Robust cross-browser support
46. BusyConf.com Simple receipt page made delightful through creative use of web fonts
47. Sites we like
51. Challenges ⚠
52. Challenges Serving multiple font formats ⚠
53. Challenges Serving multiple font formats Cross-platform rendering Font loading & fallbacks Licensing ⚠
54. Hundreds of commercial typefaces Licensing + CDN hosting included Unlimited websites + 500,000 pageviews for $49/yr Also included with Adobe Creative Cloud membership
55. 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
56. ICON FONTS
57. ⚠  ▻ ☁      ⬇ ␡ Icon glyphs from SS Standard & SS Social by Symbolset
60. <!-- Look, ma, no extra markup --> <div class="blank-slate"> <h2>No expenses found</h2> <p>Try another category, perhaps?</p> </div> .blank-slate:before { color: #999; content: '\1F4E5'; /* Unicode code point */ display: block; font-family: 'SSStandard'; /* Icon font */ font-size: 300%; }
61. <button class="delete-btn"> <span class="ss-icon ss-close"></spa Delete this expense </button>
62.  Single color only font-family: ‘SSSocial’ content: ‘flickr’
63.  Single color only     font-family: ‘SSSocial’ content: ‘flickr’
64.  Single color only font-family: ‘SSSocial’ content: ‘flickr’ Flickr’s actual logo is rendered in 2 colors, which icon fonts don’t support
65. Accessibility Generated content is invisible to search engines, but not to assistive devices Inbox <span class="ss-icon ss-inbox"></span> Inbox
66. Accessibility Generated content is invisible to search engines, but not to assistive devices Inbox <span class="ss-icon ss-inbox"></span> Inbox This will be read by VoiceOver on iOS as: “Inbox Tray, Inbox.”
68. “Capital D, link”
71. SVG
72. Adobe Illustrator CS6
73. SVG 4 KB PNG @1x - 220×70px 3 KB PNG @2x - 440×140px 6 KB
74. 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
75. #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'); }
77. Same artwork, but 96 KB larger from inefficient SVG encoding
78. TIP: Use “SVG Tiny” profile when exporting artwork
79. RESPONSIVE IMAGES
80. The bad news There is no single solution (yet) for serving high-resolution images
81. Proposed web standards Easy, native responsive image support coming to a browser near you at some point
82. <picture> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <!-- fallback for legacy browsers --> <img src="small-1.jpg"> </picture> Proposed <picture> syntax Not implemented by any browser as of Oct 2012
83. <picture> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <!-- fallback for legacy browsers --> <img src="small-1.jpg"> </picture> Media query syntax Proposed <picture> syntax Not implemented by any browser as of Oct 2012
84. <picture> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <!-- fallback for legacy browsers --> <img src="small-1.jpg"> </picture> New image set syntax Proposed <picture> syntax Not implemented by any browser as of Oct 2012
85. <picture> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <!-- fallback for legacy browsers --> <img src="small-1.jpg"> </picture> Proposed <picture> syntax Not implemented by any browser as of Oct 2012
86. #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
87. What are our options today?
88. Just serve one resolution
89. Different kinds of images require different solutions
90. resolutions Different kinds of images require different solutions
92. Small, finely detailed logos look bad on Retina, especially on dark backgrounds
93. 1280×486px photo looks okay on Retina
94. Sample photo @ 1x 1280×486 = 193 KB
95. Sample photo @ 1x 1280×486 = 193 KB Sample photo @ 2x 2560×972 = 602 KB
96. 210px Gravatar photo @2x
97. 1x Gravatar 58 KB 2x Gravatar 188 KB
98. 1x Gravatar 58 KB 2x Gravatar 188 KB 1.5x Gravatar 117 KB
99. CSS @media queries
100. #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/logo@2x.png"); } } @media queries + background-size
101. #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/logo@2x.png"); } } @media queries + background-size background-size fixes the image at its 1x size (in CSS pixels), otherwise 2x versions would be twice as large.
102. #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/logo@2x.png"); } } @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
103. #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/logo@2x.png"); } } @media queries + background-size
104. @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
106. .app-icon { background-image: url(icons.png); } @media screen and (min-device-pixel-ratio: 1.5) { .app-icon { background-image: url(icons@2x.png); /* Size of 1x sprite set */ background-size: 750px 144px; } } Responsive CSS sprites
107. .app-icon.logo { /* All other measurements in CSS px */ background-position: -648px -90px; width: 82px; } Responsive CSS sprites
108. HTML + JavaScript
109. // 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
110. Changes the src attribute of all <img> 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
111. github.com/scottjehl/picturefill
112. Picturefill polyfills the proposed <picture> syntax using <div> elements and JavaScript <div data-picture> <div data-src="external/imgs/pie.jpg"></div> <div data-src="external/imgs/pie@1.5x.jpg" data-media="(min-device-pixel-ratio: 1.5)"></div> <div data-src="external/imgs/pie@2x.jpg" data-media="(min-device-pixel-ratio: 2)"></div> <!-- Fallback content for non-JS browsers --> <noscript><img src="external/imgs/pie.jpg"></noscript> </div>
113. No silver bullets
115. Use the most appropriate strategy for each kind of image
116. Use the most appropriate strategy for each kind of image Whenever possible, use CSS
117. Use the most appropriate strategy for each kind of image Whenever possible, use CSS Try serving only one resolution
118. 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
119. THANK YOU
120. DAVID DEMAREE BYE my name WAs ✉  ddemaree@adobe.com @ddemaree log.demaree.me typekit.com html.adobe.com