If you are using our email builder or any of our other HTML composition methods to design your email campaigns, you’ve probably noticed that some versions of Outlook have a nasty habit of ruining them. Tables, padding, and background images are all fair game for Outlook, and there are many other elements that the email client will happily chew up for you too.

Some versions of Outlook use Microsoft Word to render emails. MS Word is not friendly when it comes to HTML. If you’re sending emails with HTML in them (our email builder and templates included), you’re probably going to run into some problems because of this.

There are some email elements that will break in some versions of Outlook. If a large portion of your contacts use Outlook, it’s a good idea to avoid these entirely:

• Animated GIFs won’t work in all versions of Outlook as it only displays the first frame of the GIF.
• Outlook will not display background images.
• If you use CSS in the tag of your email, Outlook will not render it. In fact, if you use any CSS, be sure to make it inline.
• Outlook ignores padding on < div >, < p >, and < a > tags.
• Width on < div > and < p > tags will also be ignored by Outlook.

When you need to use padding or width on your elements, try using the hspace or vspace attributes instead.

Outlook will also cause problems for you if you use the following elements in your HTML emails:

• Line spacing doesn’t work well in Outlook. If you don’t specify a line height, Outlook will assign one for you.
• Mails longer than about 1800px get cut off as Outlook/Word inserts a page break at this length to help with printing.
• If you have a table-cell with an image shorter than 12px, make sure you apply height to the table or Outlook will break it.
• If you add a stroke to a table element, Outlook may add extra line spacing and padding.

The system has a built-in compatibility tester that you can use to preview your emails and see how they might render in Outlook. This tool analyses your email to evaluate how it may display in common email clients. A client with a red cross next to its name contains incompatibilities. If you click on the email client name, you will see a list of any unsupported styles.

Test Your Emails

Another good idea is to create a test list with email addresses in Outlook where you can receive test emails. Before sending to your contacts, send test emails to yourself. This will allow you to see what the emails will look like in a live Outlook environment.

Advanced Options

For coded emails built using our more advanced composition methods, read the options listed on Email on Acid’s blog post for things like:

• Margins & padding on images
• Text wrapping
• Borders around table cells
• Link styling
• Horizontal spacing in lists
• Padding
• Line height
• Width & height of HTML elements
• TDs
• Image backgrounds
• Resized images