While MailChimp templates are designed to look great across all email clients, Outlook renders HTML uniquely from most other email clients. This can result in your email campaigns displaying differently in Outlook than what you designed and tested.
Outlook 2003 uses Internet Explorer to render HTML. Emails viewed on Outlook 2003 generally look like what you designed. On the other hand, Outlook 2007, 2010, and 2013 use Microsoft Word to render HTML. Because Word is primarily used to design pieces meant for printing, many unintended behaviors occur in these versions of Outlook due to the program attempting to display an HTML email as it would appear in print preview.
Because all versions of Outlook do not behave similarly, it’s a good idea to determine what version of Outlook most of your subscribers use so you can design and test for that version. While our Inbox Inspector tool can provide a good indication of how an email will appear in Outlook, we encourage viewing the test email directly in Outlook whenever possible.
Below, we focus on behavior seen in Outlook 2007, 2010, and 2013, which have the most common issues. It is important to note that email service providers, like MailChimp, cannot control the way that email clients choose to render HTML. However, we have noticed some common issues and found workarounds that encourage Outlook to play nice.
If you are custom-coding your HTML template from scratch, there are a few things to keep in mind to ensure that your email renders correctly in Outlook. Additionally, Campaign Monitor breaks down what CSS is supported by Outlook.
In this article:
- The padding around my images is being ignored
- My image is being clipped, rescaled, or is not loading
- My background image doesn’t show
- My animated GIF doesn’t work
- There is extra white space in my content
The padding around my images is being ignored
Outlook will ignore set padding and margins around images. As a result, your wrapped text will be pushed against the image. There are a couple ways around this.
- Use a photo-editing program to add a border around your image that is the same color as the background of your email campaign, then upload the image to your email campaign. Because the padding is part of the image, Outlook cannot ignore it.
- Access the source code from the < > button in the editor toolbar of the
Text block. In the tag for your image, add
hspace. For example:
You’ll also want to set margins for the image on the Edit Image pane, because some email clients do not recognize vspace and hspace.
My image is being clipped, rescaled, or is not loading
This occurs in Outlook when a very long image is inserted in a campaign. The limit for image length is approximately 1728px tall. Outlook will clip the excess off the top of images taller than 1728px.
If you cannot decrease the size of your image to under 1728px tall, the best alternative is to crop the image into separate images. If using a drag and drop template, you can then add multiple Image blocks to the campaign to upload each part of the image. To ensure the images appear as one fluid image, navigate to the Settings tab for each Image block and select the Edge To Edge check box under Margins.
My background image doesn’t show
This is an issue with Outlook as well as many other email clients. Without altering the template code, there isn’t a quick fix to force the background image in a custom-coded template to display.
My animated GIF doesn’t work
Outlook does not support animated GIFs. Instead, it will display the first frame of the GIF in your campaign, so make sure the most important information is on that frame.
There is extra white space in my content
Because Outlook renders HTML using Microsoft Word, white space is sometimes inserted above an image. This occurs because Outlook renders email on a computer screen similarly to how print preview shows how the email will look on a printed page. If the image falls between what Outlook sees as two separate pages for that particular section, extra space is inserted above the image to force the image down to the next page. While email is a single, continuously scrolling page, Outlook renders portions of the email as though they are meant to be printed onto separate sheets of paper.
Eliminating the extra white space requires reorganizing your content. Because reorganization can require extensive layout and content changes, we encourage first replicating your campaign in case you accidentally delete content in the campaign you are reorganizing.
When reorganizing your content, you ultimately want to determine where Outlook is marking the page break in your content. If there is an image below the white space, try to move the image to another area in your layout and send a test email to see if this fixed the issue. Continue reorganizing and testing your campaign until the white space is eliminated.
|Was this article helpful?||
|What can we do to improve your experience with articles like this?|
At this time, we are unable to reply to any responses, but we'll use this information to keep the site up-to-date.