(Thanks to Mark Robbins for this fix and to Dylan Smith for howtotarget.email.)
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:
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.
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.
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.
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 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 <html> element in my boilerplate template so I can use VML whenever I need to: