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
   

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