Note: This blog has been updated as of 31 December 2020.
Browser updates affect your push notifications as well. One question that we frequently hear from merchants is “Why is my push notification title and (or) message not being displayed completely?” Read on to learn web push notification best practices and ensure your push notifications are of the optimal length to get your message across without being cut off.
A quick overview of the notification length across devices:
What is the best character length for web push notifications?
Since devices and browsers have different character length limitations, keep your web push notification length under 30 characters (for title and message each) so that your subscribers on different devices and browsers can view the content easily.
Let’s look at each platform and browser in a bit more detail.
Web Push Notifications for Windows 10
On Windows 10, the title supports a maximum of 63 characters before the text gets truncated. The message length stays the same, 128 characters, with or without a hero image.
The buttons show up to 21 characters after which the text is cut off.
On Windows 10, title shows ~49 characters without truncation, while the message can show ~200 characters.
Web Push Notifications for Windows 8
On Windows 8 (and older versions), the title supports a maximum of ~57 characters before the text gets truncated. The message length also stays the same— 126 characters— whether a hero image is added to the notification or not.
Important note: You would notice above that on Windows, there are two different kinds of notifications for different OS versions (Windows 8 and 10). The older version is a white design and the newer version has a black layout. So, the same notification is likely to look different on two Windows devices.
On Windows 8 (and older versions), title shows around 54 characters without truncation, while the message can show ~200 characters.
Note: Firefox does not support hero images.
The optimal title length for Android is around 47 characters. But the message length varies depending on whether the notification contains a hero image. Without a hero image, the Android web push notification has a message length of 441. With a hero image, the Android web push notification has a message length of 50 characters.
Note: Each button on the notifications shows 13 characters before it gets cut off. However, if you are only using one button, your text can be up to 20 characters.
Web push notifications for Mac
TL;DR: All browsers on Mac have different character limits for the title and message. It’s best if you keep your title around 40 characters and the body below 80 characters.
Until this recent update (as of December 2020), Mac notifications did not display an image. The Big Sur update now shows an image within the notification. Users are shown the notification without any images. When they hover over the notification, they see a down arrow within the notification. When clicked, the notification expands to show the hero image.
Here’s a breakdown of the character length for different devices and browsers, including the increased character length once the notification is expanded:
Safari has 49 characters for the title and 103 characters for the message. When expanded, the notification shows 48 characters for the title and 110 characters for the message.
Chrome has 43 characters for the title and 88 characters for the message. When expanded, the notification shows 48 characters for the title and 110 characters for the message.
Meanwhile, Firefox has 42 characters for the title and 90 characters for the message. When expanded, the notification shows 48 characters for the title and 100 characters for the message.
Here are all the changes to web push notifications after the Big Sur update:
- Longer character lengths (40 character length for the title and 80 character length for message)
- Add up to 4 visible buttons to the notification.
- Ability to add hero images to the notification. (Sizing: 340×256 pixels_
Important: The width of the individual characters will also affect how much of the notification is visible before it gets truncated.
Chrome offers the best experience for web push notifications, due to higher character limits and support for hero images. And more often than not, you will end up creating notifications that will look great on Chrome, but they won’t be as effective on other platforms/browsers.
So, ensure that you design your notifications keeping the restrictions of Mac and Firefox in mind. This will ensure that your message gets across in a clear manner without being cut off.
Don’t have a web push solution for your Shopify store? Install PushOwl now and start marketing to your store visitors directly.