How to Approach the iPhone 5’s Larger Screen

With the announcement of the iPhone 5, developers and designers have been scrambling to get their apps ready and up and running in the latest and greatest device, a device that sold millions within the first couple of days; the iPhone 5. This article aims to highlight a possible approach that designers and developers can take in order to ensure their app looks great on the larger 5 inch display.

Designing Graphics

A lot of people appear to be under the illusion that they need to rename their graphics and image files in order for them to appear correctly on the 5 inch display. Incorrect. Designers need to remember that the new device still has a retina display and the purpose of the screen is to have the ability to display more content, more retina graphics. The purpose is not to change the current conventions and design practices. So, simply add @2x to the end of your graphic and it will display as it does on the iPhone 4S’s display.

With that said, there are instances when you need an image file specifically for the iPhone 5. One example of this is the launch image associated with your application. In order for the app to display correctly, you must have three different launch images:

  • A standard, non-retina version – Default.png at 320×480px
    iPhone, iPhone 3G and iPhone 3GS
  • A standard retina version – Default@2x.png at 640×960px
    iPhone 4 and iPhone 4S
  • A new, taller retina version – Default-568h@2x.png at 640×1136px
    iPhone 5

This is one of the few cases in which you need to include an image specifically for the iPhone 5, aside from this instance, you should be using standard retina graphics and images, just include more and make use of the screen. It’s completely fine to use some retina images on the iPhone 5 only and not any other devices.

When setting up a Photoshop document, this again requires little additional work, simply amend the canvas size in order to accommodate the new space. You should have use width: 640px height: 1136px and then you can generally keep the settings the same as wha you’d use to design for the shorter screens. To demonstrate this, we’ll create three different images and then apply them as launch screens in Xcode later.

Document Setup in Photoshop

1. Open up Photoshop (or any image editor) and create three documents, one for the standard resolution (320×480px), one for the iPhone 4 display (640×960px) and one for the iPhone 5 (640×1136px).

2. Now, simply apply a solid fill to each screen (make sure each screen has a different colour).

3. Save then as their relevant names (standard: Default.png, retina: Default@2x.png and 5: Default-568h@2x.png), we’ll add them to our Xcode project, to prove they work and that the names correctly match the image to the correct display, hence the reason why we applied three different colours.

Detecting the Larger Screen

There are various ways to approach a larger screen, the foundation of which is a simple if statement that detects whether the screen belongs to an iPhone 5, 4S or 3G. To demonstrate this, we’ll hop over to Xcode.

1. Create a single view project for iOS named ‘ScreenSizeDetector’ and save it somewhere convenient.

2. Go to File – New File… and add a View, call it View-5.xib and save it within your project. Open up the view and change its class by using the third tab on the left hand sidebar. Change the class to ‘ViewController’ and then open up the connections inspector (the last tab) and connect view to the View within the XIB.

3. Open up AppDelegate.m and remove the whole applicationDidFinishLaunching method and replace it with the following:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];
// Override point for customization after application launch.

if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone){
if ([[UIScreen mainScreen] respondsToSelector: @selector(scale)]) {
CGSize result = [[UIScreen mainScreen] bounds].size;
CGFloat scale = [UIScreen mainScreen].scale;
result = CGSizeMake(result.width * scale, result.height * scale);

if(result.height == 960) {
self.viewController = [[[ViewController alloc] initWithNibName:@"ViewController" bundle:nil] autorelease];
self.window.rootViewController = self.viewController;
[self.window makeKeyAndVisible];
if(result.height == 1136) {
self.viewController = [[[ViewController alloc] initWithNibName:@"View-5" bundle:nil] autorelease];
self.window.rootViewController = self.viewController;
[self.window makeKeyAndVisible];
else {
NSLog(@"Standard Resolution");

return YES;

What we’re doing here is using an if statement to determine whether or not the screen resolution is that of an iPhone 5 and then pushing a view and launching the app depending on what the statement returns. You can use this statement throughout any app to display iPhone 5-only features if the user is using that device. You can also add a label from the object library to ViewController.xib and View-5.xib to make sure you’re displaying the right one.

4. Now, we’ll add the graphics that we created earlier, go to File – Add Files… and navigate to the three PNG files and add them to our project (make sure you’ve checked the box asking whether or not Xcode should copy them).

Adding Files To Your Project

5. Now run the project in the iPhone simulator, you’ll find that each time you run the application on the different simulators (both retina and non-retina) the image that appears when first launched corresponds to what we specified and then the correct view is then loaded.

Screen Shot 2012-09-25 at 22.22.14

In Conclusion

Overall, accommodating the new screen isn’t too much work for the developer nor designer, this is mainly down to the fact people overlook the fact it’s essentially a taller retina display and in rare cases, it’s simple to create graphics that are for the iPhone 5, simply append ‘-568h@2x’ to the end of your image file and iOS will differentiate between them. What the goal of a designer should be is to effectively utilise the larger screen, make use of the extra pixels and give the user something to smile about.

Feel free to download the source files here…

Fuel Your Coding

Leave a Comment