Email campaigns created with Mailify are designed to be optimally displayed regardless of the email client used by your recipients. However, it is common that the rendering of emails delivered through Outlook does not match the one displayed in the Mailify editor. Although Mailify'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 to display an email properly. No professional email marketing software can guarantee that an email campaign will look exactly the same in Outlook. What kind of display problems can you experience? How can you fix it? These are the topics we will cover in this section.
Why do these display problems occur?
No professional emailing service can guarantee that your original creation will be 100% identical in Outlook. Indeed, the way an email is displayed depends on several factors:
- The Outlook version used
- The Outlook format used (webmail, desktop, application)
- The size of the screen 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 open it again only on the main screen.
- The anti-spam filter used: the anti-spam filter can modify the initial HTML code and affect the display of the message.
This is why it is essential to include a web copy link in your email campaigns. This link allows readers to see your emailing campaign in a web browser if it doesn't display properly in the inbox.
To be sure that Outlook is the cause of your troubles with the display of your emailing, you can check if the content and images are properly displayed on other email clients (Gmail, Yahoo, Hotmail...) and/or in a web browser. If this is the case, it means that Outlook is indeed the cause of your problem.
What kind of problems could you experience?
Since Outlook 2007, Microsoft no longer uses an Outlook-specific HTML reader. Indeed, it uses Word's HTML rendering engine for editing and reading emails. As a result, several problems can occur.
Here is an example of display problems you may experience:
Images are not displayed
By default, Outlook does not display images hosted on a server (except for the most recent versions). With Mailify you have the possibility to integrate an image in the body of your mail. It will then be displayed in Outlook. However, each image embedded in the body of the e-mail increases the size of your message and could therefore impact your deliverability. The number of credits charged per sending also depends on the size of your message. The heavier your message is, the more email credits it will cost you. For these two reasons, we advise you to integrate only your logo in the body of your campaign. This way, you will be identified for sure by your recipients, even if the images of the campaign are not displayed by default.
Images are cut off
Outlook sets a size limit on the height of images. If your image is cut off, resized, or not displayed, reduce the height of your image. If you cannot reduce the height of the image, we recommend you to cut the image into several parts and insert each part into a new image block.
Image size is not correct
When you use the HTML properties of an image to resize it, it may still appear in its original size in Outlook. We recommend you to resize your images with a photo editing software before integrating them into your campaign or to use our integrated image editor.
Margins around images are not displayed
In Outlook, the margins around images may be displayed differently. Indeed, there may be no space between the text and the image despite the margins defined in the settings. To solve this issue, you can use a photo editing software to add a border around the visual in the same color as the email background and then integrate it into your campaign.
Example of a margin problem around the images:
Animated GIFs don't work in your campaign
Animated gifs are not supported in Outlook. Only the first frame of the GIF is displayed in Outlook. That is why we advise you to display the most important information of your animation on this first frame.
The background image is not displayed
This is a common problem in Outlook and many other email clients. The background image does not appear and a background color is used instead of the image. This css property is not supported natively in Outlook. There is currently no solution to this issue unless you have the required development skills.
Text size and font do not display correctly
Depending on the text fonts you use, the text size and font may be slightly different compared to the initial text setting in Mailify. This is because system fonts have the advantage of displaying correctly on all operating systems, including Outlook. On the other hand, Google Fonts have a random rendering on almost all mailboxes except on cell phones. The display of the font on Webmails depends on the operating system (PC/MAC) and the web browser used. Therefore, you should use standard system fonts for your email campaigns.
Call-to-action" buttons with rounded corners are not displayed correctly
Buttons with rounded corners are displayed correctly on most mailboxes (Webmails, Mobile, Desktop). However, on Outlook, the rectangular shape of the buttons replaces the rounded corners (because the css ratio "border radius" is not supported natively). To display buttons with rounded corners on Outlook, you must therefore insert them as an image. Please note that images are not displayed by default in Outlook, so your buttons (including your CTA text) will not be displayed in Outlook unless your contacts download the images.
A white line appears between two images
This recurrent issue in Outlook seems to be related to the fact that some versions of the email system resize the email according to the size and resolution of the screen. If you experience this type of display problem, the only thing to do is to perform tests on several screen sizes by changing each time an element of the structure of your email campaign (height, width, etc).
Alignment problems occur
The alignment of your email items may be different depending on the resolution of the screen from which Outlook is started. On Outlook, alignment issues may occur with the blocks from the email editors: 2 columns, 3 columns and 4 columns. To avoid this problem, when creating your email campaign on Mailify, you just have to adjust the width of the PC version. By default it is set to 650 px, alignment issues are solved around 400 px width.
Problems with dotted and dashed borders occur
In Outlook, dotted and dashed borders are automatically displayed on a white background regardless of the background color set for the block. For example, if you include borders on a colored background, white lines will appear between the dots or dashes. To avoid this problem, we recommend that you use dotted or dashed borders on a white background whenever possible. If you must use a colored background, then use solid borders.
What are the solutions to optimize the rendering of emails in Outlook?
In order to improve the rendering of your email campaigns in Outlook, here are some additional tips.
4 tips to optimize the display of your message
- Choose images in JPEG or PNG format
- Use common system fonts: Arial, Helvetica...
- Think about optimizing the mobile version of your email campaign
- Reduce the number of columns as much as possible
4 mistakes to avoid
- Avoid copying and pasting text directly from another software. However, you can copy the text from your software, and paste it on a notepad, then paste it in your message on Mailify or you can use the "paste as plain text" option available in Google Chrome with the right click (keyboard shortcut ctrl shift v).
- When you want to create a campaign from the structure of an existing campaign, rather than starting from the message of a previous campaign, it is better to create the message from a selection of templates. This method will limit the risks of overloading the HTML code generated when editing the message.
You can also use the block library of the EmailBuilder to save reusable blocks quickly. - Do not forward an email you have received because the HTML code is reinterpreted. It is no longer optimal and degrades the rendering even more.
- Do not include important text on a background image without first checking its readability on the background color that replaces the image when the image is not loaded.
NB: All your recipients using Outlook as their main email application do not experience these display problems. Indeed, some Outlook users in your contact list have never received any truncated emails in their inbox. Nevertheless, we advise you to test your emailing campaigns on several messaging systems, such as Outlook, before sending them to your entire database.