Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Retina Ready

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.

Garth Braithwaite

January 31, 2013
Tweet

More Decks by Garth Braithwaite

Other Decks in Design

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

    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