This post first appeared on www.vickiwenderlich.com
The iPhone 5 introduced a longer screen: the same width, but with an extra 176 pixels in height.
Most users seem to appreciate the extra space, but it poses a design challenge for app makers: how do you create a background for the different iPhones?
Note that we are talking about the iPhone retina and the iPhone 5 – the older unretina phones have screen sizes that are simply half that of the iPhone retina.
Here are four ways you can design for the longer iPhone 5 screen:
1. Different Art Entirely
The obvious first option: use different pieces of art!
If your background is heavily illustrated or needs to be the exact size of the screen (for example, if you have borders or a scene, like in a game), you will need to make two different backgrounds sized for the two different screens.
- best customization
- can create an illustrated scene or richly textured components
- uses up the most memory
- have to create more art (which equates to a higher cost for the designer)
2. A single long background
Many app developers are using a single background that is sized for the iPhone 5, with the intention that it hangs off the top and bottom of the iPhone retina screens.
- you can customize your background more than with the following options
- uses less memory than having two separate images
- part of the image won’t be seen on iPhone retina screens (which may or may not be an issue with your app), or you might be wasting that extra space on the iPhone 5.
3. A repeating background
This is the second most versatile background, if it works for your app. Create a repeatable texture that will fill whatever size screen is used. This way it doesn’t matter whether the app is in portrait or landscape mode, or if it’s an iPhone retina or an iPhone 5 (or even an iPad, if it can repeat horizontally).
- simple to create (or find for free, just search “free repeatable backgrounds”)
- uses small amount of memory
- can expand to any screen size
- none – if this type of background suits your app, you are in luck!
4. A repeating background with end caps
This is the most versatile background, but a little tricky to create. It is basically a repeatable texture in the center, with specified pixels on the sides and corners that do not repeat.
- can adapt to any screen size
- looks better than a plain repeatable image since the edges can be different.
- harder to create
- textures can sometimes look funny where they meet; works best with simple textures like noise or “paper” rather than complicated textures like wood grain
5. A Safe Zone
Make a large background that looks fine on all devices when centered. Then define a “safe zone” that is available on all devices you are developing for. It’s generally good to use an aspect ratio of 4:3. Design your game so that all the important stuff is within that safe zone (or design the game so that users with larger screens do not have an advantage).
- One image to rule them all! You don’t have to create individual images for every single device.
- Must design important features to be within safe zone – this means you aren’t using the whole screen of most devices.
Which To Choose?
The type of background you choose will depend on the type of app you are creating.
If you are creating a game, you will probably go with either option 1, 2, or 5.
If you are creating a utility app with a clean or quiet design, you will go with option 3 or 4.
If you are creating an app with rich textures or important visual aspects (like if you are making your app look like an old-school radio, or a notebook), you will probably go with option 1 or 2.
Developers: if you have another way of dealing with the two different screen lengths, let us know in the comments!