Retina Ready

HiDPI displays are coming to the desktop, and the majority of the web is not ready. In this session we'll look at the importance of being retina ready and we'll compare different methods for leveraging HiDPI and DPI agnostic assets.

Transcript

1. garth braithwaite
   RETINAREADY
   

   View Slide

2. 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. Once upon a time...
    

    View Slide

13. Once upon a time...
    

    View Slide

14. 72
    Once upon a time...
    

    View Slide

15. 72
    Once upon a time...
    

    View Slide

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

    View Slide

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

    View Slide

18. View Slide

19. View Slide

20. there were 3 resolutions
    

    View Slide

21. there were 3 resolutions
    Display 72ppi
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. View Slide

26. Things changed...
    

    View Slide

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

    View Slide

28. View Slide

29. Pixels were pixels
    

    View Slide

30. Pixels were pixels
    

    View Slide

31. Pixels were pixels
    

    View Slide

32. View Slide

33. View Slide

34. 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. 1px
    1px =
    

    View Slide

44. 1px =
    

    View Slide

45. 1px = 2px
    

    View Slide

46. View Slide

47. pixel ratio
    2
    

    View Slide

48. View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. pixel ratio
    1.5
    

    View Slide

55. View Slide

56. View Slide

57. View Slide

58. View Slide

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

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

61. Operating Systems
    • OS X
    • Windows 8
    • Linux ?
    

    View Slide

62. Browsers
    • Internet Explorer 9?
    • Safari
    • Chrome
    • Firefox
    

    View Slide

63. View Slide

64. View Slide

65. Raster Images
    • Pros
    • Pixel Perfection
    • Cons
    • Production time
    • Performance
    

    View Slide

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

67. SVG
    • Pros
    • src background
    • 1 asset
    • Cons
    • Tools
    • Anti Aliasing
    

    View Slide

68. SVG
    

    View Slide

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

    View Slide

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

    View Slide

71. END!
    

    View Slide

72. END!
    Nailed it!
    

    View Slide