Resolution Independence

In this session we discussed how to prepare assets to work across devices and screens and be resolution agnostic

Transcript

1. garth braithwaite RESOLUTION INDEPENDENCE
2. GARTHDB
18. Once upon a time...
19. 1in 1in 72 Once upon a time...
20. 1in 1in 72 Once upon a time... 5184 (x10)
23. there were 3 resolutions
24. there were 3 resolutions Display 72ppi
25. there were 3 resolutions Display 72ppi Newsprint 180-200dpi
26. there were 3 resolutions Display 72ppi Newsprint 180-200dpi Photo print 300dpi
27. there were 3 resolutions Display 72ppi Newsprint 180-200dpi Photo print 300dpi 96ppi
29. Things changed...
30. Things changed... just not enough for us to care.
32. Pixels were pixels
33. Pixels were pixels
34. Pixels were pixels
46. 1px 1px =
47. 1px = 2px
49. pixel ratio 2
56. pixel ratio 1.5
61. 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
62. 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
63. Operating Systems • OS X • Windows 8 • Linux
64. Browsers • Internet Explorer 10 • Safari • Chrome • Firefox
68. Potential Solutions
69. Potential Solutions • Raster Images (so so many assets)
70. Potential Solutions • Raster Images (so so many assets) • Vector
71. Potential Solutions • Raster Images (so so many assets) • Vector • SVG
72. Potential Solutions • Raster Images (so so many assets) • Vector • SVG • Icon Font
73. Potential Solutions • Raster Images (so so many assets) • Vector • SVG • Icon Font • CSS
74. Raster Images
75. Raster Images • Pros
76. Raster Images • Pros • Pixel Perfection
77. Raster Images • Pros • Pixel Perfection • Photo friendly
78. Raster Images • Pros • Pixel Perfection • Photo friendly • Cons
79. Raster Images • Pros • Pixel Perfection • Photo friendly • Cons • Production time
80. Raster Images • Pros • Pixel Perfection • Photo friendly • Cons • Production time • Performance
81. Raster Images
82. Raster Images • @media only screen and (-moz-min-device-pixel- ratio: 1.5)
83. 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);
84. 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
85. SVG
86. SVG • Pros
87. SVG • Pros • src background
88. SVG • Pros • src background • 1 asset
89. SVG • Pros • src background • 1 asset • Sometimes filesize
90. SVG • Pros • src background • 1 asset • Sometimes filesize • Cons
91. SVG • Pros • src background • 1 asset • Sometimes filesize • Cons • Tools
92. SVG • Pros • src background • 1 asset • Sometimes filesize • Cons • Tools • Anti Aliasing
93. SVG
94. Icon Fonts
95. Icon Fonts • Pros
96. Icon Fonts • Pros • Dynamic color, shadow, etc
97. Icon Fonts • Pros • Dynamic color, shadow, etc • Cons
98. Icon Fonts • Pros • Dynamic color, shadow, etc • Cons • TOOLS!
99. Icon Fonts • Pros • Dynamic color, shadow, etc • Cons • TOOLS! • multiple colors
100. Icon Fonts • http://fortawesome.github.com/Font- Awesome/
102. END!
103. END! Nailed it!