We waited a long time for Outlook 2016. But, as soon as it arrived, we were already wishing we could send it back for a webkit version.
Unfortunately, we can’t send it back. So, here are a few coding challenges and the workarounds to help you reduce the desire to break your keyboard in half and ragequit. You’ll notice that many of these quirks were issues with Outlook 2013 as well, so this will be familiar territory for some of you.
Even with these workarounds, it’s important to remember to test your email first. Outlook can be finicky, and you’ll want to double-check how your code renders before you hit “send.” With Email on Acid, you can check your email design in more than 70 clients and devices, including Outlook.
Outlook 2016 Ignores Margin and Padding on Images
Outlook ignores inline or embedded styles that add padding or margins to images. To get around this, wrap the image in a table with margin, padding, or cellpadding depending on how much space you need.
Check out this blog post for more tips on spacing techniques in HTML email.
Text Doesn’t Wrap Automatically in Outlook 2016
Outlook will not automatically wrap text into the tables you create. Instead, table cells will widen to try and accommodate large URLs or other unbroken text strings. To avoid this, include the following style:
<td style="word-break:break-all;">
Outlook 2016 Adds a 1px Border to Table Cells
This extra spacing may go unnoticed, unless you have an email template that needs to line up perfectly. To get rid of this extra spacing, just use “border-collapse: collapse;” embedded or inline.
Outlook 2016 Ignores Link Styling if the “href” Attribute is Missing
Links without href are sometimes included as anchors within an email. If you want Outlook to recognize the link styling, just wrap the link in a <span> and style the span.
If Horizontal Spacing Is important, Avoid Using Lists in Outlook
When it comes to Outlook 2016, there’s no way to control the spacing between a bullet and its corresponding list item. To get around this, use a table with the bullet image (or ASCII character) in one TD and the text of the list item 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 Outlook will not support it.
Outlook 2016 Sometimes Removes Padding
Outlook 2016 will remove padding 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 require you to use even more nested tables. Learn to love them!
Use MSO Styles to Control Line Height in Outlook 2016
Microsoft Office styles (MSO styles) 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
When an email renders in Outlook, the <div> sections will 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. We have seen this with a few other elements, but the <div> situation 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 the 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 Vector Markup Language (VML)
Just like older versions, 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 to a Maximum of 1755px
This quirk also applies to Outlook 2007, 2010 and 2013. It shouldn’t affect your layout unless you have tiled images that are more than 1755px tall. Outlook will also reduce image width to the same size, so it shouldn’t warp your image at all. We’re not aware of a way to prevent Outlook from doing this.
CSS Will Not Resize Non-Native Images in Outlook
If your images are not displaying 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 render 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;" />
Outlook 2016 Does Not Support Animated GIFs
Unfortunately, there’s not much you can do about this one. Outlook will only display the first frame of the GIF, so it’s important to make sure that first frame communicates your message to the subscriber.
Now You’re Armed and Ready - But Don’t Forget to Test!
Hopefully these tips will help you to resolve some of the Outlook 2016 quirks you encounter. If you see something that we didn’t cover here, please leave a comment below and let us know! Or, you can hit us up on Facebook or Twitter.
Even with these tricks, it is still crucial to test your email before you hit “send” – with quirky clients like Outlook, you never know what design problems may pop up. With Email on Acid, you can preview your email in more than 70 clients and devices, so you’ll know how it looks in every inbox. Want to see for yourself? Try Email on Acid free for 7 days and start sending flawless email.
No comments:
Post a Comment