While our templates are designed to look good in all email clients, there are some common campaign display issues that 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 which offers limited support for HTML and CSS.
In this document, you’ll learn about some common display issues that users have experienced with Outlook and our recommendations to troubleshoot 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 widget:
You can also try padding in order 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 that content clock in the email designer and clicking the Options tab located on the right hand side of the screen. However, it's important to note that 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 (eg, 140%) while others support a whole number (eg, 4). If you’re creating an email from scratch and writing your own CSS, we recommend providing both values. If you’re using the drag-and-drop email designer, this is automatically set for you.
In addition, Outlook does not support “Justify” text alignment:
Unfortunately, there isn’t a fix to force Outlook to support justified text alignment.
Images appear distorted
Outlook will not scale down images that are 1000 or more pixel 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 pixel wide. For more tips on adding images to your campaign, see this help document.
GIFs appear as flat images
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, make sure it's included in that frame. For instructions on adding a GIF to your email, click here.
Duplicated buttons
Email services such as Gmail, Apple mail, and Yahoo renders the styling for buttons using normal 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 at this time to prevent this from happening. To get around this, you can create can image of a button using a service such as Da Button Factory and uploading that to your email, like any other image. Then you can add your link to it so that when contacts click on that image, they are redirected to your preferred URL.
Broken text in buttons
Buttons with broken text or text that breaks into a second line is 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).
Buttons display incorrect font
Outlook may render the incorrect font type and fall back to Times New Roman. This is caused by a space being 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.
Links are not clickable
When it comes to image alignment, not every version of Outlook will render those 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.
For example, the hyperlinked text below will not be clickable for subscribers that use either version of Outlook:
To avoid this, we recommend removing the image from your text block and use an image block instead.
Background image does not display
Note: This only applies if you are creating an email with your own HTML, the drag-and-drop email designer does not support background images.
Background images not displaying is a common issue with many different email providers. We recommend providing a fallback color in case your email is viewed on a version of Outlook that does not support background images.
Common email display issues with Outlook
