What the iPad 3/HD Display Means for Designers

Borrowed from Mutual Mobile's site which can be found here

As March 7 draws closer, it seems certain that Apple’s next iPad will have a Retina-style display. While the hardware specs are unknown, the 9.7″ display will be doing a lot of work to push almost as many pixels as Apple’s 27″ iMac.

Why 2x?

Apple always pursues elegance in their hardware and software, so the likelihood of them introducing a device at any scale other than 2x isn’t likely.

Marc Edwards of Bjango explains why pixels matter and why deviation makes it difficult and more costly to pursue perfection:

If the design and screen grids don’t match, pixels get blurred. Quality is lost. Every single element on the screen is subject to these rules — elements drawn in code, as a vector or as a bitmap (if they’re scaled, bitmaps lose even more quality than things drawn in code or as vectors).

Putting the New iPad Display in Perspective

How will we design for such a display? Even their 27″ iMac and thunderbolt displays wouldn’t be be tall enough to fit an entire iPad Retina screen in landscape without cropping it by 96 pixels. Hopefully Apple will release a new, higher resolution display or people will be scouring eBay for an old Apple Cinema HD to make life a bit easier.

Here’s a comparison of the following screen and device sizes:

• iPhone 4/4S: 960×640
• iPad 2: 1024×768
• Samsung Galaxy Tab / Motorola Xoom: 1280×800
• 13″ MacBook Air / 15″ MacBook Pro: 1440×900
• 15″ MacBook Pro (Hi-Res): 1680×1050
• 17″ MacBook Pro: 1920×1200
• 27″ iMac / Thunderbolt Display: 2560×1440
• iPad 3: 2048×1536
• 30″ Apple Cinema HD: 2560×1600

Dealing with 2x: Easiest for Designers

We’ve been through this before when the iPhone 4′s Retina display was introduced. You don’t get beauty without some effort, but Apple makes it easy to use higher resolution assets with their @2x naming method.

Want to save yourself headaches as mobile devices continue to get higher resolutions?

• Always use vector objects and layer styles with Photoshop or graphic styles in Illustrator.
• Don’t embed text in your buttons, instead use stretchable buttons and generate text on the device.
• Do all of your initial work at 320×480 for iPhone or 768×1024 for iPad to make sure that your design scales properly when you convert it to 2x.
• Bjango offers some more detailed advice when designing for Retina devices; here’s a link for Part 1 and Part 2.