Retina Ready

HiDPI displays are coming to the desktop, and the majority of the web is not ready. In this session we'll look at the importance of being retina ready and we'll compare different methods for leveraging HiDPI and DPI agnostic assets.

Transcript

1. garth braithwaite RETINAREADY
12. Once upon a time...
13. Once upon a time...
14. 72 Once upon a time...
15. 72 Once upon a time...
16. 1in 1in 72 Once upon a time...
17. 1in 1in 72 Once upon a time... 5184 (x10)
20. there were 3 resolutions
21. there were 3 resolutions Display 72ppi
22. there were 3 resolutions Display 72ppi Newsprint 180-200dpi
23. there were 3 resolutions Display 72ppi Newsprint 180-200dpi Photo print 300dpi
24. there were 3 resolutions Display 72ppi Newsprint 180-200dpi Photo print 300dpi 96ppi
26. Things changed...
27. Things changed... just not enough for us to care.
29. Pixels were pixels
30. Pixels were pixels
31. Pixels were pixels
43. 1px 1px =
44. 1px =
45. 1px = 2px
47. pixel ratio 2
54. pixel ratio 1.5
59. Kindle Fire HD 8.9" 1920x1200 254 ppi CSS 1.5 Kindle Fire HD 7" 1280x800 216 ppi CSS 1.5 Kindle Fire 1024×600 169 ppi CSS 1 Galaxy S II 480×800 233 ppi CSS 1.5 Galaxy S III 720×1280 306 ppi CSS 2 Galaxy Nexus 720×1280 316 ppi CSS 2 Galaxy Note 800×1280 285 ppi CSS 2 Galaxy Note II 720×1280 267 ppi CSS 2 iPhone 4S 960×640 326 ppi CSS 2 iPhone 5 1136×640 326 ppi CSS 2 iPad Mini 1024×768 163 ppi CSS 1 iPad 1024×768 132 ppi CSS 1 iPad Retina 2048×1536 264 ppi CSS 2 One X 720×1280 312 ppi CSS 2 One S 540×960 256 ppi CSS 2 Mobile
60. MacBook Pro 15" (retina) 2880×1800 220.5 ppi CSS 2 MacBook Air 11" 1366×768 135 ppi CSS 1 MacBook Pro 17" 1920×1200 133 ppi CSS 1 MacBook Pro 15" 800×1280 128.5 ppi CSS 1 MacBook Air 13" 1440×900 127.5 ppi CSS 1 Asus Zenbook Prime 1920×1080 190 ppi CSS ? Sony Vaio Z 1920×1080 168 ppi CSS ? Lenovo T61p 1920×1200 147 ppi CSS ? Alienware m15x 1920×1080 141.5 ppi CSS ? HP Envy Spectre 1600×900 131 ppi CSS ? Laptops
61. Operating Systems • OS X • Windows 8 • Linux ?
62. Browsers • Internet Explorer 9? • Safari • Chrome • Firefox
65. Raster Images • Pros • Pixel Perfection • Cons • Production time • Performance
66. Raster Images • @media only screen and (-moz-min-device-pixel- ratio: 1.5) • background-image: -webkit-image- set(url(myimage.jpg) 1x, url(myimage-hires.jpg) 2x); • Server side
67. SVG • Pros • src background • 1 asset • Cons • Tools • Anti Aliasing
68. SVG
69. Icon Fonts • Pros • Dynamic color, shadow, etc • Cons • TOOLS! • multiple colors
70. Icon Fonts • http://fortawesome.github.com/Font- Awesome/
71. END!
72. END! Nailed it!