While our templates are designed to render correctly in all email clients, some common campaign display issues can crop up when a subscriber views an HTML email in Outlook, especially in the 2007, 2010, or 2013 versions. This is because those three versions of Outlook use Microsoft Word to render emails that offer limited HTML and CSS support.
This article will discuss common display issues that users have experienced with Outlook and our recommendations for troubleshooting these issues.
Margins do not display
All versions of Outlook (except for Outlook.com) and Gmail do not support margins. Instead, we recommend using the spacer content block:
You can also try padding to create space around your content blocks.
Padding is supported in every version of Outlook and other popular email service providers. You can add padding to a content block by selecting the container or structure in the email designer and adjusting the padding on the menu on the right. However, padding may make your content appear narrow when viewed on a mobile device.
Line height is not consistently supported
Outlook 2007, 2010, 2013, and Office 365 do not consistently support line height. Some versions of Outlook will support the percentage value of line height (e.g., 140%), while others support a whole number (e.g., 4). We recommend providing both values if you're creating an email from scratch and writing your own CSS. If you're using the drag-and-drop email designer, this is automatically set for you.
Images appear distorted
Outlook will not scale down images that are 1000 or more pixels wide. Instead, the image will be displayed at its actual size, causing the width of your template to expand and become distorted. We recommend using images that are between 400 and 650 pixels wide.
Note that in the designer, the images are automatically scaled down to 1300 pixels wide. This is max double the width of the email which is 650 pixels wide.
Learn more about adding images to your campaigns.
GIFs appear as flat images
Animated GIFs are 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. If your GIF has an offer, headline, or call-to-action, ensure it's included in that frame. For instructions on adding a GIF to your email, click here.
Duplicated buttons
Email services like Gmail, Apple Mail, and Yahoo render button styling using standard CSS and HTML. Since Outlook does not, we provided a fix so that Outlook will render the border radius, padding, and borders around the button correctly.
However, once an email is forwarded by a subscriber clicking the forward button in their email service provider, or if the email is rerouted through a Windows or exchange server, this fix will be read as a valid HTML element, resulting in a duplicate button.
Unfortunately, there isn't a fix to prevent this from happening. To get around this, you can create an image of a button and upload it to your email like any other image. Then you can add your link so that when contacts click on that image, they are redirected to your preferred URL.
Email Designer: Buttons in Outlook
In the Email Designer (launched 2022), the "Support of Outlook" button, allows you to improve buttons displayed in Outlook, by inserting a special VML-code element. The "Support of Outlook" button will be toggled "On" by default.
Email Designer and HTML: Background image does not display
Background images not displaying are a common issue with many different email providers. We recommend that you provide a fallback color in case your email is viewed on a version of Outlook that does not support background images.
This applies if you create an email with your HTML and the Email Designer (launched 2022). Note that when using the Email Designer (launched 2022), you can add a background image in the "Global Settings" tab > "General Settings" in addition to a fallback background color:
The Classic Designer does not support background images.
Classic Designer: Text alignment
Outlook does not support "Justify" text alignment.
Unfortunately, there isn't a fix to force Outlook to support justified text alignment.
Note that the Email Designer (launched 2022) does not have the option to justify and therefore is not an issue when sent to Outlook
Classic Designer: Broken text in buttons
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 increase 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 using that instead (see "Duplicated buttons" above).
Classic Designer: Buttons display incorrect font
Outlook may render the incorrect font type and fall back to Times New Roman. This is caused by a space added at the beginning and/or at the end of the button text. To avoid this issue, we recommend removing that spacing. If that does not work, you can create a new button or create an image of a button to use in your campaign instead.
Classic Designer: Links are not clickable
Regarding image alignment, only some versions of Outlook will render images the same way. If you have an image within a text block with links in the same line as your image, those links will not be clickable in Outlook 2007 and 2013.
Note that you cannot add images to text boxes in the Email Designer (launched 2022) and therefore note an issue when sent to Outlook.
For example, the hyperlinked text below will not be clickable for subscribers that use either version of Outlook:
To avoid this, with the Classic Designer, we recommend removing the image from your text block and using an image block instead to avoid this.