Every time Microsoft announces that they are releasing a new version of their desktop Office Suite, email marketers and email developers around the world cross their fingers, hold their thumbs, knock on wood, rub a Buddha’s tummy or pull out the trusty rabbits foot and start hoping and praying that Outlook will have finally entered the current decade so they can stop using email coding techniques from the last century.
But unfortunately it seems that all those pleas are falling on deaf ears because Outlook is still using Word as its rendering engine. This means that the HTML and CSS support for Outlook 2016 is essentially identical to its predecessors – in other words, practically non-existent! But fortunately we have been learning to ‘hack’ Microsoft’s email client for nearly a decade so here are some tips to help you navigate the email marketing minefield that is Outlook.
Learn to love tables
Unfortunately, because Outlook does not support advanced CSS or HTML techniques such as divs, float or position and actually strips styles from your header you are going to need to keep on using those table based layouts.
Unless you like your individual elements rearranging themselves at random, tables are the only way to keep everything where it is supposed to be! Because you can’t actually see the table you’re creating it might be a good idea to plan your layout in another program so you can physically see what size your rows, columns and individual cells are.
You’ll need to use the table layout tools to make sure your margin, padding and other settings are identical but with a little practice it shouldn’t be too difficult. Just remember this is for planning only – you’re still going to have to write the HTML and CSS code for your final email (unfortunately)!
The padding and margins on your images will be ignored
n order to create space between images and other elements you would normally use padding or margins, however Outlook ignores these attributes completely. So in order to stop text from butting up against images or create space between images, you’re going to need to wrap them in a table.
Then you can apply margins, padding or cellpadding to the table in order to get the result you’re looking for. Just be careful because it seems that Outlook sometimes strips padding from other elements and occasionally slips padding or white lines in where there shouldn’t be any.
This probably means you’re going to end up using nested tables and empty ‘spacer’ rows or columns so learn to love them! If you’re using nested tables it would be best to create each separately and then combine them all once you’re done so you don’t forget to close your HTML tags!
Your text won’t wrap automatically
While Word itself automatically wraps text so that long strings of text without spaces (such as URLs) ‘break’ and continue on the next line – Outlook doesn’t have this feature. Instead your table will expand beyond the width you set to make that text fit.
Now when combined with a fixed width table, “overflow-wrap: break-word” usually makes words that are at the end of a line but too long for it move to the next one, and text strings that are longer than a whole line break across two lines but unfortunately Outlook doesn’t support it.
This means you’ll need to use “word-break: break-all;” instead. Just remember that this will break strings of text that are too long for a single line, but it will also break ANY word at the end of a line instead of simply moving it to the next one.
Be careful when styling your links
If you have included styled links that are designed to make your email more interactive, but don’t include an href attribute there is a risk that Outlook will ignore any styling you have applied and turn them into an anchor or <a> instead.
The difference is not huge, but if you are using styled links as CTA’s or you’ve used elaborate styling for some other reason then you’re not going to want to lose it! So simply use span to wrap your link and style the <span> instead. That way any styling you’ve applied won’t be lost.
Spacing on bulleted lists is tricky
MS Word has pretty advanced list capabilities so you would think something which uses Word as its rendering engine wouldn’t have a problem with bulleted lists. However, if you’re using an HTML list Outlook does odd things with the space between a bullet and the corresponding List Item (LI).
If the horizontal spacing on your list is not a concern then you can leave it as is, however it would be best to create a two column table instead. Place your ASCII characters or bullet images in the first column and define its width to control the space between them and your LI’s.
Your line and <td> heights may do peculiar things
As a general rule you should be specifying your line height, font, font size and font color or Outlook will substitute its own default styles. However you may notice that while your spacing renders perfectly in every other email client, Outlook seems to interpret line heights oddly.
This happens a lot more if you’re not using purely whole numbers (such as 1.3px or 2.5px). So simply add “mso-line-height-rule: exactly;” in front of your embedded or inline line height style and this Outlook specific condition will make sure your lines keep to the spacing you intended for them.
You should also always be specifying the height of your <td>’s as Outlook 2016 will set it to a minimum of 17px if you don’t. And if you’re using spacer rows then your line height and <td> height must be identical or your main body’s background color will show, instead of your tables <bgcolor>.
Back up your CSS attributes with HTML and vice versa
It can be very tempting to simply rely on CSS to resize an image when it is supposed to render with different dimensions than the ones it was saved with, however this won’t help you in Outlook 2016. Instead you are going to have to use HTML to do this.
Fortunately you’ll only need to define either the width or the height as Outlook will automatically keep the same aspect ratio so your image won’t end up looking warped. Other email clients require the width and height to be set with CSS which means you are almost always going to need both!
Your background images will need to be VML based
Because Outlook 2016 and its predecessors don’t support background images most people will advise against ever using them when creating an email template for Outlook, however there are times when a simple background color just doesn’t cut it.
Fortunately some email developer wizards figured out not one but TWO ways to include background images in your email – one that uses a repeating image for the body of your message, and one that can be applied to a SINGLE table cell (use the selectors to see the code for the option you want).
Of course you will still need to use a background color as a fallback because there are a few email clients that don’t support this but the great thing is that it seems to work in all versions of Outlook – from Outlook 2007 all the way to Outlook 2016.
Other things to keep in mind while designing your emails for Outlook 2016
Just in case you hadn’t realized it yet, because it’s using Microsoft Word to render emails Outlook will automatically insert a page break at around 1800px which is the length of a standard page. This means you’ll either need to keep your mails shorter than that, or break it yourself so it looks natural.
Outlook 2016 still offers pretty dismal CSS3 support so you’re not going to be able to use media queries – but because it’s a desktop client you can use a fixed width layout. The lack of CSS3 support also means that you can’t use forms and other interactive elements in your emails.
While your ALT text does display, styled ALT text does not so keep it simple. And remember that it is preceded by Outlooks security message as well. Animated GIFs still only show the first frame so make sure all the important info is displayed there.
If you want to align elements then you’re going to need to do it with styles rather than using direct attributes, and you should know by now that all of your styling needs to be inline as Outlook will strip the head of your email.
And lastly, Outlook 2016 automatically adds a 1px border to every table cell so if you have a template that needs to line up perfectly (such as with sliced up images) then simply use “border-collapse: collapse;” to prevent it happening.
OUR FINAL WORD
If you’ve been doing email marketing or design for a while now then you will have realized that many of the issues we’ve listed here are ones that you’ve seen before, and fortunately Microsoft has not changed things so much that all the tricks you’ve been using won’t work anymore.
But if you are smart and you’re using an ‘Outlook First’ design approach, then progressively enhancing the experience to suit those email clients who can support advanced CSS and HTML techniques then you should have no problem – well fewer problems in any case!
And if you really find yourself in a bind, then you can always turn to email development forums and your favorite search engine in order to find a solution!