Sarbacane Campaigns: Why isn’t my email campaign displaying correctly in Outlook?

Email campaigns created with Sarbacane are designed for optimal display regardless of the email client used by your recipients. However, it's common for the rendering of emails sent to Outlook not to match what appears in the Sarbacane editor. While the Sarbacane EmailBuilder has been developed to adapt as well as possible to various email services, Outlook's HTML rendering engine is based on Word's HTML rendering and is therefore not optimal for correctly displaying an email. No professional email software can guarantee a good display of an email campaign identical on Outlook. What display issues can you encounter? How can you remedy them? These are the topics we will cover in this chapter.

Why these display problems?

No professional router can guarantee a 100% identical display to your original creation on Outlook. Indeed, how an email displays depends on several factors:

• The Outlook version used
• The Outlook format used (webmail, desktop, application)
• The screen size used
• The number of screens used: if you are using a dual screen, the display may be broken on the secondary screen. It is therefore advisable to close Outlook and reopen it only on the main screen.
• The anti-spam filter used: the anti-spam filter can modify the initial HTML code and disrupt the message display

For all these reasons, it's essential to include a web copy link in your email campaigns. This link allows readers to view your email campaign in an internet browser if it displays poorly in the inbox.

To verify that Outlook is indeed causing problems with the display of your emailing, you can check if the content and images display correctly on other email clients (Gmail, Yahoo, Hotmail...) and/or in a browser. If so, this means that Outlook is indeed the cause of the problem.

What are the encountered problems?

Since the 2007 version of Outlook, Microsoft no longer uses an HTML reader specific to Outlook. Indeed, it applies Word's HTML rendering engine for editing and reading emails. As a result, several problems can arise.

Here is an example of display problems you might encounter:

Images do not display

By default, Outlook does not display images hosted on a server (except for the most recent versions). In Sarbacane, you have the option to embed an image in the body of the email. It will then display in Outlook. However, each image embedded in the email body increases the weight of your message and is therefore likely to impact your deliverability. The number of credits debited per send also depends on the weight of your message. The heavier your message, the more email credits it will cost you. For these two reasons, we advise you to only integrate your logo into the body of your campaign. This way, you will be identified for sure by your recipients, even if the images of the campaign do not display by default.

Images are truncated

Outlook imposes a size limit on the height of images. If your image is truncated, resized, or does not display, reduce the height of your image. If you cannot reduce the image's height, we advise you to cut the image into several parts and insert each part into a new image block.

The size of the images is not correct

When you use the HTML properties of an image to resize it, it may still display in its original size on Outlook. We advise you to resize your images with a photo editing software before integrating them into your campaign or use our integrated image editor.

Margins around images do not display

On Outlook, margins around images may display differently. Indeed, the text may be stuck to the image despite the margins set in the properties. To overcome this complication, you can use a photo editing software to add a border around the visual of the same color as the email's background, then integrate it into your campaign.

GIFs do not animate in the campaign

Outlook is not compatible with GIF animations. Only the first image of the GIF is displayed in Outlook. Therefore, we advise you to make the most important information of your animation appear on this first image.

The background image does not display

This is a frequently encountered problem on Outlook and several other email clients. The background image does not display, and a background color substitutes the image. This CSS property is not natively supported in Outlook. Currently, there is no solution to this problem without having development skills.

The size and font of the text do not display correctly

Depending on the text fonts used, the size and font of the text may differ from the initial text configuration in Sarbacane. Indeed, system fonts have the advantage of displaying correctly on all operating systems, including Outlook. In contrast, Google Fonts have a random rendering on almost all mailboxes except on mobile. The display of the font on Webmails depends on the operating system (PC/MAC) and the web browser used. Therefore, prefer standard system fonts for your email campaigns.

Rounded "call-to-action" buttons do not display correctly

Buttons with rounded corners display correctly on most mailboxes (Webmails, Mobile, Desktop). However, on Outlook, the rectangular shape of buttons replaces the rounded corners (because the CSS property "border radius" is not natively supported). To display buttons with rounded corners on Outlook, you must insert them as an image. However, since images do not display by default in Outlook, your buttons (including your CTA text) will not be visible in Outlook unless the images are downloaded.

Appearance of a white line between two images

This recurring problem on Outlook seems to be related to the fact that some versions of the messaging service resize the email depending on the size and resolution of the screen. If you encounter this type of display problem, the only thing to do is to perform tests on multiple screen sizes, changing an element of your email campaign structure (height, width, etc.) each time.

Alignment problems appear

Several shifts appear according to the screen resolution from which Outlook is started. On Outlook, alignment difficulties can occur with email editor blocks: 2 columns, 3 columns, and 4 columns. To address this problem, when creating your email campaign on Sarbacane, simply adjust the width of the PC version. Default set at 650 px, alignment problems are resolved around 400 px in width.

Problems with dotted and dashed borders appear

On Outlook, dotted and dashed borders automatically display on a white background regardless of the background color configured for the concerned block. This is a behavior inherited from Word. Thus, if you integrate borders on a colored background, you may see white lines appear between the dots or dashes. To address this problem, we advise you, where possible, to use dotted or dashed borders on a white background color. If you must use a colored background, then prefer solid borders.

What are the solutions to optimize the display on Outlook?

To increase your chances of getting a correct display on Outlook, here are some additional tips.

4 tips to optimize the display of your message

• Choose images in JPEG or PNG format
• Use standard system fonts: Arial, Helvetica...
• Consider optimizing the mobile version of your email marketing
• Minimize the number of columns

4 mistakes to avoid

• Avoid copying and pasting text directly from another software. However, you can copy the text from your software, paste it into a notepad, then paste it into your message on Sarbacane, or you can use the "paste as plain text" function offered by right-clicking under Google Chrome (keyboard shortcut ctrl shift v)

When you want to create a campaign starting from the structure of an existing campaign, rather than restarting from the message of a previous campaign, prefer creating the message from a selection of templates.

This method will limit the risks of overloading the HTML code generated during message editing.

For the same purpose, exploit the block library of the EmailBuilder, which allows saving typical blocks that are quickly reusable.

• Do not forward an email you have received because the HTML code is reinterpreted. It is no longer optimal and further degrades the rendering.
• Do not place important text on a background image

NB: Not all your recipients using Outlook as their primary messaging service encounter these display problems. Indeed, some Outlook users on your contact list have never received truncated emails in their inbox. Nonetheless, we advise you to test your email campaigns on multiple email services, like Outlook, before sending them to your entire database.