Although our templates are designed to look good across all email providers, there are some display issues that may arise when a contact views an HTML email in Outlook. This is especially common with the 2007, 2010, and 2013 versions. This is because these 3 versions of Outlook use Microsoft Word to display emails, which has limited support for HTML and CSS.
In this article, we will discuss the common display issues that our users sometimes encounter when their emails are opened in Outlook and provide some tips to resolve them.
Margins are not displayed correctly
All versions of Outlook (except Outlook.com) and Gmail do not support margins. Instead, we recommend using the 'Spacer' widget:
You can also use 'padding' to create space around your content blocks. 'Padding' is supported in every Outlook and other popular email providers. You can add 'padding' to a content block by clicking on the block and then scrolling to 'padding' in the menu. When setting the 'padding', it is important to consider mobile views as well.
Line height is not consistently supported
Outlook 2007, 2010, and 2013, and Office 365 do not consistently support line height. Some versions of Outlook support the percentage value of line height (e.g. 140%), while others support a 'whole' number (e.g. 4). If you are creating a completely new campaign and writing your own CSS, we recommend specifying both values. If you are using the drag-and-drop system, this will be set automatically for you.
Text alignment
Outlook does not support the 'Justify' text alignment. Unfortunately, there is no solution to make Outlook support this alignment.
Images appear distorted
Outlook does not resize images that are 1,000 pixels or wider. Instead, the images are displayed at full size, causing the width of your template to increase and become distorted. We recommend using images that are between 400 and 650 pixels wide.
GIFs are displayed as images
In Outlook 2007, 2010, and 2013, animations are not displayed. Instead, they only show the first frame. If your GIF contains an offer, headline, or call to action, make sure it is included in the first frame. If you want to know how to add a GIF to your email, click here.
Duplicate buttons
Email providers like Gmail, Apple Mail, and Yahoo display button styles using normal CSS and HTML. Since Outlook does not do this, ActiveCampaign has come up with a solution. By using the 'Border', 'Border radius', and 'Custom width' of the button, you can ensure that it is displayed correctly.
When an email is forwarded using the 'forward' button or redirected by a Windows or Exchange server, this correction is read as a valid HTML element, resulting in a duplicate button.
Unfortunately, there is currently no solution to prevent this. To work around this, you could create an image of a button using a tool (such as Da Button Factory) and upload it in the campaign, similar to a normal image. Then, you can add a link to the image so that clicking on it redirects you to the desired URL.
Broken text in buttons
Buttons with broken text or text split into a second line are due to an issue with Outlook rendering. To prevent this problem, it's best to increase the padding for your button to more than the font size. If the issue persists, we recommend creating an image of your button and using that instead (see explanation under 'Duplicate buttons').
Buttons displaying the wrong font
Outlook may display a different font (Times New Roman) than the one you have chosen. This is caused by adding a space at the beginning and/or end of the button text. To prevent this, we recommend removing the space. If that doesn't work, you can create a new button or make an image of a button and place it in your campaign (see explanation under 'Duplicate buttons').
Background image not displayed
Background images not displaying is a common issue with many email providers. We recommend specifying a fallback colour in case your email is viewed in a version of Outlook that does not support background images.
This only applies if you are formatting an email in HTML; the drag-and-drop system does not support background images.