Best Practices: Designing an Email Blast for Outlook 2016 with ClickDimensions

The new and improved features in Outlook 2016 aren’t the only things that have changed with this new update. Along with the awesome redesigned user interface, there are also slight changes in the way Outlook 2016 renders HTML emails. Ever since Outlook 2007, HTML and CSS have been rendered through Microsoft Word’s internal system. Due to certain HTML and CSS limitations in Word, some features are interpreted differently by Outlook 2016, compared to other email clients.

If you are familiar with email marketing, you most likely know that your marketing emails are rendered differently across different email clients. And if you know that the majority of your email recipients are part of the 400 million Outlook users worldwide (if you are doing B2B email marketing, they mostly likely are), you may want to make a few changes to the way you design your emails.

In this blog, we will be using ClickDimensions, an email marketing and marketing automation tool for Microsoft Dynamics CRM, to demonstrate a number of best practices for designing emails that render properly in Outlook 2016.

Depending on your level of expertise in HTML coding, you should select the email editor that fits your skill level. For the purposes of this blog, we will be starting off with the drag and drop editor and editing the source code in a free style editor.

Designing

If you are unfamiliar with HTML or simply want to save some time, the drag and drop editor is the one for you. When using this editor, the code is automatically generated to follow traditional HTML rules in email design, and will render properly across most email clients. The drag and drop editor in ClickDimensions allows you to quickly choose a preset template and drag in additional content types as you wish. ClickDimensions provides a great tutorial on how to properly use their drag and drop editor. Learn more here.

Testing

Once you’ve created your email and everything looks nice in the email preview, it is time to test it. In just a few easy steps you are able to send out test emails directly from ClickDimensions. It is wise to send multiple test emails across various email clients (Outlook, Gmail, iPhone mail app, etc.) to ensure that there aren’t major discrepancies in the way the email renders. For the most part, you will notice that emails tend to render properly in most email clients except for a few minor things in Outlook, especially if you are using Outlook 2016. If this is the case for you, you will need to dig a little deeper into the source code yourself.

Editing

If your email was originally created in the drag and drop editor, you will not be able to access the source code directly from that editor. You will need to clone the email template and change the editor to the free style editor. Once you are in the free style editor, simply click the source button to access your email HTML code. From this point on, take a look at the email test from your Outlook and see if the following best practices can help you fix the aesthetic discrepancies you may be experiencing.

Best Practices

Margins & Padding on Images

If you noticed the space surrounding your images is inconsistent or nonexistent, it is because Outlook 2016 has a tendency to ignore padding and margin set to the tag. In order to fix this, you should instead wrap the image in a table and set the padding or margin within the

tag.Inconsistent Image SizesIf you find that certain images appear larger or smaller than they should be, you should check how the image size is set in your source code. If the image size is set by using only CSS then you will need to define the size using HTML as well. Text Not Wrapping In some instances, if you have a long web URL or unbroken text the table cell will get very wide and distort the email layout in order to keep the text in one line. To get the text to wrap in the table without distorting it, simply add the following style.

Unable to Remove Table Borders

In Outlook 2016, there tends to be a 1px border automatically added around table cells. If your table cells are not lining up the way you want them to, add “border-collapse: collapse;” to your CSS.