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 Slide

  2. GARTHDB

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. Once upon a time...

    View Slide

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

    View Slide

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

    View Slide

  21. View Slide

  22. View Slide

  23. there were 3 resolutions

    View Slide

  24. there were 3 resolutions
    Display 72ppi

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  28. View Slide

  29. Things changed...

    View Slide

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

    View Slide

  31. View Slide

  32. Pixels were pixels

    View Slide

  33. Pixels were pixels

    View Slide

  34. Pixels were pixels

    View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. 2

    View Slide

  45. View Slide

  46. 1px
    1px =

    View Slide

  47. 1px = 2px

    View Slide

  48. View Slide

  49. pixel ratio
    2

    View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. pixel ratio
    1.5

    View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  65. View Slide

  66. View Slide

  67. View Slide

  68. Potential Solutions

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  74. Raster Images

    View Slide

  75. Raster Images
    • Pros

    View Slide

  76. Raster Images
    • Pros
    • Pixel Perfection

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  81. Raster Images

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  85. SVG

    View Slide

  86. SVG
    • Pros

    View Slide

  87. SVG
    • Pros
    • src background

    View Slide

  88. SVG
    • Pros
    • src background
    • 1 asset

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  93. SVG

    View Slide

  94. Icon Fonts

    View Slide

  95. Icon Fonts
    • Pros

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  101. View Slide

  102. END!

    View Slide

  103. END!
    Nailed it!

    View Slide