Tips for Your Mobile App’s Splash Screen

As one of the many customizable features of your Android and iPhone apps, the splash screen serves a few purposes and should not be ignored when first preparing your app. We begin by addressing the truth – splash screens do not technically exist. The real purpose of the splash screen is to hide the fact that the app is not instantly ready. Existentialism aside, this loading page has a higher purpose for you and your fans. For the user, the splash screen acts as a welcome to your app, confirming any doubts about what they just downloaded, and reassuring them of their decision to download the app to their device. Your job is to provide an aesthetically pleasing experience while the user waits for his or her device to eventually load the app’s content.

When you’re preparing any of the elements of your app, remember that you’re customizing a user experience. Style is important to your audience, and therefore should be important to you. From the second a user touches the icon to the second they exit the app, they are judging your app’s content as well as its presentation. They base future decisions upon their interactions with your app, whether it’s easy ticket purchasing, or simply returning to the app to see what’s new. With that said, let’s treat the splash screen as a first impression. The entire app should be easy to read, easy to navigate, and stylistically appealing – or else you are simply not taking full advantage of having a mobile-friendly digital presence.

Tip #1 – Prepare and upload an image according to the specified dimensions.

UPDATE:  Since the release of iPad tablet computers with retina image display, we ask for an image with 1800px by 2800px resolution. If you upload an image that is not 1800 x 2800 it will be adjusted to fit that size. Please note that this image will be scaled down for smaller devices. The smallest size is 320 x 480 pixels. Your image should not contain text or small details that will not look good at this small size.

To accomodate devices with different aspect ratios we recommend including a "bleed" area of 225px on the top and bottom and 115px on the left and right. Anything outside this area may be cut off on certain devices.

If you upload an image with different dimensions, it will be adjusted to fit this size. Which means if you have a square or landscape image, we will scale the width and add in a background color behind it. The ideal image should be customized to the dimensions above.

Tip #2 – Anticipate how it will look on devices.

• It displays in portrait view on devices, so it should not be designed horizontally.

• Smartphone screen sizes vary from device to device. Depending on the size of the mobile device, the splash screen will take up more or less of the screen. After the image is scaled to the best of its ability, a black border fills in the rest of the space around it (See top image).

• The iPhone toolbar will overlap the top portion of the image you upload, so plan your text placement accordingly. Feel free to use this template when preparing your splash screen if you’re worried about spacing or overall dimensions.

Tip #3 – Kill two birds with one stone.

If you’re an artist or ensemble and you’re already taking advantage of our free website service, consider using your header image that you’ve already created.

Tip #4 – Know your editing options.

If you do not have Adobe Photoshop or any other expensive image editor on your computer, and your best friend who does have the Adobe Suite isn’t answering his or her phone, then there are a number of online image editors that have more than enough tools for you to customize a beautiful splash screen. Sumo Paint is one browser-based image editor that we recommend. It’s quick to upload a photo, add in text, and crop it to a specific size.

Tip #5 – Make it simple and catchy.

The loading screen can take anywhere from 1 second to 10 seconds depending on the speed of the user’s device and how much content is in your app. Since some devices are faster than others, you need an image that is easy to understand, easy to read, as well as tasteful. If you need ideas or inspiration, check out a sampling of great partner splash screens here.

Tip #6 – Think ahead.

• Once submitted, your splash screen cannot be altered or substituted without going through the submission process all over again. We generally only do this in outstanding cases, as each submission takes time, so spell check and make sure you’re happy with the result!

• Pretty soon we will be requesting higher resolution splash screens for those who want to take advantage of the newer devices’ display capabilities, such as Apple’s retina screen on the iPhone 4 series. One way to stay ahead of the game is to make sure you are using high quality images, and scalable vector graphics where appropriate. We will update you with specifications as we make the transition to accommodate these new displays.

How the user is greeted does make a difference. The splash screen should be thought of as just another part of the app experience, as well as a representation of your mobile identity. We look forward to seeing your designs!