If you’re just starting to develop mobile apps, it can be quite a painstaking process trying to figure out best practices and navigating through the sea of requirements, especially if you are focusing on developing for iOS. While Apple provides an enormous amount of information and guidelines in their developer forums and documentation library, there is still quite a bit of translating that information into real world case studies. In this article I’m going to talk about icons and start-up screens, these are two things that caused some confusion for me early on and that was before there was a Retina’fied version of all of Apple’s devices.
Because of the differences with resolutions from device to device you are going to need to provide a great deal of extra design assets to make sure that your app is looking good on all the different displays.
First let’s talk about start-up screens. Apple refers to these as Launch Screens in their documentation. There are 2 distinct iPads and 2 distinct iPhones (this includes iPod Touch) that you need to design these for, not to mention the iPad supports 2 different orientations. So if you are looking to create a universal app for both devices you are going to need to produce 6 different launch screens:
iPhone 3g/3gs - 320 pixels wide x 480 pixels high
iPhone 4/4s - 640 pixels wide x 960 pixels high
iPad 1&2 - 768 pixels wide x 1004 pixels high for Portrait orientation
iPad 1&2 - 1024 pixels wide x 748 pixels high for Landscape orientation
iPad 3 - 1536 pixels wide x 2008 pixels high for Portrait orientation
iPad 3 - 2048 pixels wide x 1496 pixels high for Landscape orientation
Keep in mind, this will more than likely change once the iPhone 5 is released if it does have a larger screen.
Don’t forget, the launch screens can also be utilized with web apps. They aren’t strictly for native or packaged apps. By adding the following meta tags to your website, you can create a launch screen for it, should someone choose to bookmark your home page.
First add the following tags, they tell Safari what to do with your website and will tell it to treat it as a web app.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
Launch Screen tags:
<link rel=”apple-touch-startup-image” href=”/images/startup/calzone-320×460.png” />
<link rel=”apple-touch-startup-image” sizes=”640×920″ href=”/images/startup/calzone-640×920.png” />
<link rel=”apple-touch-startup-image” sizes=”768×1004″ href=”/images/startup/calzone-768×1004.png” media=”screen and (min-device-width: 321px) and (max-device-width: 1024px) and (orientation:portrait)” />
<link rel=”apple-touch-startup-image” sizes=”1536×2008″ href=”/images/startup/calzone-1536×2008.png” media=”screen and (min-device-width: 321px) and (max-device-width: 2048px) and (orientation:portrait)” />
The third tag in this list has a media query inside it that will help the iPhone understand what is going on, it tells the iPhone not to use it. If the iPhone doesn’t get this message, it will get confused and instead of using one of the 2 images in the tags above, it will display just a plain white screen. If you are seeing this white screen and you have these tags, chances are that you need to tweak the media query.
You can also define the orientation of the launch screen in the third tag, but you need to make sure that if you set it to portrait you use the image that is configured for portrait. If not, you may get a launch screen that doesn’t quite fill up all the space correctly. The 4th tag is similar to the 3rd except that it’s for the Retina iPad.
Okay, if you thought the launch screen information was confusing, I think it’s a little easier to figure out what is going on with the icons. While there are a lot of icons that can come into play (24 altogether), I am only going to talk about the ones that are needed for the app or the web app relative to the device and app store. These are referred to in Apple’s documentation as App Icons. Here are the following formats you will need to use to create your icons:
iPhone 3g/3gs & iPod Touch - 57 pixels x 57 pixels
iPhone 4/4s - 114 pixels x 114 pixels
iPad 1 & 2 - 72 pixels x 72 pixels
iPad 3 with Retina Display - 144 pixels x 144 pixels
App Store Normal Res - 512 pixels x 512 pixels
App Store High Res - 1024 pixels x 1024 pixels
What about the rounded corners? Don’t worry! Apple automatically crops these to fit the rounded corner format and adds the necessary drop shadows. All you have to do is a create a square icon and Apple’s devices do the rest. The same goes for the shine on the icon, do not worry about how to add that glossy shine to it, there is a setting you can configure for this when you are building your app or adding the meta tag to your site if it’s a web app.
You can add the following meta tags to your website or web app and when a user saves the link to their home screen, the icons will then show up there:
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad3.png" />
Also If you don’t want Safari on iOS to add any effects to the icon, replace apple-touch-icon with apple-touch-icon-precomposed. This will keep the device from adding the shine to the icon. Per Apple’s documentation, you can also specify an icon by dropping it in a folder:
“To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png.“
So that’s it. If you download the fireworks Icon Guide file that is attached to this blog post, you will see that I have included layers for each of the icons and launch screens I have discussed here as well as some of the others mentioned in Apple’s documentation.