In App Message Creative Guidelines

(For an overview of the whole In App Messaging Campaign section go here)

We have provided templates for designing creative for portrait and landscape In-App messages.

On the creative screen of the in-app message wizard, you can add a background image and some optional buttons, which xtremepush resizes for all devices.

The images below give some guidelines for an optimal size for the messages, use them as base to create your (take a look at our tutorial)

xtremepush uses safe zones to enable you to optimize your image message content across the full spectrum of devices. Template images for portrait and landscape backgrounds are provided below. Click on the images to download them. The safe-zone for your content is blue. If the core content of your creative is inside the safe zone then it will work across all devices.

Anyway, you can always test that your content is visible in the preview area of the wizard.

Portrait template - content safe-zone in blue 

Landscape template - content safe-zone in blue

 

Buttons

Buttons need to be properly sized in order to stay in the safe area, they will be resized with the main image so once they work in your design, they will work in the final message.

It is always helpful to place in the main image a cross or other placeholder to easier place the buttons (see second half of the tutorial - campaign creation)

Here below a couple of example that you can use with our test images.

This example button fits the placeholder we put in the Portrait image

This example button fits the placeholder we put in the Landscape image

 

Why 3 bands but only 1 safe area?

Xtremepush will resize the main image keeping 100% of its longest side. Therefore the width will be cropped and the cropped portion will depend on the device aspect ratio not the resolution.

 

If you want to run a campaign across every device the blue area will guarantee that your content will be displayed. If you are interested in only certain devices, let's say only iPads, the safe area can be larger as all iPads have an aspect ratio of 4:3 and you can use the entire image as you want.

Mobile aspect ratios and safe areas

 

Tablet aspect ratios and safe areas

 

Banners

The safe areas are still valid but you need to specify for different width a different height to adapt the banner to every device.

For instance, if set as from image:

  • 50px while MIN WIDTH = 0
  • 100px while MIN WIDTH = 480
  • 60px while MIN WIDTH = 728

The result will be this:

Can be uploaded a different image, otherwise one image will be used for different screen sizes.

In this case will be kept the specified height and the image will:

  • have space on the side (if smaller than the screen side)
  • or be cropped as from safe areas specs (if bigger than the screen side).

A standard close button will be placed by xtremepush on the banner in an accessible position.

 

Video Tutorial

Take a look at how to create the perfect images for your In App messages and then how to upload them into your campaign!

Resources

All the assets are tested and can be downloaded and used as base for your creative. 

Have more questions? Submit a request

0 Comments

Article is closed for comments.