Known Issues in Email Rendering and Display with Outlook

MailPoet designer editor was made to help you create incredible templates for your subscribers across all email clients. 

Although we would love to ensure the emails will be rendered properly on all email clients, it's not always possible as we can't control it for some email clients.

In particular, versions of Outlook from Outlook 2007 to present, are known to have multiple rendering issues that are not exclusive to MailPoet.

That's because Outlook versions since 2007 use Microsoft Word to render emails, and it has restricted support for HTML and CSS.

Below are known issues or bugs with the rendering of templates designed with our editor.

Images do not display

While all email readers sometimes have issues with images not loading ( see here for more generic image-loading issues that may affect all email readers), Outlook has some specific issues.

Outlook does not display WEBP format images at this time. All images must be PNG or JPG format. If you are using a plugin that optimizes images such as Smush, this may automatically convert large uploaded images to WEBP format. You may have disable any image-optimizing plugins to ensure that all uploaded images that you will be using in outgoing emails remain in PNG or JPG format.

Outlook does not display images used as the background for other blocks. For example, if you have a header area that is a column, and have set the background image to a specific image, Outlook will not display this image and instead will fall back on the default solid color specified for the background. If the image is an important part of your content, include it in its own separate Image block; if you would like to overlay text, you will need to create an image with the text embedded (but also remember: not all subscribers will load images by default, so if it is truly critical information, it's best to include that as text and the image as its own image block separately).

1px horizontal lines in the body do not display

Horizontal rules (i.e. the "Divider" block in our email designer) may not appear in Outlook, especially if set to 1px height or set to use a non-solid pattern.

Happens on: Outlook 2016, 2019 and Office 365 when using Windows 10.

What can you do? Currently, the only workaround when using MailPoet is to open HTML emails in a web browser.

Buttons with a label on 2 lines or more are vertically collapsed to 1 line

Happens on: Outlook 2007, 2010, 2013 and 2016 on Win 7.

What can you do? Try to have a short line in the button and set the width to be wide.

Alternately, you can replace the Button block with:

• A text block with a link; convert this into a heading to boost the size, use a colour, and center the text so it draws attention to the link
• An image block that is linked so it becomes clickable (remember though, some subscribers will not load images by default, and in Outlook, all images must be PNG or JPG format)

Social icons: no padding or margins between icons in some Outlook versions

Happens on: Outlook 2007, 2010, 2013, 2016, 2019

What can you do? Choose to use social icons without a background colour.

Duplicated or misaligned content when forwarding or replying

In order to work with Outlook as best as possible, we include some conditional HTML in some of our blocks that contains Outlook-specific rendering rules. This provides the best possible experience for your subscribers who use Outlook to view and read your email.

However, the conditional check on these rules is ignored by Outlook when forwarding or replying to that email. This can result in:

• some content, especially buttons and images, being duplicated
• alignment issues, especially surrounding 2 and 3 column layouts

What can you do? We at MailPoet have made the decision to optimize the viewing experience for your actual subscribers, so these issues will not be treated as bugs, as the only code-based solution at this time is to remove the Outlook-specific code, which will lead to noticeable layout issues for all subscribers viewing your emails in Outlook.

If the ability to forward or reply to emails with no changes is a requirement, then possible workaround solutions include:

• Ensure you include a Header block that has a "view email in browser" link, so anyone receiving the email as a forward can view the original properly
• Remove buttons and replace them with either simple text links (you can use colour and size to highlight the link) or a clickable image
• Use single-column only layouts

Copy and Paste Issues

We do not recommend copy and pasting in text from other programs, especially Microsoft Word, into text blocks in your outgoing emails.

Copied and pasted text like this will contain HTML tagging from the original source that will override MailPoet layout CSS and tags, resulting in unexpected layouts and broken designs.

If you do need to copy and paste text, please only copy it from simple text editors, such as Notepad.

If you have already copied and pasted information from a third party source and are wondering if it contains unexpected HTML code, you can check this by clicking the block in your email and using the "Source Code" button to view the HTML code directly. There, you can remove any custom HTML or CSS tagging that might be affecting the appearance of that section.