Testing HTML Emails for Outlook

Very few people enjoy coding HTML emails, and no one enjoys making them work in Microsoft Outlook. There's a couple of tools you can use to make it a lot easier. Campaign Monitor and Mailchimp have testing systems, which is great – but they cost money. In the case of Campaign Monitor, you have to…

Very few people enjoy coding HTML emails, and no one enjoys making them work in Microsoft Outlook. There's a couple of tools you can use to make it a lot easier. Campaign Monitor and Mailchimp have testing systems, which is great – but they cost money. In the case of Campaign Monitor, you have to cough up $ 5 every time you want to see your changes, because you can not know if it's fixed until you test again. So how do you avoid this expensive round-robbin of email testing? There must be an easier way?

It's simple: Open the email in Microsoft Word.

Little known fact, Outlook uses the same formatting engine and code as Microsoft Word – so when your emails have in seemingly inexplicable ways in Outlook, try opening it in word before you spend money on a test to make sure it at least is formatting. This fact, among many others, makes one question the sanity of Microsoft decision makers, but alas …

Secondly, keep your code clean. Make sure all of your tables are properly indented and organized, run your code through W3's HTML validator, and double check that you have all your closing tags. Clean code goes a long way – you do not want to be cross-eyed staring at this code at the eleventh hour.

Use Inline-styling. If you are designing for mobile – then put your mobile styles in a stylesheet in the document – but all default styling should be done inline.

The last tip is to use Campaign Monitor's nifty breakdown of which email clients support which rules. It can be found here: http://www.campaignmonitor.com/css/ . Take a gander at that list, it will help you A LOT.

A few highlights from the list were especially helpful for me, and vastly changed the way I coded my emails (in order to work in outlook).

  1. Do not use Margin-top or Margin-bottom.Crazy, right? Outlook doesnt support them. So, instead use empty table rows / cells with a height parameter. But make sure you have border-collapse: collapse; on.
  2. Padding for Div and P tags is not supported. So, again, avoid using Div tags and instead use Tables – they can be padded to your heart's content. And instead of P tags use A and SPAN tags with a
    .
  3. Lists are not supported in Outlook. And by not supported I mean that you can not format your lists. There are default list-types, but you can not customize them. So you need to use SPAN tags with line breaks, or you have to deal with the default formatting.