There is nothing worse than spending hours creating a beautiful email, filled with perfectly witty animated GIFs, amazing images, and accessible buttons, only to find that it fails Outlook preview when you move to email testing. Soul crushing.
Outlook emails not displaying HTML emails properly has been a staple in the email marketing book of pet peeves for a long time. But does it have to be? Discover how to overcome the Outlook obstacles and create dynamic, engaging emails which are certain to look fabulous… even in Outlook!
In this post, you will learn:
The many versions of Microsoft Outlook
The name “Outlook” covers several different email clients with a couple of different rendering engines and at least two different viewing settings. All of this can be a giant headache if you let it. Let’s dive in to the different Outlook versions.
These are the Windows desktop versions of Outlook. These use Word as the rendering engine, which made sense at a time when email was like writing letters. (Ah, simpler times.) But, for email marketers, it doesn’t cut it for rendering Outlook HTML emails.
120 DPI (dots per inch) adds to the complexity. Windows users can choose 120 DPI to increase their screen resolution. If they do, the desktop email clients will respect that and will update images and text to be larger.. Unfortunately, this can wreak havoc on your email.
Outlook for Mac
This is the Mac desktop version of Outlook. It uses Webkit as the rendering engine. This means it’s usually on par with Apple Mail and iOS as far as email rendering is concerned. If it looks good in your browser, there’s a decent chance it will look good in Outlook for Mac and you’ll have less chance of your html email not displaying properly.
Outlook.com and the Outlook mobile apps
These clients use Webkit or Webkit-based rendering engines, so they provide good HTML rendering and don’t usually break your emails.
Outlook Office 365
There are two different versions of Outlook Office 365:
- Desktop email client
- Web-based email client
The desktop version is similar to Outlook 2007-2019 and uses Word as a rendering engine (hard for email). The web-based email client uses Webkit or Blink and renders emails similarly to Outlook.com (much easier).
No more broken emails
Preview your emails across 100+ email clients, apps, and devices—including all versions of Outlook—to ensure an on-brand, error-free subscriber experience.
Learn how →
One Outlook to rule them all
In January 2021 , Microsoft announced their “One Outlook” vision to replace the desktop clients with one client that works everywhere starting sometime this year.
The new Outlook email client will be based on current Outlook web apps. Hopes are high that it’ll have a Webkit-based rendering engine and will render HTML emails, to reduce thechance of your html email not displaying properly in Outlook. Unfortunately, all those old desktop clients aren’t going to just disappear when that happens, so they’ll still have to be supported to some extent.
How to solve Outlook email rendering issues: the do’s and don’ts
The key takeaway is that we’re working with two different rendering engines—Word and Webkit. Webkit is easier to code for, and Word is more difficult. Neither is necessarily good or bad, they just require different approaches and have different quirks that need to be taken into consideration.
Let’s look at some of the common rendering issues in Outlook desktop clients and how to solve them.
Do include width and height attributes on your images
Outlook does not support CSS styles for widths and heights. If you don’t include the width and height attributes, Outlook will display your image at its actual size. If you’re using retina images (which you should be), this will lead to giant images that’ll break your emails.
Do include ALT text
Don’t let Outlook’s security message speak for your images. Make sure to include ALT text; Outlook doesn’t display images by default unless people turn the feature on.
Do use tables
Email has come a long way and you can use <div> blocks in lots of email clients, but Outlook isn’t one of them. Outlook will ignore most styles that you apply to your <div> tags including widths and paddings, so it’s important that you use <table> tags for your content instead.
Do use Outlook-specific code to solve rendering issues
This may not solve all your issues, but including some Outlook-specific CSS can help you solve a rendering issue that you’re only seeing on Outlook. Or, you may hide a small block if your Outlook email is not displaying properly, and use conditional code to show a version that would work for a specific version of Outlook. (More on conditional code later.)
Do add line heights to small images or table cells
Outlook sets a minimum height on table cells and images. If you’re using a table cell as a spacer or have a small image, make sure to add a line-height attribute to the element equal to the height that you want them to appear. For example: