Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Resolution Independence

Resolution Independence

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

Garth Braithwaite

August 07, 2013
Tweet

More Decks by Garth Braithwaite

Other Decks in Design

Transcript

  1. 2

  2. 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
  3. 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
  4. Raster Images • Pros • Pixel Perfection • Photo friendly

    • Cons • Production time • Performance
  5. 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);
  6. 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
  7. SVG

  8. SVG • Pros • src background • 1 asset •

    Sometimes filesize • Cons • Tools
  9. SVG • Pros • src background • 1 asset •

    Sometimes filesize • Cons • Tools • Anti Aliasing
  10. SVG

  11. Icon Fonts • Pros • Dynamic color, shadow, etc •

    Cons • TOOLS! • multiple colors