How to Optimize Your Web Push Notifications for Different Browsers

Let’s face it, a big part of digital marketing is appearance. Not only do visual posts on social media earn more engagement, but the overall appearance of your social media channels, your website, and any other marketing material needs to visually look well put together, even if there isn’t a visual component, such as a photo or a video.

The same holds true for web push. Each subscriber should receive push notifications that are not only visually appealing, but also accurately portray your message. However, what’s tricky is that push notifications look slightly different across various browsers, device types, and operating systems. The good news is, once you understand the differences in how push notifications look and perform, you can easily create various segments according to these differences (you have the option to segment users according to their device type, browser type, and operating system). With this info, you will no longer have to worry if your subscribers will or won’t see your images, if your messages will get cut off, and more.

With that in mind, let’s discuss the major differences you need to keep in mind in order to best optimize your web push notifications.

Large Images

Large images are a great way to make an impact with your web push notifications, but you need to keep in mind these will only display for Google Chrome users on Windows desktop devices and Android mobile devices. Thankfully, because Chrome is such a popular browser, this still likely amounts to a large portion of your subscribers. Here’s what large images look like for both desktop and mobile notifications:

If you include large images for notifications that deliver to other browsers, the notification will still deliver. However, the large image will not display.

Body Text

The amount of text that will display as the body of your message will vary according to several factors. Overall, it is best to be as concise as possible when creating your copy. This is especially true for users who subscribe via Mac devices. Web push notifications sent to Mac users for Google Chrome, Safari, Firefox, and Opera have a limited amount of characters before the message gets cut off. Here’s how notifications display to Mac users across browser types:

As you can see, all browsers limit the number of characters before cutting off the body of the message, but there are subtle differences. For example, Firefox and Opera notifications display the same number of characters, Chrome displays slightly fewer characters, and Safari shows an extra line of characters. Remember that Chrome notifications will now also remain in a user’s notification center instead of disappearing. In terms of appearance, Safari does not show their browser icon, where as Chrome, Firefox, and Opera all do.

Also keep in mind that all browsers except for Safari support custom icons. Safari will always show your standard icon that you select when first getting started using web push.

Windows Devices

Web push notifications delivered to desktop devices for Windows users look and perform a bit differently. Here’s how these desktop notifications look:

Opera notifications display the same number of characters as the Mac notifications, where as both the Firefox and Google Chrome notifications give you many more characters in the body before cutting it off. You will also notice subtle differences in appearance, such as the Opera logo displaying for desktop notifications, the appearance of the title for Firefox notifications, and the website URL location. Google Chrome and Firefox notifications also display in the bottom right corner of the screen, where as Opera notifications deliver in the upper right corner.

Mobile Devices

 There are also differences to keep in mind when considering mobile devices. Web push notifications currently do not send to iOS devices (hopefully this capability is coming soon, however). Android devices do allow web push notifications. You will find this is a great way to target users on mobile without having to develop a mobile app. There are fewer differences between mobile notifications, however here is how notifications appear for all browsers on Android mobile devices:

As you can see, all of these notifications appear very similar. In fact, the first three are nearly identical in terms of appearance and the amount of characters that are shown. Firefox does not display the website URL, but that is the only main difference. Google Chrome notifications appear slightly different and allow for a few more characters. Also keep in mind you have the option to include larger images when sending to Google Chrome users on Android.

Even though mobile notifications largely look similar to each other, you may wish to create separate campaigns for mobile users vs. desktop users. This is easily achieved by creating a mobile segment and a desktop segment.

The Takeaway

There are differences you need to keep in mind when creating your web push campaigns. Being aware of these differences and updating your notifications accordingly will elevate your campaigns to a new level. There is no denying that it will take a bit more time and effort to optimize your notifications for all the varying devices and browsers. However, you will find this is worth your energy so as to provide the best possible experience for your users.

To start using Aimtell, click here.