Modern email design for web designers

Looking at most email code, you’ll find that it’s difficult to read at first glance. CSS is used primarily inline. And the worst part of it, tables are used for layout. This is because of Outlook for Windows, the Microsoft Internet Explorer of the email world. It also makes other things difficult, like using background images.

A more modern approach

However, Microsoft has announced this past year that it is finally replacing its Outlook for Windows rendering engine. Even though the transition may take a while, the percentage of Outlook for Windows users is already pretty low. It's only Outlook specifically on Windows that's the issue, on other platforms it uses newer rendering engines.

So at this point, it’s pretty safe to move away from supporting it. Plus you can do what people did during the Internet Explorer days: put up a note that’s only shown in Outlook for Windows to let your readers know to upgrade their email client. You can even include a link to a hosted version of your email that your readers can go to for proper rendering.

<!--[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]-->

Coding and testing

With Outlook for Windows set aside, you can use div’s for layout the way you would for a website. And you can put all your CSS in the header of your HTML instead of inline within your HTML elements. You still can't use external CSS though. And no Javascript either.

Testing the rendering of your email also gets easier. Before, you would have to use specialized tools to test for various old versions of Outlook for Windows. Now, you can just sign up for an Outlook.com account since it's eventually what will be used across the board for all Outlook apps.

Another client to test for is Google Mail, which can be done with a Gmail.com account. And Apple Mail, on any Apple device. Apple Mail provides the best email rendering so you don't even really need to worry about it much if you're covering the other two. But these three make up the main ones you should test for. And for checking compatibility of specific code, caniemail.com is an essential tool to use.

If you'd like to see some example code that shows the difference between code that supports Outlook for Windows and more modern code, I use a boilerplate email template that comes in different versions. And the latest email template I worked on for Indie Aisle, is a fully modern example.