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 the blue area. If the core content of your creative is inside the safe zone then it will work on all devices. (see exception: iPhone X)

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

Suggested dimensions

1500x2000 px (portrait)

2000x1500 px (landscape)

Valid image formats PNG, JPG (JPEG), GIF (animated too)

Specs-InApp-portrait.png

Portrait template 

Specs-InApp-landscape.png

Landscape template

 

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 on 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 examples that you can use with our test images.

Portrait-button.png

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

Landscape-button.png

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

 

 

iPhone X

By default, this phone would constrain the web view used to display the message in a central 16:9 area.

It can anyway be forced to display the message using the full screen.

In this case, the message must be designed using a narrower safe area, avoiding also the top area because of the presence of notification bar and top notch.

(The message will be displayed in a 2:1 ratio screen)

Specs-InApp-iPhoneX.png

 

 

Banners

The safe areas are still valid but you need to specify for different width a different height to fit 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.