Email campaigns created with Brevo are designed for an optimal display in all email clients. However, some display issues can happen for emails sent on Outlook where the content doesn't correspond to what appears in the Drag & Drop editor.

In this article, we'll explain what are the most common display issues you may experience with Outlook and how to optimize your emails to avoid them.

Why does my email look different in Outlook?

You might have noticed that some of your emails look different in Outlook than when you initially designed them in the Drag & Drop editor. These display issues can happen, especially with the 2003, 2007, and 2010 versions of Outlook, because they use Microsoft Word to render emails which offer limited support for HTML and CSS. Other factors, such as the size of the screen or the spam filter used by the recipient, can also impact the display of an email.

To verify that Outlook is the reason why your email looks different, you can check if the content and images are displayed correctly on other email clients (e.g., on Gmail or Hotmail). If this is the case, it means that Outlook is the cause of the problem.

What are the common email display issues with Outlook?

Margins around images aren't displayed

All versions of Outlook (except for Outlook.com) ignore margins around images. There may be no space between your text and your image even if you added margins in the settings.

To solve this issue, you can use a photo editing software to add a border around your image in the same color as your email background before importing the image into your email campaign. As the margin is now part of the image, Outlook can't ignore it.

Images aren't displayed

By default, Outlook blocks images in emails. To view these images, recipients have two options:

• They can choose to keep the default behavior of Outlook and unblock images for a single message at once, or
• They can choose to change the default behavior of Outlook and unblock images for all messages.

As we can’t force images to automatically display, there is no easy fix for this issue. However, here are some recommendations to improve the display of your emails even if images are blocked:

• For images in the body of your email, we recommend you add ALT text so that your recipient will know what the images are about and maybe more prompt to unblock them.
• For the background image of your email, we recommend you provide a fallback color to replace the blocked background image.

It is also important to note that older versions of Outlook don't display images hosted on a server. In this case, we recommend that you import images directly into your email or use our free stock images.

Images are truncated or resized

Outlook enforces a size limit of 1728 pixels on the height of images. If an image is truncated or resized, we recommend you reduce the height of your image so that it doesn't exceed this limit.

If you resize an image using its HTML properties, Outlook will still display it in its original size. We recommend that you resize your images with a photo editing software before importing them into your campaign or use our integrated image editor.

If you can't reduce the size of your image to less than 1728px in height, it's best to cut it into two or three separate images. You can then add multiple image blocks to your email to upload each part of the image. To ensure that the images appear as one single image, make sure to remove any margin and padding from the image sections and blocks.

GIFs are not animated

Animated GIFs are only supported in the Outlook 365 desktop client, Outlook mobile apps, and Outlook.com. Outlook 2007, 2010, and 2013 will not show animations. Instead, they will show only the first frame of your GIFs.

If your GIF contains important information, such as an offer or a headline, make sure it's included in that first frame.

Buttons display broken text

Buttons with broken text or text that breaks into a second line are due to an Outlook rendering issue.

To avoid this issue, you can try increasing the padding for your button to be more than the font size. If the issue persists, we recommend creating an image of your button and importing it into your email. You can then add your link to it so that when contacts click on that image, they are redirected to the URL.

Buttons display incorrect font

Outlook may display the incorrect font type in your buttons. This is usually caused by a space being added at the beginning and/or at the end of the button text.

Removing that spacing should resolve this issue. If it doesn't work, you can create an image of your button and import it into your email. You can then add your link to it so that when contacts click on that image, they are redirected to the URL.

Round buttons are displayed as rectangles

Buttons with rounded corners are replaced by rectangles in Outlook. This issue happens because the css property "border-radius" is not natively supported. To display buttons with rounded corners on Outlook, you must create an image of your button and import it into your email. You can then add your link to it so that when contacts click on that image, they are redirected to the URL.

Text size and font are not displayed correctly

Depending on the text fonts used in your email, the size and the font of the text may differ from what you selected in the Drag & Drop editor. Indeed, system fonts, such as Arial or Calibri, are displayed correctly on all email clients, including Outlook. However, Google Fonts almost always have a random rendering. The display of the font on email clients depends on the operating system (PC/MAC) and the web browser used by the recipient. Therefore, we recommend you use standard system fonts in your email campaigns.

Line height is not supported

Outlook 2007, 2010, 2013, and Outlook 365 desktop client do not consistently support line height. Some versions of Outlook will support the percentage value of line-height (e.g., 120%) while others support a whole number (e.g. 2).

If you're using your own CSS to create your email, we recommend providing both values. If you’re using the Drag & Drop Editor, we automatically set it for you.

White space is added

Because Outlook displays HTML using Microsoft Word, white space is sometimes inserted in emails. This issue is due to the fact that some versions of Outlook resize the email according to the size and resolution of the recipient's screen (like with a print preview in Microsoft Word) and adds white space where a page break would be needed.

To remove this white space, you must reorganize the content of your email to determine where Outlook will mark the content page break. We recommend you duplicate your email before you start reorganizing it to prevent any content from being deleted.

Content looks wide

In Outlook, the content can appear wider than intended. This can occur when a URL is included as plain text within the campaign, causing Outlook to expand its canvas to accommodate the full length of the URL.

To resolve this issue, consider inserting the URL as a clickable link attached to specific text within the content. This adjustment should prevent Outlook from stretching the layout beyond its intended width.

How can I optimize email display in Outlook?

To optimize how your email will display in Outlook, we recommend you:

• Choose images in JPEG or PNG format.
• Use text for important information and images for additional information.
• Optimize the mobile version of your email campaign.
• Use our Preview feature and test your email campaign on several email clients before sending it.

🤔 Have a question?

If you have a question, feel free to contact our support team by creating a ticket from your account. If you don't have an account yet, you can contact us here.

If you’re looking for help with a project using Brevo, we can match you with the right certified Brevo expert partner.