You may have heard about one of the biggest pieces of news in email lately: Microsoft is finally, FINALLY, putting an end to the worst HTML rendering engine of all time, that has remained in Outlook for Windows. I’m surprised the news is not talked about more. And celebrated as a holiday!
Outlook is as infamous for its bad coding practices as was Internet Explorer in its day. Outlook 2007 switched from using Internet Explorer’s rendering engine to Microsoft Word’s engine. (I’m not sure that was an upgrade, but it may have been back then!) And we've been stuck with that same engine for the past 16 years, keeping email coding behind essentially for that long. Microsoft does not seem to learn from its mistakes.
It’s created such headaches for developers that there’s been frameworks, tools, and email editors specifically built around alleviating the pain. In some cases these resources also end up creating new problems. It’s somewhat ironic that the people that hurt the most, the developers, may also be the ones who kept it alive so long by putting so much energy into supporting it!
Okay, very necessary rant over.
What is going away
There are three key aspects that we will no longer have to deal with:
- Table-based layout - we can now use div’s for layout without having to additionally include ghost tables to go along with them
- VML hacks - supporting background images and certain styling properties no longer requires having to solve an archaic puzzle to do so
- Padding and margin issues - because Outlook doesn’t seem to know what to do with padding and margins a lot of the time, it generally decides to just ignore their usage altogether
The new engine is based on Outlook.com’s web version. It has its own limitations, but we’ll certainly take it!
What to do right now
The full adaption away from the current versions of Outlook for Windows can take years. At a certain point, the resources you put in getting an email to be design perfect in Outlook for Windows may not be worth the effort. Here are some options you can consider today to start transitioning away from it:
- Let go of fixes - handle the big aspects, but allow for certain issues to be broken in Outlook, like padding and margins being off
- Let go of tables - you can make emails look readable by essentially allowing Outlook for Windows to wrap columns into a single column while you use div’s instead of tables in your code
- Let go of Outlook for Windows - if you decide to let go of spacing issues, and tables, at this point you can also let go of VML and allow your content to flow in a way that it’s still readable even if it doesn’t look pretty
And with any of the above, you can always use the Outlook for Windows conditional statement to include a note for your audience:
<!--[if mso]>
<p style="text-align: center;">Email may not look quite right in Outlook for Windows. <a href="#" style="text-decoration: underline; color: #1467ac;">View it in your browser.</a></p>
<![endif]-->
To get an idea of what code without Outlook for Windows looks like, we’ve updated the Starter template codebase with a version you can use that is Outlook for Windows free!
Blocks Edit works with your code no matter how you decide to go with handling Outlook for Windows. It doesn’t force you to use outdated practices that don’t apply to your audience.
