Web Push Notification Best Practices - The Ideal Character Length (2022)

Since browsers control the notifications, how they appear and the length of the message shown within the notification is dependent on the browser. Our team regularly tests how notifications appear on different browsers and devices to help you craft web push notifications that are optimized in character length. This way, you can create notifications using best practices and ensure your message doesn't get cut off.

Note: This blog has been updated as of 9 March 2022.

Here's 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 40 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 11

Chrome:

On Windows 11, the title supports a maximum of 70 characters before the text gets truncated. The message length can be as long as 141 characters.

The buttons show up to 19 characters after which the text is cut off.

Firefox:

On Windows 11, title shows ~54 characters without truncation, while the message can show ~200 characters.

Web Push Notifications for Windows 10

Chrome:

On Windows 10 (and older versions), the title supports a maximum of ~64 characters before the text gets truncated. The message length also stays the same— 121 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.

Firefox:

On Windows 10 (and older versions), title shows around 54 characters without truncation, while the message can show ~200 characters.

Note: Firefox does not support hero images.

Android

The optimal title length for Android is around 47 characters and the message can hold 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 34 characters and the body below 86 characters.

Until the update in December 2020, Mac notifications did not display an image. The Big Sur update 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 browsers on Mac, including the increased character length once the notification is expanded:

Safari has 34 characters for the title and 121 characters for the message.

Chrome has 43 characters for the title and 86 characters for the message.

Meanwhile, Firefox has 38 characters for the title and 121 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 the message)
• Add up to 4 visible buttons to the notification.
• Ability to add hero images to the notification. (Sizing: 340x256 pixels)

Important: The width of the individual characters will also affect how much of the notification is visible before it gets truncated.

Summary:

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.

‍