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

Retina Ready

Garth Braithwaite
January 31, 2013

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

  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. Once upon a time...

  13. Once upon a time...

  14. 72 Once upon a time...

  15. 72 Once upon a time...

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

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

  18. None
  19. None
  20. there were 3 resolutions

  21. there were 3 resolutions Display 72ppi

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

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

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

    300dpi 96ppi
  25. None
  26. Things changed...

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

  28. None
  29. Pixels were pixels

  30. Pixels were pixels

  31. Pixels were pixels

  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. 2

  42. None
  43. 1px 1px =

  44. 1px =

  45. 1px = 2px

  46. None
  47. pixel ratio 2

  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. pixel ratio 1.5

  55. None
  56. None
  57. None
  58. None
  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
  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
  61. Operating Systems • OS X • Windows 8 • Linux

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

    Firefox
  63. None
  64. None
  65. Raster Images • Pros • Pixel Perfection • Cons •

    Production time • Performance
  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
  67. SVG • Pros • src background • 1 asset •

    Cons • Tools • Anti Aliasing
  68. SVG

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

    Cons • TOOLS! • multiple colors
  70. Icon Fonts • http://fortawesome.github.com/Font- Awesome/

  71. END!

  72. END! Nailed it!