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. garth braithwaite
    RESOLUTION INDEPENDENCE

    View full-size slide

  2. Once upon a time...

    View full-size slide

  3. 1in
    1in
    72
    Once upon a time...

    View full-size slide

  4. 1in
    1in
    72
    Once upon a time...
    5184
    (x10)

    View full-size slide

  5. there were 3 resolutions

    View full-size slide

  6. there were 3 resolutions
    Display 72ppi

    View full-size slide

  7. there were 3 resolutions
    Display 72ppi
    Newsprint 180-200dpi

    View full-size slide

  8. there were 3 resolutions
    Display 72ppi
    Newsprint 180-200dpi
    Photo print 300dpi

    View full-size slide

  9. there were 3 resolutions
    Display 72ppi
    Newsprint 180-200dpi
    Photo print 300dpi
    96ppi

    View full-size slide

  10. Things changed...

    View full-size slide

  11. Things changed...
    just not enough for us to care.

    View full-size slide

  12. Pixels were pixels

    View full-size slide

  13. Pixels were pixels

    View full-size slide

  14. Pixels were pixels

    View full-size slide

  15. pixel ratio
    2

    View full-size slide

  16. pixel ratio
    1.5

    View full-size slide

  17. 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

    View full-size slide

  18. 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

    View full-size slide

  19. Operating Systems
    • OS X
    • Windows 8
    • Linux

    View full-size slide

  20. Browsers
    • Internet Explorer 10
    • Safari
    • Chrome
    • Firefox

    View full-size slide

  21. Potential Solutions

    View full-size slide

  22. Potential Solutions
    • Raster Images (so so many assets)

    View full-size slide

  23. Potential Solutions
    • Raster Images (so so many assets)
    • Vector

    View full-size slide

  24. Potential Solutions
    • Raster Images (so so many assets)
    • Vector
    • SVG

    View full-size slide

  25. Potential Solutions
    • Raster Images (so so many assets)
    • Vector
    • SVG
    • Icon Font

    View full-size slide

  26. Potential Solutions
    • Raster Images (so so many assets)
    • Vector
    • SVG
    • Icon Font
    • CSS

    View full-size slide

  27. Raster Images

    View full-size slide

  28. Raster Images
    • Pros

    View full-size slide

  29. Raster Images
    • Pros
    • Pixel Perfection

    View full-size slide

  30. Raster Images
    • Pros
    • Pixel Perfection
    • Photo friendly

    View full-size slide

  31. Raster Images
    • Pros
    • Pixel Perfection
    • Photo friendly
    • Cons

    View full-size slide

  32. Raster Images
    • Pros
    • Pixel Perfection
    • Photo friendly
    • Cons
    • Production time

    View full-size slide

  33. Raster Images
    • Pros
    • Pixel Perfection
    • Photo friendly
    • Cons
    • Production time
    • Performance

    View full-size slide

  34. Raster Images

    View full-size slide

  35. Raster Images
    • @media only screen and (-moz-min-device-pixel-
    ratio: 1.5)

    View full-size slide

  36. 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);

    View full-size slide

  37. 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

    View full-size slide

  38. SVG
    • Pros
    • src background

    View full-size slide

  39. SVG
    • Pros
    • src background
    • 1 asset

    View full-size slide

  40. SVG
    • Pros
    • src background
    • 1 asset
    • Sometimes filesize

    View full-size slide

  41. SVG
    • Pros
    • src background
    • 1 asset
    • Sometimes filesize
    • Cons

    View full-size slide

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

    View full-size slide

  43. SVG
    • Pros
    • src background
    • 1 asset
    • Sometimes filesize
    • Cons
    • Tools
    • Anti Aliasing

    View full-size slide

  44. Icon Fonts
    • Pros

    View full-size slide

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

    View full-size slide

  46. Icon Fonts
    • Pros
    • Dynamic color, shadow, etc
    • Cons

    View full-size slide

  47. Icon Fonts
    • Pros
    • Dynamic color, shadow, etc
    • Cons
    • TOOLS!

    View full-size slide

  48. Icon Fonts
    • Pros
    • Dynamic color, shadow, etc
    • Cons
    • TOOLS!
    • multiple colors

    View full-size slide

  49. Icon Fonts
    • http://fortawesome.github.com/Font-
    Awesome/

    View full-size slide

  50. END!
    Nailed it!

    View full-size slide