Click to Sign Up for a 7 Day Free Trial!

Email Development

Coding for the Beast that is Outlook 2016

Email On Acid

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:

<td style="word-break:break-all;">

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">&#8226;
        <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;">
		&nbsp;
		</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!


About the Author

Geoff Phillips

Geoff Phillips

Half writer, half email builder/fixer and half customer support, Geoff is living his dream in a role that combines his many diverse interests. Code problem or tricky client got you down? Geoff's your man.

Join the Discussion

Excellent write-up, thanks Geoff. Ref text not wrapping automatically, it's ironic that Outlook 2016 appears to honour the CSS3 word-break property, given Outlook's relatively poor support for other web standards!
Blake
Those standards are a retarded nightmare for developers... we have to recode everything SPECIFICALLY to meet outlook's stupid logic, instead of them following the norms of every other email client on the face of the earth.
CYBER
Thanks for the tips. More reasons to hate Outlook! Glad you used the English spelling of "catalogued". Cheers.
John Wen
I am excited and armed smile Outlook is THE beast and always challenging and that is amazing!
Jay Gunjal
There's a serious typo in your post. You typed Outlook 2016 when you clearly meant Outlook 1916. wink
Sean Gardner
So you mean it's like all the other Outlooks... check. I've been debasing my code for a long time for Outlook clients, so this is no exception. I will say though, I didn't have any issues implementing a background using the HTML attribute declaration background="imageURL". CSS backgrounds still don't work (it's Outlook) but the HTMl attribution also works in Office365 and Outlook.com web clients.
Tim
Hi,

Does anybody know how I can send a html email in outlook 2016 as the option to send as text has gone.

Any help will be much appreciated.

Thanks in advance

Rachel
Rachel Powell
One but of silver lining is Outlook continues to ignore the !important tag, while everything else understands it. It's a great way to isolate Outlook and send it different values for certain attributes.
Andy
Thanks Geoff! As an aside: I discovered that for spacer rows you need to set the line-height to the same as the height. If you set it at zero, the background color will not filter down and it will show the body background color.

<table style="border-spacing:0;">
<tr>
<td height="10" style="padding:0;font-size:0;line-height:10px;"> </td>
</tr>
</table>
Katrina
So I used Sublime Text 2 to create a basic html with some style inline formatting. I attached as text and everything looked ok, except for the image that I set a width on of 30px. It had reverted back to it's original size. I'm a newbie and find Outlook...problematic...any suggestions? Also does anyone know how to auto fill values into an html file in Outlook? Say I have a heading in html that says Hello _____ and in the blank space I want the email recipient's name. Is this possible in Outlook?
Dianna
Outlook, what a pain in the a$$ you are!!
Jorge
any idea on how to target outlook 2016? i tried all the standard constraints but without luck.
best, chris
chris
We're having an issue when sending emails to Outlook 2016 that have a border around the entire email. We have a 1px border in the table surrounding our content section that displays fine in almost all inboxes, but Outlook 2016 seems to remove the left side of the border. Has anyone else had a similar issue and know a work around?
Alex
I am having the same issue with Alex. Interesting!!
Christine Es
Great guide,

You might want to add that table height will get striped on Outlook 2016; including declaring the height as a table style. I searched high and low for this topic online and surprisingly no one seems to cover it. The height needs to be declared inside a td wink

Even so you will need to do the above with "insert file! as a text. And by default the option is no longer available on Outlook 2016 without changing the quick access button etc... there is tons of guide on how to do this on google... but yeah... fun fun fun.
J W

Leave a Comment