We’ve got the code you need to face your Outlook HTML email fears!

Coding a great email for Outlook’s desktop email clients requires jumping outside the “normal” HTML and CSS. There are three types of code that will help make your emails shine in these clients: conditional coding, MSO properties, and VML.

It can be scary to work with something new, but it’s worth it. When you get it to work properly and it no longer means that your Outlook email is not displaying properly, you will feel on top of the world!

Conditional coding

Conditional coding looks at what email client or browser your subscriber is using,and only shows the code if it fulfills the conditional inside the comment, such as:

You can even use this to target specific versions of Outlook’s desktop clients by adding the version numbers:

Outlook is anything but straightforward, though, so the version numbers don’t correspond with the name of the email client:

• Outlook 2000 = mso 9
• Outlook 2002 = mso 10
• Outlook 2003 = mso 11
• Outlook 2007 = mso 12
• Outlook 2010 = mso 14
• Outlook 2013 = mso 15
• Outlook 2016, Outlook 2019, and Office 365 desktop = mso 16

You can get more intricate by targeting a range of clients with less than (lt), greater than (gt), less than or equal to (lte), or greater than or equal to (gte). For example:

If you’re only seeing some issues on a specific client, you can target that client specifically to hide and show better content for it.

You can also use conditional comments to hide content from Outlook by saying “if !mso” meaning “if not mso”:

Something to keep in mind: conditional code only works on Outlook desktop clients. As this is where a lot of issues come into play, you’ll probably need these more than any fix for the webmail clients.

There are ways to target the web clients as well, though no way to target one Outlook web client over the other. So when you target Outlook.com, you’ll also target the Office 365 web client (but not the desktop client).

You can target the Outlook web clients by exploiting the fact that Outlook appends “x_” to all class names, but doesn’t do this for the attribute selector. So if you have a class “foo” and want to treat it differently for Outlook web clients, you can target it with this code:

(Thanks to Mark Robbins for this fix and to Dylan Smith for howtotarget.email.)

MSO properties

As mentioned above, there is CSS specific to Outlook that you can add that will only affect Outlook desktop email clients. Here are a few of the most common:

mso-hide: all;

This property will hide everything from Outlook desktop clients. It does get stripped out when the email is forwarded, so be wary of using it by itself if that’s a function you know your subscribers often use. You can pair it with the “if not mso” conditional code if you’re a “just in case” coder.

mso-line-height-rule: exactly;

This property ensures that Outlook displays your line height at what you designate in the line-height property. Without it, Outlook doesn’t necessarily respect your line heights. If you’re working in an industry where precision is key, you’re probably very familiar with this property.

mso-padding-alt

This one’s a little less common, but lets you declare padding that is specific to Outlook. If the normal padding you have on a cell isn’t rendering quite right in Outlook, you can use mso-padding-alt to set values that fit your design for Outlook.

mso-ansi-font-size

This lets you set font sizes specific to Outlook. If Outlook is rendering your font a touch bigger than other email clients and you end up with a short final line of copy you didn’t want, add mso-ansi-font-size and set a font size that makes your copy fit.

There are lots more MSO properties that you can use, so experiment to see if there’s anything that will fix a rendering issue for you.

VML

VML stands for Vector Markup Language. It is Microsoft’s version of SVG, but the language has been depreciated and is very rarely used (yay, email!). Microsoft does have the documentation for VML archived online, so you can still look up how to use it to create vectors in Outlook, where it is still supported. Theoretically, when Microsoft transitions to it’s “One Outlook” model, we’ll be able to leave VML behind.

Make sure to include the VML namespace declaration. I usually add it to the element in my boilerplate template so I can use VML whenever I need to:

Once you have that, you can add any VML to your code inside MSO conditionals:

That code would make a blue rectangle that’s 200px by 50px. That may not be something you can actually use in an email, but you can use VML to add buttons with rounded corners to your code, background images, and background gradients. You can also use VML to create faux absolute positioning, shadow effects, or a fallback to support CSS art in Outlook. There are lots you can do with VML once you dive in.

Test to ensure your Outlook email rendering goes smoothly!

Outlook has long been the bane of email marketers, but it doesn’t have to be. Whether you’re just starting to work with Outlook or a master marketer able to summon CSS classes at will, with these tools, you’ll be able to charm even the most unruly Outlook inbox.

Check out the resources throughout this post to build up your Outlook coding chops, and test them out in your emails with Litmus Builder and Email Previews. Think of coding for Outlook as a puzzle waiting to be solved, and you may find yourself loving Outlook and all of its quirks.