Outlook

Microsoft Outlook is one of the oldest and most widely used email clients available. Having undergone a number of revisions and updates over the years, there is a wide range of versions in use today by both consumers and businesses. Litmus currently tests for the most popular versions, which consists of seven separate versions of Outlook.

Microsoft notoriously changed the rendering engine used to display emails from Internet Explorer to Microsoft Word with the release of Outlook 2007 - leading to a regression in what HTML and CSS could be used in email campaigns. This change in rendering engines is a source of constant frustration for email designers, as Microsoft Word lacks support for many widely used HTML tags and CSS properties.

Market Share

Outlook has a number of versions in use, but combined they represent an impressive 17% of the market, placing Outlook in the #2 position in our top ten. Outlook is very popular amongst both consumers and businesses - meaning that nearly every email designer needs to watch out for its multitude of quirks.

Deliverability

Microsoft Outlook has built in spam filtering typically referred to as their Junk Email Filter. By default, the Junk Email Filter in Outlook is set to “low”, which typically allows in messages from known senders and trusted sources. However, if you are sending to a new subscriber, Outlook’s Junk Email Filter may filter your initial emails to them. Outlook typically does not delete the messages on a server, but instead dumps suspected emails into a junk folder.

Users can also use Outlook to access POP3 and IMAP accounts, which are usually subject to that services own deliverability rules and spam filtering, much like many other clients.

It’s important to note that Outlook is a very popular client in the business world, and as such, has a large number of third-party add-ons that can impact deliverability. Many businesses also use firewalls to protect their networks, which can greatly affect deliverability, even from trusted senders.

Rendering

Microsoft Outlook is often cited as one of the most hated email clients amongst designers. It is the source of many headaches, mainly due to the fact that Microsoft swapped out the rendering engine with Outlook 2007 - favoring Microsoft Word’s HTML rendering capabilities over those Internet Explorer. With this change came a decrease in the number of HTML tags and CSS properties that were supported, along with a few obnoxious quirks when rendering things like images and spacing.

A distinction needs to be made between versions of Outlook when considering rendering issues. Outlook for Mac generally has very good support for HTML and CSS since it is built on the same Webkit rendering engine as Apple Mail. Emails displayed in Outlook for Mac are unlikely to break when following good design practices.

The same goes for emails rendered in older versions of Outlook, primarily Outlook 2000-2003, which rely on Internet Explorer for rendering. The main problems you will likely run into with earlier versions is the lack of support for the min-width and max-width CSS properties. Many designers use these properties with fluid and responsive templates to constrain table widths. Outlook users will typically experience blown-out layouts if this is not accounted for.

More recent versions of Outlook (2007-2013) have considerably less support for HTML and CSS and include a number of bugs to keep in mind.

One of the biggest problems in Outlook is missing support for the box-model. While Outlook does support the width and margin properties - it is sorely lacking support for the height property, min- and max-width, and padding on p and div tags. This can lead to a variety of problems - usually collapsed blocks of text or blown-out table widths.

Apart from the box-model, Outlook has essentially zero support for positioning elements with CSS. While not commonly used by designers, properties like position, float, top, right, bottom, and left simply won’t work in Outlook. More importantly for some modern design techniques - most versions of Outlook do not support the display property - meaning that any hidden elements for responsive templates will be displayed on desktop if relying on display:none; for hiding elements.

Along with abysmal support for CSS, Outlook has a number of unique bugs that designers need to keep in mind.

If you are using animated GIFs (a common technique), they will not animate within Outlook. Fortunately, Outlook still displays the first frame of animation. It is recommended that you keep any vital information visible in the first frame so that your message is not lost.

If you are using padding-top within a row and have multiple table cells within that row, padding-top will be applied to every table cell in the row, regardless of only declaring it on one of the elements.

Outlook has issues with rendering text when line-height is declared, especially with decimal values like 1.5 or values less than 0.

Outlook ignores resizing images via code and will display the images at their actual size. This can be a huge problem if you are feeding emails retina images that are resized in code, leading to broken layouts for Outlook users.

Outlook has zero support for styling lists - so no using images for bullets or even declaring a specific list-style-type for Outlook readers.

Since Outlook relies on Microsoft Word for rendering emails, longer emails will sometimes be rendered with odd gaps in the layout. This is due to Word incorrectly assuming that the email is a document with defined page breaks, normally meant for printing. It will attempt to force emails into a normal document length, leading to gaps where it thinks page breaks should fall.

Understandably, accounting for Outlook (at least versions 2007-2013) is one of the worst parts of designing HTML emails. The unreasonable lack of support for CSS and the multitude of bugs in the rendering engine means that designers need to be very careful when building emails for audiences with large numbers of Outlook users. With Outlook ranking as the second most popular email client today, that effectively means that every email designer needs to build accordingly.

Targeting Outlook

With the plethora of rendering issues that comes with having to support Outlook, it is sometimes useful to target Outlook with specific styles. Fortunately, targeting various versions of Outlook is relatively easy using conditional CSS.

<!--[if gt mso 11]>
    <style type="text/css">
        ... Specific Outlook Styles...
    </style>
<![endif]-->

Looking at the example above, you can see a conditional statement containing a style block for CSS to be used for Outlook. That conditional statement can be used to target Outlook in a variety of ways:

• lt is less than a specific version.
• gt is greater than a specific version.
• lte is less than or equal to a specific version.
• gte is greater than or equal to a specific version.

It's important to understand which versions you are targeting, too. Microsoft's numbering scheme is below:

• Outlook 2000 = 9
• Outlook 2002 = 10
• Outlook 2003 = 11
• Outlook 2007 = 12
• Outlook 2010 = 14
• Outlook 2013 = 15
• Outlook 2016 = 16

In addition to using conditional CSS, Outlook has a variety of Microsoft-specific properties which you can use to your advantage if you're running into any particularly nasty bugs. Not many designers will utilize any of these properties, but for the purposes of documentation, here they are:

Resources

Email Client Market Share
Campaign Monitor's Guide to CSS Support
MailChimp's CSS Support Guide
Wikipedia Outlook Article
Outlook 2007 Rendering Capabilities Part 1
Outlook 2007 Rendering Capabilities Part 2
Why Does My Email Look Like Monkey Poop in Outlook?
About the Junk Email Filter
Overview of the Junk Email Filter
How Outlook Helps Protext You from Spam
Using Conditional Comments in Outlook
The Truth Behind the Outlook 2007 Change
HTML Email Rendering Issues in Outlook 2013
It's not You, it's Outlook
Microsoft to Ignore Web Standards
Word HTML
Rendering HTML Emails in Outlook
Common Rendering Issues in Email Marketing