Notification Content Guidelines

These are the notification content guidelines that we have established by using test pattern images and pixel grids on numerous different Android devices to establish image sizes that will maintain aspect ratio, and "safe areas" inside those sizes in which the content will always be displayed.

Safe Areas

When we refer to a 'safe area' in an image, what that means is that you should only place critical content (especially text) inside that area. The area outside the 'safe area' will be displayed on some devices, but not on others.

At this time, all colors are assumed to be safe, and there is no need for a 'safe range' of color values.

Inline Content Guidelines

The content guidelines are also displayed anywhere in the Teak dashboard which allows you to upload content.

If those guidelines are different from the guidelines in this document, follow the guidelines on the dashboard, and please let us know about the discrepancy.

Android

Banner View

The banner view of an Android Notification is used in both the toast view, and the notification center.

android banner sm g920t
Figure 1. Android Banner View on Lock Screen
android banner notification center sm g920t
Figure 2. Android Banner View in Notification Tray

Content

1700x300 png or jpg. Only a centered 1100x300 is 'safe' for content.

The recommended size guarantees native resolution display on xxxhdpi screens, if the content is too large it can be cut in half to 850x150.

Expanded View

The expanded view of an Android notification is used in the notification center.

android expanded sm g920t
Figure 3. Android Expanded View

Content

1700x850 png or jpg. The entire area is 'safe' for content.

The recommended size guarantees native resolution display on xxxhdpi screens, if the content is too large it can be cut in half to 850x425.

iOS

Expanded View

The expanded view of an iOS notification is used when the user force-touches on a notification.

ios expanded iphone 6s
Figure 4. iOS Expanded View

Content

1100x620 png, jpg, gif, or mp4. The entire area is 'safe' for content.

In general iOS will be fine with any size you give it. The recommend size guarantees native resolution display on the X series, but you can give it larger content or reuse your Android expanded view.