My email looks different in Outlook

Mailchimp templates are designed to look great across all email clients. However, versions of Outlook from Outlook 2007 to present use Microsoft Word to render HTML email, which can cause problems with campaign display.

Microsoft Word is meant for print design and attempts to render HTML like it would look in print preview, causing the display to look different from what you may have designed and tested.

We recommend that you try to determine what version of Outlook most of your subscribers use and design and test for that version. Our Inbox Preview tool provides a good indication of how an email will appear in Outlook, but we strongly encourage you to send a test email and view your campaign directly in that version of Outlook, if possible.

In this article, you'll learn about problem behavior common in Outlook.

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 vspace and 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 and 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 you use 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 checkbox under Margins.

My image isn't the right size.

Outlook doesn't recognize the HTML that constrains images. This means that if you use HTML to resize an image uploaded to a campaign or template, it may display at the original size in Outlook. Be sure to resize your images before you upload them to Mailchimp, or use our built-in image editor.

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 beneath 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.

• 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 and some additional information on what CSS is supported by Outlook.
• Unfortunately, Mailchimp can't do anything about the way Outlook or other email clients display HTML email.