All inbox providers have their quirks, but the one that generates the most complaints by far is Outlook. Often, a mailing will look great in other email programs but in Outlook, a random space or similar rendering issue will appear; sometimes, the mailing might crash altogether. It isn’t you and it isn’t us, it’s Outlook.
Typography updates
Microsoft has released some typography updates that may cause line break hyphenation to appear when viewing a mailing in Outlook. For more information, please refer to this Microsoft blog post.
Things that can cause issues in Outlook
While Outlook is great at many things, it can run into trouble when it is asked to render an HTML email that has, for lack of a better explanation, too much code. To better understand how Outlook sees email code, let’s break it into two parts: content and template code.
Content
We often find that content may need to be simplified in order to render properly in Outlook. Luckily, there are several things that can be done to simplify the HTML code that makes up your content. Whenever you have a lot of links, colors, fonts, or other formatting, those elements add to the HTML and weigh it down. So, one fix is to cut down on any excess formatting.
Additionally, if you’ve pasted in text from another source, such as a Microsoft Word document, you could be unknowingly pasting in hidden formatting that isn’t noticeable right away. As a result, we always recommend that you type content directly into the editor or paste it in without formatting. You can use cmd shift v on a Mac or ctrl shift v on a PC to paste without formatting. You can also paste your content into a text editor to strip out the formatting, copy it again, and then paste it into the editor. Additionally, both the drag and drop editor and the legacy* editor have tools to strip formatting from text, so you can also use those after you’ve pasted text in. For more information, please refer to these articles:
Template code
Generally, when your campaign is coded correctly and working properly across all other email clients, you’re fairly limited as to what can be done to get it to work in Outlook 2007 and 2010 — which is where you’re most likely to encounter Outlook’s rendering limitations. Reducing the amount of text and formatting may help alleviate the problem, but then you’re compromising the functionality of your campaign for just one program.
Outlook 2007 and 2010, in particular, break content based on certain numbers of lines of content (based on Word’s rendering engine). Instead of designing Outlook 2007 around a browser, Microsoft based its HTML rendering engine on Word. Because of that, several popular HTML email design elements aren’t supported. Outlook 2010 uses the same rendering engine, which is why the issues carried over.
Aspects that Outlook has issues rendering include:
- Background images
- Fancy CSS
- Javascript or Flash
- Forms
- Animated GIFs
- Automatic text wrapping
- Link styling (sometimes 2007 and 2010 Outlook don’t support inline styles when the a tag doesn’t have an href attribute)
- Padding (sometimes 2007 and 2010 Outlook can change divs to paragraphs with nested span tags)
- Image margins and padding
- Rounded corners on buttons (Outlook 2007, 2010, and 2013 only support square buttons)
Other common Outlook issues
Custom fonts not rendering
Custom fonts are not guaranteed to work in all inboxes, as they rely on the fonts that are already installed on the recipient’s device in order to render. In particular, Outlook has trouble rendering many custom fonts. As a result, if you primarily send to contacts using Outlook, we recommend sticking to a web safe font.
White lines across mailing
Sometimes, Outlook chooses to render white lines across solid blocks of color. This is something that occurs on the Outlook side, so there’s not much that can be done in the editor to prevent it.
Background images not loading
Outlook does not support background images. As a workaround, you can arrange your campaign as desired in the editor, including a background image. Then take a screenshot of each block and replace the blocks with the corresponding screenshots.
Rotated images
Outlook sometimes turns images on their sides. This often occurs when a previously sent campaign has been duplicated multiple times. Repeated duplication can cause code degradation, so we strongly advise against it.
The rotated images can sometimes be fixed by deleting the row containing the images, saving the mailing, and then dragging in a new row / content blocks. However, this is not guaranteed and you may need to start from scratch with a fresh campaign.
Dark Mode doesn’t look right
Outlook is known to change colors in campaigns when set to Dark Mode. This is caused by the way that Outlook renders content and cannot be controlled from our side. The best workaround is to send a test to an Outlook inbox in Dark Mode and choose colors that you like in both formats.
Outlook troubleshooting options
While the list of possible issues is rather long when it comes to Outlook, there are some that are more prevalent, so we have compiled these troubleshooting options for you to try out.
If your campaign crashes your Outlook
Our proofer will alert anything over 40 KB, which is pretty conservative. Typically, anything under 60 KB is all right, but lighter is always going to be better in terms of delivery. However, Outlook 2007 and 2010 have a file limit size of 20 MB. If there’s a huge image in an email, for example, that could cause trouble. The limit can be changed on your end, and we recommend setting it to 50 MB.
If there’s a lot of white space above an image in your campaign
Due to the Word rendering engine, if there is an image where Outlook thinks there should be a page break, it adds the gap above the image. It’s frustrating, but this explains why sometimes shifting content around will “fix” the issue, because it puts the page break in a different place.
If your Outlook has rendering issues on mobile devices
Whether you are using the Outlook app or the native mail app of the device, if you are experiencing rendering issues on a mobile device, switching from the portrait to landscape view can sometimes fix them.
When your tall image is clipped shorter in Outlook
Outlook’s engine has a maximum allowed height for images. They cut off, from the top down, anything over 1,728 pixels tall. In this regard, we recommended that the largest image size you upload is 480 pixels in height or width.
* In April 2022, our legacy editor was replaced with a new drag and drop editor. Accounts that existed prior to this change still have access to the legacy editor through their previously saved templates and campaigns, however new, from-scratch campaigns can only be created in the new drag and drop editor. Accounts that were created after this change only have access to the new drag and drop editor. Please refer to our new editor FAQ article for more information.