Because web push technology is largely controlled by individual browsers, it can be difficult to predict what the appearance of an individual notification will be across platforms. This article will guide you on how to design your web push campaigns easily so that the notifications that your users receive look similar regardless of the browser they are using.
Text Specifications:
The number of characters that are shown in the notification depends largely on 3 factors:
- The browser and OS combination through which a user has subscribed and receives subsequent notifications.
- The screen size of the device being used.
- The language used in the message.
Since it is not possible to create separate campaigns for each browser and OS combination, we recommend the following guidelines to ensure that the message is visible across most combinations:
| Element Field | Recommended maximum length |
| Title | 32 characters |
| Message | 42 characters |
| Button Label (CTA text) | 22 characters |
Image Specifications:
Because there are no official size guidelines from the supporting OS and browser it can be difficult to predict exactly how your image will display. The below recommendations are based on data and independent testing that we have done to try and determine what seems to work best across all platforms.
| Element Field | Size Aspect Ratio (l:w) |
| Icon | 192px by 192px (1:1) |
| Large Image (only supported on Chrome on android and windows) | Recommended size: 720px by 360px (2:1) Minimum size: 360px by 240px (3:2) |
Special Tips For Large Images:
When larger images are used the image will be cropped differently depending on the combination of browser and OS. This can be problematic when selecting an image and formatting your notification as there is no exact size that will fit them all. However, if you follow these tips, your users should always see the relevant content.
- Do not use a portrait orientated image.
- Keep the important text or information in the image at the center i.e. in the content area in the image below.
Keep in mind that the background section of the above image will be visible on some platforms including Linux, ChromeOS, Windows 7, Windows 8 while Android and Windows 10 will show only the content portion (light pink colored area).
Following the above recommendations will result in better-looking notifications, helping your overall CTR. If you still have any questions or need any help, please feel free to reach out to us at [email protected] and we would be happy to help you.