The Art of Safe-Zoning

The Art of Safe-Zoning

Managing artwork for rich in-app messages can be a time-consuming business. Even in the iOS world, there are 3 different resolutions and aspect ratios to worry about between the iPad, iPhone 5 and iPhone 4. However, take this task to an app on an Android device and the problem is amplified many times over. In the top 95% of Android users, your app will be exposed to at least 30 different resolutions and 20 different aspect ratios!

So even thinking about running a rich in-app campaign can be daunting. You have an in-app message you want to display to a behavioral segment of users of your Android app. You want to use a rich branded image that is managed remotely yet appears native to the app when displayed. It should appear just like any other view in the app. So what’s the most efficient way of managing your messaging to ensure the message real estate is used most effectively and appears reliably on all devices?

Swrve makes it easy. We provide a template with a safe zone that will appear on all devices with aspect ratios in the range from 16:9 (e.g. Samsung Galaxy S5), through 8:5 (e.g. Nexus 7), to 4:3 (e.g. LG Optimus). We will then scale your uploaded image to match the resolution of many different devices, whether they be a high-resolution HTC One M8 (1080x1920) or a low-res model like the Samsung Galaxy Y. We only serve the best-fitting scaled image back to each device that matches the target audience of your in-app message. So whatever the device, your image will fill the screen as if native, with the safe zone visible.

Here’s how it works:

  • Let’s assume your Android app is in landscape mode (but the same applies to portrait mode)
  • Start with an image of resolution 2844x1920, like below. This is your template.
  • Within this resolution, there is a centered “safe zone”, of resolution 2,560x1,600 and aspect ratio 8:5, that will appear on all your devices. This safe zone should be used to maximise the screen area to convey your message, whether it be text, graphics or positioning of buttons for engagement.
  • Around this safe zone are borders that may selectively appear on narrower or broader devices, as appropriate. The background of your safe zone should blend in to these borders, using a similar pattern, motif etc. However, there shouldn’t be any text or button placement because these border zones are only “filler” to ensure the message appears native on all screens.

 

If you’d like to manage your iOS artwork in a similar manner, simply use a background image that is 2,424x1,536 in size, with a centered safe zone of 2,048x1,366. Here’s an example background image, with the white dashed line delineating the safe zone (this would be omitted in your final copy).