Safari Developer Library

Developer

iOS 7 Design Resources iOS Human Interface Guidelines

Download PDF

Running on iPhone 5

You don’t have to redesign your app for it to look good on iPhone 5. Many apps look good simply by displaying more of their existing UI; others might need to stretch content or background regions. Only some apps—such as games or apps that display lots of custom artwork—are likely to need some additional work to look their best.

The iPhone 5 display is 176 pixels taller than the display of other iPhone and iPod touch devices. In portrait orientation, the extra height is about the same as the height of two additional rows in a standard table view. For example, Messages running on iPhone 5 displays a taller conversation area than does Messages running on iPhone 4S.

Messages on iPhone 5

image: ../Art/messages_portrait_5_2x.png

Messages on iPhone 4S

image: ../Art/messages_portrait_4_2x.png

Of course, the additional 176 pixels in height translates into additional lateral space when the device is in landscape orientation. For example, in Messages on iPhone 5 (shown here below Messages on iPhone 4S), the UI stretches to fill the additional width.

image: ../Art/messages_landscape_4_2x.png
image: ../Art/messages_landscape_5_2x.png

The Messages screens shown above illustrate a crucial point: The minor UI adjustments that were made to accommodate the iPhone 5 display do not change the app’s functionality in any way. The consistency of the user experience—which is evident in all of the apps described in this section—follows a key design principle of iPhone 5: The larger device display enables users to see more of the content they care about; it does not provide an opportunity to squeeze in more app functionality.

Because you won’t be changing the functionality of your app, there’s typically very little you have to do to make your app look great on iPhone 5. If you use Auto Layout to design your app’s UI, you might have even less work to do. The following guidelines can help you decide which UI changes are best suited to your app.

Allow more content to be revealed automatically. If some of your UI is currently hidden below the bottom edge of the screen—requiring users to scroll—you don’t have to make any changes to allow the increased display height of iPhone 5 to reveal more of your UI. In Settings, for example, users can see additional table rows on iPhone 5 than they do on iPhone 4S.

Settings on iPhone 5

image: ../Art/reveal_more_without_scrolling_5_2x.png

Settings on iPhone 4S

image: ../Art/reveal_more_without_scrolling_4_2x.png

Stretch content regions. If you display content in a view, consider vertically expanding the view to show some additional content or to insert more space within the view. For example, users have a larger message body region in Mail on iPhone 5 than they do in Mail on iPhone 4S.

Mail on iPhone 5

image: ../Art/stretch_content_5_2x.png

Mail on iPhone 4S

image: ../Art/stretch_content_4_2x.png

Stretch background areas between content regions. You can make your layout look a bit more relaxed by expanding the vertical space between content views. For example, Weather on iPhone 5 shows more of the background in the upper part of the screen than does Weather on iPhone 4S.

Weather on iPhone 5

image: ../Art/expand_background_5_2x.png

Weather on iPhone 4S

image: ../Art/expand_background_4_2x.png

If necessary, recenter dominant visual elements. After adjusting backgrounds or views to accommodate the additional space, you might want to make sure that principal elements of your UI are still centered appropriately. One way to do this is to first stretch a region near the top of the screen and then adjust the centering of the elements. For example, Compass on iPhone 5 maintains the user’s focus on the compass and heading by keeping these elements centered on the extended background.

Compass on iPhone 5

image: ../Art/recenter_element_5_2x.png

Compass on iPhone 4S

image: ../Art/recenter_element_4_2x.png

In general, avoid increasing control sizes. If you use the minimum tappable size for controls in your app—that is, no smaller than 44 x 44 points—you should not need to adjust them for iPhone 5. However, you might choose to add a little more space between existing controls.

Don’t use the extra space to display an additional bar or banner. People expect to see more content on iPhone 5. To avoid disappointing your users, resist the temptation to use the extra vertical space for a custom button bar or banner.