Lean Design Blog

Modern email design

What to look forward to after the legacy Outlook for Windows rendering engine.

Example code of the same design, one side coded with legacy email support, the other with modern techniques.

Support for the legacy Outlook for Windows rendering engine is well on its way to being phased out. While the decision to let go of legacy Outlook is ultimately up to you and your email’s audience, it’s a good time to start looking forward to a whole new approach to how we code our emails.

Our workflow can now be more efficient and we can use more modern practices. And better focus our QA efforts.

Modern email coding

The two biggest aspects that affect email coding the most are that we no longer have to use tables or ghost tables, and we no longer have to put CSS styles inline among our HTML code (though it still needs to be included as part of the HTML). Both of these changes make our code cleaner to manage, and easier to understand as we’re working with it.

And we can now use more modern CSS techniques for our designs, with our HTML becoming more semantic for accessibility (as we eliminate so much nesting of containers). And we can focus our attention on dealing with other email headaches, like forced dark mode issues, and Gmail’s fragmented rendering issues across its email clients. (At least the maximum email length issue in Gmail now becomes less relevant.)

New testing methods

Testing is simplified now too. The top most widely used email clients are currently: Apple Mail, Gmail, and Outlook. Apple Mail can be used across different devices and generally offers a consistent rendering experience. Using a Gmail.com online account can cover a lot of Google’s email rendering. And Outlook.com can be used to test the updated Outlook rendering engine.

This also means less need for specialized email testing tools since you can cover the majority of users with the above clients. And you can test mobile and dark mode using these clients as well.

For some examples of modern email code, we’ve updated our boilerplate template and email components template to use modern techniques, with legacy code included that you can also reference.

You can code your email design any way you’d like and use Blocks Edit to enable visual editing for your team to build emails using drag and drop and inline editing.

Photo of Ovi Demetrian Jr Ovi Demetrian Jr
Designing and building websites and emails for over 15 years