Retina Display refers to high pixel density displays with pixel densities of 300 ppi or greater. The iPhone 4 in 2010 was the first device to feature a Retina Display. Retina Displays split each pixel into four to reduce pixelation. Supported devices include various iPhones and iPads with resolutions ranging from 960x640 to 2880x1800. Designing and developing for Retina requires exporting images and vectors at double the resolution and using techniques like media queries for background images.

1. Retina Display
The highest resolution in websites and apps today

2. What’s a Retina Display?

3. Overview
• Marketing Term created by Apple
• iPhone 4 was the first device (2010)
• High pixel density displays (~300 ppi or greater)
• One pixel split into 4 pixels
• Drastically reduces pixelation

4. See the difference?

5. See the difference?

6. Supported Devices
Device Resolution Pixel Density
iPhone 4S 960x640 326 ppi
iPhone 5 1136x640 326 ppi
iPad 3rd + 4th Gen. 2048x1536 264 ppi
Macbook Pro 13” 2560x1600 227 ppi
Macbook Pro 15” 2880x1800 220 ppi
...other companies investing as well in HiDPi displays

7. Designing for Retina

8. • Use for rasterized retina artwork
• Setup document 2x normal resolution
(960w @1x = 1920w @2x)
• Keep resolution at 72 ppi
• Typography follows 2x rule
(14px @1x = 28px @2x)
• Layer Style measurements divisible by 2
• Pay attention to zoom levels

10. • Use for vectorized retina artwork
• Does not require document setup adjustments
• Trim artboards to artwork when possible
• SVG format great for icons, logos, small graphics
• Export to <canvas> via free Ai plugin

11. Don’t forget favicons!
• Used for both websites and apps
• Supports HiDPi
• Saved as .png
(Can use Photoshop or Illustrator)
• Various sizes for mobile devices

12. Developing for Retina

13. Raster Artwork .jpg, .gif, .png
Vector Artwork .svg, <canvas>
Choose the right file type

14. Exporting Raster
• Export artwork twice per image
(1x and 2x the default resolution)
• Append @2x to file name for retina version
(image.png for 1x, image@2x.png for 2x)
• Pay attention to layer style settings!
• Tip: Use ImageOptim for safe image compressions

15. Exporting Vector
• Export artwork only once!
• Trim artboards to artwork when possible
(Lower file size and greater flexibility in CSS positioning)
• Use SVG default settings (SVG 1.1)
• SVG now fully recommended*
(Not supported in IE8 or lower, Android Browser 2.3 or lower)

16. Background Images
.sweet-graphic {
width: 50px;
height: 50px;
background-image: url(“images/sweet-graphic.png”);
}
• Use media queries for Background Images (raster only)
• Set background-size property to size of original graphic
• Tip: SVG backgrounds require background-size by default

17. Background Images
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
.sweet-graphic {
background-image: url(“images/sweet-graphic@2x.png”);
background-size: 50px auto;
}
}

18. Inline Images
• Use Retina.JS for Inline Images
• Store both 1x and 2x graphics in same directory

19. Favicons!
<!-- For iPhone w/ retina -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/filename.png">
<!-- For iPad w/o retina-->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/filename.png">
<!-- For iPad w/ retina -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/filename.png">
<!-- For iPhone 3G, iPod Touch and Android, size=”57x57” -->
<link rel="apple-touch-icon-precomposed" href="/filename.png">
<!-- For everything else -->
<link rel="shortcut icon" href="/favicon.png">

20. Selling for Retina

21. The benefits are clear!
• PC + Mac devices moving toward HiDPi screens
• Mobile manufacturers ahead of the curve
• Improves user experience
• No performance hit on older technology
• Great for web/mobile apps, photo-centric sites

22. 10%NEW PROJECTS TODAY
• Retroactive projects currently quoted on per case basis
(Not enough information at this time)
• Projects already in the mix with retina
(Picture.com, TweetBox, Ateb, Atlantic BT, Docurep, Muzik, etc.)

23. Retina Display
The highest resolution in websites and apps today