Published on

Debugging Outlook Email Styling

Authors

I once read somewhere (I cannot remember where) that creating and styling mails are like styling for browsers made in 1995. Despite using MJML which addresses many of these issues I still ran into a few issues so I definitely concur with this statement.

To see what CSS is supported and if it is buggy in different client check out this page and expand out the specific CSS you want to check to see if it is buggy in your client.

In my case the one style I was using (background-color) did have a confirmed bug with Microsoft Outlook 2016 (this is the same version rolled out with O365).

I had the newest version which I confirmed in Outlook O365 by going to:

File > Office Account > About Outlook

In my case, the version I currently have is:

16.0.12370.20144 32 Bit

The issues I had were:

Blocky Emails When Using Background Colour

Instead of having a continuous colour for a container's background-color I instead had it appears as blocks with the parent container's different background colour appearing through.

I fixed this using MJML by:

  • using full-width="full-width" for the container. In my case, it was an mj-section
  • do not use CSS to set the background colour, rather use the MJML attribute

See this issue for more details.

Outlook Hairline Issue

This was the most painful of the issues as I had to rework every MJML template file.

To understand this issue a bit better look at this issue. For a more in-depth explanation look at the top answer here.

TLDR:

  • Break your content up into as many sections as possible.
    • It looks like Outlook has a bug that triggers when the tables (that MJML generates) gets past a certain size. By breaking up your content into as many sections as possible we avoid this issue.
  • See the top answer The Outlook targeted comment does not help. But breaking up content as suggested does the trick

Conclusion

Based on my dev so far for mailers, it looks like Outlook 2016 is the equivalent of IE for mail clients. It is worse as there are little to no dev tools to try inspect what is going on. In the end, the best thing to do is use a library like MJML and stick to using their components attributes as much as possible as opposed to CSS. The MJML attributes compile to HTML that addresses many mail client bugs.

Resources