Notification Content Guidelines

Teak provides a distinct editor for each platform, allowing you to adjust content based on platform-specific requirements. We’ll cover the different fields used by each platform, such as title, message, image, and action buttons, and explain how each is displayed in the notification.

On iOS, there are two views, default and expanded. All notifications are intially shown in the default size, and the Expanded view is only show if the user taps and holds on the notification to expand it.

On Android, Teak offers 2 different layouts: Default and 'iOS Style'. Each of these has a standard view and an expanded view as well.

Web browsers on mobile are an important platform to consider for Web Push. Here, we find even more combinations of platforms and browsers. For now, we will only cover the most common ones. Safari on iOS and Chrome on Android.

We’ll cover Chrome on both Mac and Windows in the desktop/web section later.

Different browsers can display notifications slightly different on desktops. But they are all limited by the notifications that the OS supports. For now, we’ll only look at Chrome for Mac and Windows. If you have players using other browsers, we recommend testing those as well.

Android device vendors customize hardware and software, resulting in variations in screen sizes, aspect ratios, and display features, which causes images to be cropped differently across devices.

To account for these differences, we refer to a 'safe area' within an image. This is the region where critical content, such as text, should be placed to ensure it is always visible. The area outside the safe area may be cropped on some devices but not others.

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