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

B5cf6e112eeee572d722743dea924487?s=128

Garth Braithwaite

August 07, 2013
Tweet

Transcript

  1. garth braithwaite RESOLUTION INDEPENDENCE

  2. GARTHDB

  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. Once upon a time...

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

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

  21. None
  22. None
  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
  28. None
  29. Things changed...

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

  31. None
  32. Pixels were pixels

  33. Pixels were pixels

  34. Pixels were pixels

  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. 2

  45. None
  46. 1px 1px =

  47. 1px = 2px

  48. None
  49. pixel ratio 2

  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. pixel ratio 1.5

  57. None
  58. None
  59. None
  60. None
  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
  65. None
  66. None
  67. None
  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/

  101. None
  102. END!

  103. END! Nailed it!