I recently wrote a post about strategies for designing a good splash screen experience for the user when using PhoneGap Build. What I didn’t explicitly cover was how exactly to prepare all the different kinds of splash screens and icons you will need when you build your application. As well as the graphics you’ll need for building your application, you’ll also need to prepare additional screenshots and icons for the app store listing. Even when you know all the requirements this is still a pretty painful process so I want to make sure you don’t have to spend hours searching around for the correct dimensions of screens you need to cater for.
Preparing for the PhoneGap Build Process
PhoneGap Build automatically handles splash screens and icons for you, but of course you still need to actually provide and reference them. You will need to include something like the following in your config.xml file:
<!-- Default Icon and Splash -->
<icon src="icon.png" />
<gap:splash src="splash.png" />
<!-- Android Icons -->
<icon
src="resources/icon/android/icon-36-ldpi.png"
gap:platform="android"
gap:qualifier="ldpi"
/>
<icon
src="resources/icon/android/icon-48-mdpi.png"
gap:platform="android"
gap:qualifier="mdpi"
/>
<icon
src="resources/icon/android/icon-72-hdpi.png"
gap:platform="android"
gap:qualifier="hdpi"
/>
<icon
src="resources/icon/android/icon-96-xhdpi.png"
gap:platform="android"
gap:qualifier="xhdpi"
/>
<icon
src="resources/icon/android/icon-144-xxhdpi.png"
gap:platform="android"
gap:qualifier="xxhdpi"
/>
<!-- iOS Icons -->
<!-- 7.0+ -->
<icon
src="resources/icon/ios/icon-small.png"
gap:platform="ios"
width="29"
height="29"
/>
<icon
src="resources/icon/ios/icon-40.png"
gap:platform="ios"
width="40"
height="40"
/>
<icon
src="resources/icon/ios/icon-small@2x.png"
gap:platform="ios"
width="58"
height="58"
/>
<icon
src="resources/icon/ios/icon-60.png"
gap:platform="ios"
width="60"
height="60"
/>
<icon
src="resources/icon/ios/icon-76.png"
gap:platform="ios"
width="76"
height="76"
/>
<icon
src="resources/icon/ios/icon-40@2x.png"
gap:platform="ios"
width="80"
height="80"
/>
<icon
src="resources/icon/ios/icon-60@2x.png"
gap:platform="ios"
width="120"
height="120"
/>
<icon
src="resources/icon/ios/icon-76@2x.png"
gap:platform="ios"
width="152"
height="152"
/>
<!-- 6.1 -->
<icon
src="resources/icon/ios/icon-50.png"
gap:platform="ios"
width="50"
height="50"
/>
<icon
src="resources/icon/ios/icon-72.png"
gap:platform="ios"
width="72"
height="72"
/>
<icon
src="resources/icon/ios/icon-50@2x.png"
gap:platform="ios"
width="100"
height="100"
/>
<icon
src="resources/icon/ios/icon-57-2x.png"
gap:platform="ios"
width="114"
height="114"
/>
<icon
src="resources/icon/ios/icon-72-2x.png"
gap:platform="ios"
width="144"
height="144"
/>
<!-- Android Splash Screens -->
<!-- 200px x 320px -->
<gap:splash
src="splash/android/screen-ldpi.png"
gap:platform="android"
gap:qualifier="ldpi"
/>
<!-- 320px x 480px -->
<gap:splash
src="splash/android/screen-mdpi.png"
gap:platform="android"
gap:qualifier="mdpi"
/>
<!-- 480px x 800px -->
<gap:splash
src="splash/android/screen-hdpi.png"
gap:platform="android"
gap:qualifier="hdpi"
/>
<!-- 720px x 1280px -->
<gap:splash
src="splash/android/screen-xhdpi.png"
gap:platform="android"
gap:qualifier="xhdpi"
/>
<!-- 960px x 1440 -->
<gap:splash
src="splash/android/screen-xxhdpi.png"
gap:platform="android"
gap:qualifier="xxhdpi"
/>
<!-- iOS Splash Screens -->
<gap:splash
src="splash/ios/Default.png"
gap:platform="ios"
width="320"
height="480"
/>
<gap:splash
src="splash/ios/Default@2x.png"
gap:platform="ios"
width="640"
height="960"
/>
<gap:splash
src="splash/ios/Default-568h@2x.png"
gap:platform="ios"
width="640"
height="1136"
/>
<gap:splash
src="splash/ios/Default-Portrait.png"
gap:platform="ios"
width="768"
height="1024"
/>
<gap:splash
src="splash/ios/Default-Landscape.png"
gap:platform="ios"
width="1024"
height="768"
/>
<gap:splash
src="splash/ios/Default-Portrait@2x.png"
gap:platform="ios"
width="1536"
height="2048"
/>
<gap:splash
src="splash/ios/Default-Landscape@2x.png"
gap:platform="ios"
width="2048"
height="1536"
/>For each of the icons and splash screens you have added to your config.xml file, create the corresponding file in the referenced directory. You do not need to follow this exact format, just make sure that the src attribute links to wherever the file physically resides.
If you do not plan on making your application available for tablets it is not necessary to include the corresponding splash screens. You will also notice right at the beginning we declared a default icon and splash screen, this should reside in the root of your application folder (the same folder that your index.html would likely be in). You must not place the default files in a subdirectory along with the rest of your icons and splash screens.
Obviously we’re including a lot of graphic resources here which are of course going to increase the resulting file size. You can read the following post about [how to use PhoneGap Build’s .pgbomit feature][2] to decrease your applications file size by not redundantly including unnecessary splash screens and icons for other platforms.
Screenshots and Artwork for App Store Submission
When submitting to app stores you will find a somewhat lengthy form you need to fill out. This includes the description of your application, content rating etc. but also screenshots and artwork for your application to be displayed in the app store. Here’s what you can expect…
Apple
The Apple App store requires that you submit at least one screenshot, but you would be wise to include about 4-5. Screenshots are the most valuable thing you have to convince a potential user to download your app in the split second they take to decide when viewing your listing.
You will need to provide screenshots for both the 3.5 inch iPhones and the 4 inch iPhones. You should also include iPad screenshots if your application is intended for tablets. The dimensions required are as follows:
3.5 inch
- .jpg or .png format
- RBG color space
- 960×640, 960×600, 640×960 or 640×920 resolution
4.5 inch
- .jpg or .png format
- RBG color space
- 1136×640, 1136×600, 640×1136 or 640×1096 resolution
iPad
- .jpeg, .jpg, .tif, .tiff or .png format
- RGB color space
- 1024×768, 1024×748, 768×1024, 768×1004, 2048×1536, 2048×1496, 1536×2048 or 1536×2008 resolution
Obviously the easiest thing to do is to take out your iPhone 4 and iPhone 5 and take some screenshots of your application in use. The reality is though, it’s going to be extremely unlikely that you would have more than one iPhone. The next best option would be to borrow the appropriate iDevice’s from a friend or colleague but it’s a hassle to have to rely on people to do these things.
I still only have an iPhone 4 and typically I’ll do one of the following to gather the necessary screenshots:
- Take the iPhone 4 screenshots and add an overlay using an image editing program to account for the difference in resolution:
iPhone 5
- Take a screenshot of my application running through a browser and resize down to the appropriate resolution
As well as the screenshots, Apple also requires that you submit a 1024 x 1024 version of your applications icon. I find it’s best to design one version at 1024 x 1024 initially and then resize down to all the other sizes that are required.
Google Play
Google Play requires that you submit at least 2 screenshots overall, but again you should definitely include more than that. As is usually the case, Google Play doesn’t have as strict requirements for the screenshot as Apple does. The images uploaded must be .jpeg or .png and the minimum length for any side is 320px and the max length for any side is 3840px.
You will notice fields for uploading both 7-inch and 10-inch tablet screenshots – these must be included if you want your application to appear in Google Play’s ‘Designed for tablets’ section. As well as the screenshots, you will be asked to upload a Hi-res icon, Feature Graphic and Promo Graphic. The restrictions for these are as follows:
Hi-res icon
- .png file type
- 512×512 resolution
Feature Graphic
- .jpg or .png file type
- 1024×500 resolution
Promo Graphic
- .jpg or .png file type
- 180×120 resolution
Preparing all the necessary icons, splash screens and screenshots is a frustrating and time consuming process. It’s usually performed right at the end of the project when you’re excited to finally release your application as well. Don’t rush this process though. Well designed splash screens and screenshots can most definitely be the difference between your application looking slick and professional, or quick and sloppy.
[2]: http://www.joshmorony.com/using-phonegap-builds-pgbomit-to-drastically-reduce-file-size/ ‘Using PhoneGap Build’s .pgbomit to Drastically Reduce File Size’