Designing for the Retina Display (326ppi)

by July 8, 2010

For three generations of the iPhone, Apple kept the screen consistent (320x480 pixels and 3.5 inches diagonal). But now Apple's new iPhone 4 boasts the "highest resolution phone screen ever (960x640 pixels, 3.5 inches diagonal, & an 800:1 contrast ratio)." What's the impact to designers?

But first, why is it an issue? Because of PPI (pixels per inch) or pixel density variations.

"A screen with lower density has fewer available pixels spread across the screen width and height, where a screen with higher density has more — sometimes significantly more — pixels spread across the same area. The density of a screen is important because, other things being equal, a UI element (such as a button) whose height and width are defined in terms of screen pixels will appear larger on the lower density screen and smaller on the higher density screen."

Initial Palm and Android smartphones were in the same ballpark as Apple's first set of iPhones so ppi (pixels per inch) was roughly the same across these devices.

  • iPhone: 320x480 | 3.5 in | 164ppi
  • Palm Pre | 320x480 | 3.1 in 186ppi
  • Palm Pixie | 320x400 | 2.63 in | 194ppi
  • T-Mobile G1 | 320x480 | 3.2 in | 180ppi
MyTouch 3G | 320x480 | 3.2 in | 180ppi
HTC Hero | 320x480 | 3.2 in | 180ppi

The next set of Android phones featured much higher PPI only to be bested by Nokia's next generation of smartphones and finally the iPhone 4.

  • Motorola Droid | 480x854 | 3.7 in | 264ppi
  • Nexus One | 480x800 | 3.7 in | 252ppi
HTC Desire | 480x800 | 3.7 in | 252ppi
  • Nokia N97 | 360x640 | 3.2 in | 229ppi
  • Nokia N900 | 800x480 | 3.5 in | 266ppi
  • Apple iPhone 4 | 960x640 | 3.5 in | 326ppi

So how do designers manage these jumps in pixel density? Here's a round-up of recent articles that tackle the issue.

Updated on: March 14 2012 with a few additional resources.

Optimising for High Pixel Density Displays by Optic Swerve outlines a CSS and JavaScript approach for web sites/apps that cater to high density pixel displays.

  • Start with a basic fluid CSS design. Tweak for specific ‘device-width’ ranges with Media Queries. Even better, use ‘width’ queries for even further flexibility and easy prototyping. Tweak further with ‘device-pixel-ratio’ queries.
  • The ‘text-rendering’ CSS options, specifically ‘optimizeLegibility’ are worth enabling on high pixel density screens.
  • Create one large (2x resolution) image and then scale down by 50% (in-browser) via CSS for all pixel density displays. Devices without a perfect ‘2’ pixel ratio will still produce better results than a low-resolution image, for far less work.
  • Use the CSS tools at your disposal. They're resolution independent and bandwidth friendly.

Designing for Retina display by Bjango illustrates a workflow for resolution-independent vector graphics in Photoshop.

  • Create solid color, pattern or gradient layers with vector masks (just make sure you have snap to pixel turned on, where possible).
  • More complex objects get drawn in Illustrator to the exact pixel size, then pasted into Photoshop as a shape layer.
  • Even more complex objects, that require multiple colours, get drawn in Illustrator to the exact pixel size, then pasted into Photoshop as a smart object.
  • Photoshop Actions can scale designs to 200% quickly.
  • Further Q&A about this workflow.

Designing for iPhone 4's Retina Display by Josh Clark (author of Tapworthy) looks at the impact of the Retina Display on iPhone application development.

  • Starting in iOS 4, dimensions are measured in “points” instead of pixels. Conveniently enough, the iPhone screen is 320x480 points on both iPhone 4 and older models.
  • On iPhone 4, a point is two pixels; draw a one-point line, and it shows up two pixels wide. So: just specify your measurements in points for all devices, and iOS automatically draws everything to the right proportion on the screen.
  • To add high-resolution images to your app, you have to include a second set of all your graphic files. For every image in your app, add a second version that’s twice the size, adding @2x to the name.
  • Photoshop fans should learn to get comfortable with Illustrator. By building your app graphics in vector format, you can export them in whatever size you like with limited muss or fuss.

How to make your web content look stunning on the iPhone 4’s new Retina display by Aral Balkan outlines the high-level impact of the Retina Display on Web design & development.

  • If you want your applications and web sites to look beautiful on the iPhone 4's new retina screen, you're going to have to create high-resolution versions of your bitmaps and/or use vectors.
  • You basically have to design liquid interfaces (and interface elements) for your apps.
  • SVG can help in creating resolution-independent designs.
  • Since browsers do not currently have automatic support for loading high-resolution versions of image and video assets, we can use a combination of CSS media queries and JavaScript for the same effect.
  • With CSS3 media queries you can then build Web sites with completely different CSS files based off the pixel-ratio of CSS pixels to device pixels, including higher res artwork as necessary.
  • This approach also degrades gracefully, since you can specify the lowres CSS file and then higher res CSS files inside media queries that will be ignored by browsers that don’t understand them.

High DPI Web Sites by Dave Hyatt outlines how the WebKit team is thinking about allowing Web authors to effectively support very high resolution devices.

  • Most Web site authors have traditionally thought of a CSS pixel as a device pixel. However as we enter this new high DPI world where the entire UI may be magnified, a CSS pixel can end up being multiple pixels on screen.
  • Safari actually supports PDF as an image format (the hands of the clock Dashboard widget are an example of this). However other browsers do not support this format. The agreed-upon standard for scalable graphics on the Web is SVG.
  • Our goal with WebKit is to make SVG a first-class image format, so that it can be used anywhere you might use a PNG, a GIF or a JPG.

Targeting the iPhone 4 Retina Display with CSS3 Media Queries by Walt Dickinson shows how to use CSS3 media queries to target the Retina Display.

  • In order to preserve the design of existing websites, images are automatically pixel-doubled. And this creates a schism between “device pixels” and “CSS pixels”.
  • With CSS3 media queries, you can use device-pixel-ratio, for targeting specific pixel densities. This tells browsers to include High PPi CSS files only if the device pixel ratio is 2 or higher. This CSS file overrides the background images of some of my site’s graphics with higher resolution versions and uses the background-size property to set the correct CSS pixel dimensions.

In What does 320dpi mean to designers? Tim Van Damme provides a list of tricks and techniques for design on the Retina Display.

  • Solid lines and drop shadow on text should be 2px wide. Subtle glows however should be 1.5px
  • All the objects you design should measure a multitude of 2. Designing a 50×50 pixel circle will turn out to be 25×25 on an older iPhone.
  • Try doing as much as you can with code. Drawing gradients and lines and more with pure code delivers performance gains.
  • For objects that need an image, you should always provide 2 images, one for each resolution.
  • Keep testing the interface you’re designing on an actual iPhone. Save your files on Dropbox. Grab your iPhone, open the Dropbox client, and view them on the device.

If you've come across any other resources on designing for the Retina Display (326ppi), let me know!