Updating for iPad retina display

Well today was the day that people started to get their hands on the third generation iPad with a double resolution retina display. Below are my notes on the minimal updates that you should consider making to best support all of those extra pixels.

Custom Application Images

Apple takes care of the UIKit images for standard iOS controls but if you have any custom images specific to the iPad you will as with the iPhone 4 need to supply @2x versions. I know many developers were sensibly preparing for this ahead of time by updating their iOS 5.0 built apps with double resolution images in the hope that they would just work on the new iPad. However there is one important caveat that can nicely summarised by this tweet from Michael Jurewitz (@Jury):

PSA - If you want your retina graphics to show up on the new iPad, you NEED
to build with Xcode 4.3.1 and __link against the 5.1 SDK__

Application Icons

The next most obvious update you need to do is provide a double resolution version of the main App icon. Apps that still only have a single resolution icon will stick out like a sore thumb on a retina display iPad.

There seems to be an a never-ending and growing list of dimensions that you need to supply for the application icon and the iPad retina display adds to that list. You should consult the iOS App Programming Guide and iOS Human Interface Guidelines for the comprehensive list but as a minimum you should at least include a new App icon and search results icon for the iPad retina display as follows:

iPad App icon (144x144 pixels)

The standard resolution main App icon for the iPad is 72x72 pixels. The retina display requires a @2x variant that is therefore 144x144 pixels.

iPad Search results icon (100x100 pixels)

The search results icon is used on the search results page and at standard resolutions is 50x50 pixels on the iPad. The @2x variant for the retina display version of the iPad is therefore 100x100 pixels.

Filenames and Info.plist

Depending on the level of backward compatibility that you need to maintain you may need to use specific naming conventions or add the new icon files to the application Info.plist file.

The most complicated situation is when you are dealing with a universal app that needs to maintain compatibility all the way back to iOS 3.1.x or earlier. In this case you will need to use very specific Icon filenames as the Info.plist keys were not used prior to iOS 3.2. The full list would now be something like this:

Of course there is nothing to stop you using this naming convention for all of your apps but if you are targeting iOS 3.2 or later you can specify different filenames using the Info.plist file. The CFBundleIconFiles key was introduced with iOS 3.2 and allows you to directly list the names of the icon files. if you omit the filename extension (.png) you should be able to omit listing the @2x variants as the system should automatically detect the double resolution versions.

To further complicate things Apple introduced a new CFBundleIcons key in iOS 5.0 to support the Newsstand. This key contains a CFBundleIconFiles subkey which is an array of filenames which take precedence over the older CFBundleIconFiles key. If you are targeting iOS 5.0 and later you can switch to this key but if you need to support iOS 4.x or 3.2 you should also include the CFBundleIconFiles key.

All in all this is a bit of a mess and I would suggest that you test all of the various combinations you need to support carefully as it is easy to slip up.

App Store Screenshots

Apple recently changed the App Store submission rules for iPhone and iPod touch apps so that you have to submit screenshots for the retina display. The actual dimensions of the screenshot vary depending on whether you include space for the status bar or not but dimensions should be as follows (first value includes the status bar):

Apple has not, so far, placed a similar restriction on iPad screenshots but since you will want your screenshots to look good on the latest iPad it seems like a good time to switch to only retina sized screenshots for all devices.

The dimensions for a retina iPad screenshot are as follows (as before the first dimension includes the status bar):

Never miss a post!

iOS Size Classes Cheat Sheet

Subscribe and get my free iOS Size Classes Cheat Sheet

Success! Now check your email to confirm your subscription and download your free guide to iOS Size Classes.

There was an error submitting your subscription. Please try again.

Unsubscribe at any time.
No time to watch WWDC videos?

Sign up to get my iOS posts direct to your inbox and I will send you a free PDF of my iOS Size Classes Cheat Sheet.

OK! Check your inbox (or spam folder) for an email to confirm your details and download your free guide to iOS Size Classes.

There was an error submitting your subscription. Please try again.

Unsubscribe at any time.
Archives Categories