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 email 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 it 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, then upload the image to your email. 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 an email. 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 email 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 an email, 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 image doesn’t have rounded corners

Outlook has limited support for CSS, such as rounded corners on images. As a result, images with rounded corners may display with sharp edges in Outlook. To work around this issue, you can edit rounded corners onto the image with an image editor. Set the "removed" corners of the image to match the background of the email.

My image border isn't wide enough

This is an issue in outlook where borders will only display up to a maximum of 8 pixels wide. Even if you set a border to be much larger in your layout, it will revert down to a width of 8 pixels when rendered in Outlook for Windows. The best alternative is to either edit a border onto the image using an image editor. Alternatively, place the image in a table and set the table background color to be the border.

My animated GIF doesn't work.

Outlook does not support animated GIFs. Instead, it will display the first frame of the GIF in your email, so make sure the most important information is on that frame.

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.

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