Why do my emails look so bad in Outlook?

If you are using HTML to design your email campaigns, you've probably noticed that Outlook has 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.

Why does Outlook break emails?

Outlook uses Microsoft Word to render emails. MS Word is not friendly when it comes to HTML. If you're sending emails with HTML in them, you're probably going to run into some problems because of this.

Incompatible Elements

There are some email elements that will break in Outlook, if a large portion of your contacts use Outlook, it is a good idea to avoid these entirely:

  • Animated GIFs will not work in Outlook because the client only displays the first frame of the GIF.
  • Outlook will not display background images.
  • If you use CSS in the <head> 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.

Other Trouble Areas

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.
  • A direct result of using MS Word to render emails is that mails longer than about 1800px get cut off. 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.

What You Can Do

Everlytic has a built-in compatibility tester which 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.

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.

Compatibility Fail

Screenshot of compatibility tester

Translate »