Recently, I had to deal with HTML-Emails in Outlook. One of my customers wanted his email template updated, so I implemented the design to an existing template and tested it with the Email Debugger Module for OXID eShops and Thunderbird. It worked like a charm until our customer sent feedback that in Outlook 365 everything was pretty broken. What went wrong, and how did I solve the problem?
The (old) problem with HTML-Emails in Outlook
After some research I found out that I ran into an old problem: since Outlook 2007 the program is using Word as its HTML rendering engine. Yes, you read correctly: Word. And you assume correctly, Word isn’t the best choice to render HTML. So what’s the problem here? Word understands only old HTML and CSS standards, namely HTML 4 and CSS 1. Campaign Monitor has published a very good overview of which tags and style properties you can use in Outlook.
So, I wasn’t able to use e. g. CSS calculations, Media Queries or any advanced CSS whatsoever. It took me some time to rebuilt the template with HTML tables and simple CSS inline styles. Here are some of my workarounds and tipps I gathered during my work.
How to write HTML templates for Outlook
Just remember what I said before: use old HTML and CSS standards, HTML tables for your layout and don’t get overboard with fancy design ideas! My recommended workflow would be these steps:
- Create your layout with HTML tables only. Write down the basic structure and enhance the tables with attributes like valign, cellpadding and cellspacing. As soon as you make it, test your layout.
- Apply your CSS inline styles. Yes, it’s a pain in the backside to do so, but even tools like MJML do it that way, so stay strong! It will be done soon enough … After you’re finished, test your layout again. Again, be aware of the fact that you cannot use advanced CSS like linear gradients or images for your background and so on.
- After your layout is completed, test everything thoroughly. Nothing is more annoying than a layout looking good in Thunderbird and totally broken in Outlook.
If you’re short on time or have the advantage of using a frontend framework, I strongly recommend to use it. Some frameworks out there already provide email functionalities, like e. g. Zurb Foundation for Emails. Another framework strictly dedicated to emails is MJML. I will have a deeper look to both of them in future articles.
To wrap up this article, I would like to get some feedback on this topic from you. I ran into the Outlook problem way back in 2009 and was totally surprised that something this stupid is still in existance! What is your workaround for HTML emails, do you use any frameworks or hacks? Let me know in the comment section!
See you later!