Email campaigns created with Sarbacane are designed for optimal display regardless of the email client used by your recipients. However, it is common for the rendering of emailings sent to Outlook not to match what appears in the Sarbacane editor. Although Sarbacane’s EmailBuilder has been developed to adapt as well as possible to the 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 emailing software is able to guarantee a good display of an identical email campaign on Outlook. What display issues might you encounter? How can they be resolved? These are the topics that will be addressed in this chapter.
Why do these display issues occur?
No professional router can guarantee a 100% identical display to your original design in Outlook. Indeed, the way an email is displayed depends on several factors:
The version of Outlook used
The Outlook format used (webmail, desktop, application)
The size of the screen used
The number of screens used: if you use a dual-screen setup, 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 may modify the initial HTML code and disrupt the display of the message
For all these reasons, it is essential to include a web copy link in your email campaigns. This link allows readers to view your email campaign in a web browser if it is displayed incorrectly in the inbox.
To verify that Outlook is indeed causing the display issues with your emailing, you can check whether the content and images are displayed correctly on other email clients (Gmail, Yahoo, Hotmail, etc.) and/or in a browser. If this is the case, it means that Outlook is indeed the cause of the problem.
What issues are encountered?
Since the 2007 version of Outlook, Microsoft no longer uses an HTML reader specific to Outlook. Instead, it applies Word’s HTML rendering engine for editing and reading emails. As a result, several issues may occur.
Here is an example of display issues that you may encounter:
Images are not displayed
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 be displayed in Outlook. However, each image embedded in the body of the email increases the size of your message and is therefore likely to impact your deliverability. The number of credits debited per send also depends on the size of your message. The heavier your message, the more email credits it will cost you. For these two reasons, we recommend embedding only your logo in the body of your campaign. This way you will be reliably identified by your recipients, even if the campaign images are not displayed by default.
Images are cropped
Outlook imposes a size limit on the height of images. If your image is cropped, resized, or not displayed, reduce the height of your image. If you cannot reduce the height of the image, we recommend splitting the image into several parts and inserting each part into a new image block.
Image sizes are incorrect
When you use the HTML properties of an image to resize it, it may still be displayed at its original size in Outlook. We recommend resizing your images with photo editing software before adding them to your campaign or using our built-in image editor.
The margins around images are not displayed
In Outlook, the margins around images may be displayed differently. In fact, the text may appear stuck to the image despite the margins configured in the properties. To compensate for this issue, you can use photo editing software to add a border around the visual, in the same color as the email background, and then insert it into your campaign.
Example of a margin issue around images:
GIFs do not animate in the campaign
Outlook is not compatible with GIF animations. Only the first frame of the GIF is displayed in Outlook. We therefore advise you to display the most important information of your animation on this first frame.
The background image does not display
This is a frequently encountered issue on Outlook and on several other email clients. The background image does not display and a background colour is substituted for the image. This CSS property is not natively supported in Outlook. There is currently no solution to remedy this issue without having development skills.
Text size and font are not displaying correctly
Depending on the fonts used, it may happen that the size and font differ from the initial configuration of the text in Sarbacane. System fonts have the advantage of displaying correctly on all operating systems, including Outlook. Conversely, Google Fonts produce 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, give preference to 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 the buttons replaces the rounded corners (because the CSS property border-radius is not natively supported). To display buttons with rounded corners on Outlook, they must therefore be inserted as an image. Be careful, however: as images are not displayed by default in Outlook, your buttons (including the text of your CTA) will not be visible in Outlook unless the images are downloaded.
Appearance of a white line between two images
This recurring issue on Outlook seems to be related to the fact that certain versions of the email client resize the email according to the size and resolution of the screen. If you encounter this type of display issue, the only thing to do is to run tests on several screen sizes, each time modifying one element of the structure of your email campaign (height, width, etc.).
Alignment issues appear
Several misalignments appear depending on the screen resolution from which Outlook is launched. In Outlook, alignment issues may particularly occur with the blocks of the email editors: 2 columns, 3 columns and 4 columns. To address this issue, when creating your email campaign in Sarbacane, you simply need to adjust the width of the desktop version. By default set to 650 px, the alignment issues are resolved at around 400 px in width.
Issues occur with dotted and dashed borders
In Outlook, dotted and dashed borders are automatically displayed on a white background, regardless of the background color configured for the relevant block. This is a behavior inherited from Word. Thus, if you use borders on a colored background, you may see white lines appear between the dots or dashes. To address this issue, we therefore recommend, as far as possible, using dotted or dashed borders on a white background. If you need to use a colored background, then prioritize solid borders.
What solutions are available to optimize display in Outlook?
In order to increase your chances of obtaining correct display in Outlook, here are some additional recommendations.
4 tips to optimize the display of your message
Choose images in JPEG or PNG format
Use standard system fonts: Arial, Helvetica…
Remember to optimize the mobile version of your marketing email
Reduce the number of columns to a minimum
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 in Sarbacane, or you can use the paste as plain text function offered via right-click in Google Chrome (keyboard shortcut ctrl shift v).
When you wish to create a campaign based on the structure of an existing campaign, rather than starting again from the message of a previous campaign, give preference instead to creating the message from a selection of templates.
This method will reduce the risk of overloading the HTML code generated when editing the message.
With the same objective, make use of the EmailBuilder’s block library, which allows you to save standard blocks that can be quickly reused.
Do not forward an email that you have received, as 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 of your recipients who use Outlook as their primary email client experience these display issues. Indeed, some Outlook users in your contact list have never received truncated emails in their inbox. Nevertheless, we recommend that you test your email campaigns on several email clients, such as Outlook, before sending them to your entire database.