Coding for the Beast that is Outlook 2016
Outlook 2016 is finally here! And we already wish we could send it back for a webkit version.
But we can’t. So here are a few coding challenges and workarounds to help you reduce the desire to break your keyboard in half and ragequit. You’ll notice that many of these were issues with Outlook 2013, so this will be familiar territory for some of you.
Outlook 2016 ignores margin and padding on images
This means that inline or embedded styles that add padding or margins to images are ignored. To get around this, wrap the image in a table with margin, padding, or cellpadding depending on what you want to achieve.
Text doesn’t wrap automatically in Outlook 2016
Table cells will get very wide to try and accommodate large URLs or other unbroken text strings. To get around this, include the following style:
Outlook 2016 adds a 1px border to table cells
This extra spacing can be almost imperceptible, unless you have a template that needs to line up perfectly. To get rid of this, just use “border-collapse: collapse;” embedded or inline.
Outlook 2016 ignores link styling if there’s no href attribute
Links with no href are sometimes included as anchors within an email. To fix this issue, just wrap the link in a span and style the span.
If horizontal spacing is important, avoid using lists
In this case, I’m talking about spacing between a bullet and its corresponding LI. There appears to be no way to control this in Outlook 2016. To get around this, use a table with the bullet image (or ASCII character) in one TD and the text of the “LI” in the next cell on the same row. For example:
<table cellpadding="2" cellspacing="2" border="0"> <tr> <td valign="top">• <td>Test </tr> <tr> <td valign="top">1. <td>Test </tr> </table>
If all you need is vertical space between list items, use margin-bottom. Don’t use padding, as it’s not supported.
Outlook 2016 sometimes removes padding
This can happen in a lot of different situations, and we haven’t catalogued them all yet. In general, it’s safe to use margin or cellpadding instead. This may cause you to use even more nested tables. Learn to love them!
Use MSO styles to control line height in Outlook 2016
This Outlook-only style will tighten up your lines just a bit. If your spacing seems off, give it a try. Just add “mso-line-height-rule:exactly;” directly before the line-height style, inline or embedded.
Outlook 2016 sometimes ignores the width and height of HTML elements
Divs assume the height of the text inside of them, and 100% width, even if you specify a height/width for them in code. The solution? As usual, use tables instead. I have seen this with a few other elements, but divs are the most common problem.
Outlook 2016 sets TDs at a minimum of 17px high
To avoid this, set line-height and font-size to 1px (or desired size). This is how I build all my spacers lately. For example:
<table border="0" cellpadding="0" cellspacing="0"> <tr> <td height="20" width="100%" style="font-size: 20px; line-height: 20px;"> </td> </tr> </table>
Image backgrounds in Outlook 2016 require VML
Just like older versions of Outlook, 2016 can’t handle normal image backgrounds. To make it work, you’ll need to use some Vector Markup Language (VML).
Outlook 2016 will resize images down to a maximum of 1755px
This one actually also applies to Outlook 2007, 2010 and 2013. It shouldn’t have a major effect on your layout unless you have tiled images that are over 1755px tall. Image width is also reduced by the same amount, so it shouldn’t warp your image at all. I’m not aware of a way to prevent Outlook from doing this.
Images with non-native dimensions defined by CSS will render at their native size
If your images are not being shown in their native size (the size they were saved at), CSS will not help you resize them in Outlook. Just make sure to define the height and width using HTML attributes and they will work properly. If you specify the width, Outlook will resize the height accordingly so the image is not warped. For example:
<-- This image will be resized to 300px in Outlook --> <img src="https://www.emailonacid.com/images/photo.jpg" width="300" style="width:300px;" /> <-- This image will NOT be resized in Outlook --> <img src="https://www.emailonacid.com/images/photo.jpg" style="width:300px;" />
Animated GIFs aren’t supported by Outlook 2016
Not much you can do about this one. Just make sure the first frame of your GIF communicates what it needs to, as that’s all Outlook users will see.
Now you’re armed and ready
Hopefully this will help you to resolve some of the Outlook 2016 issues you come across. If you see something that we didn’t cover here, please comment and let us know!
Outlook 2016 is available for testing now. Want to know how your email will look when you send it? Start testing today!