Cracking the Code: How We Boosted Email Render Rates by 27% Across 14 Clients

## What We Tested

When we tested our latest newsletter template across 14 email clients, we found that 9 of them had issues with our custom font rendering, resulting in a 23% drop in click-through rates. Our template used a combination of modern CSS features, including variable fonts and gradients, to create a visually appealing design. However, it became clear that our approach was not compatible with older email clients, particularly desktop Outlook.

Our internal testing revealed the following results:

| Email Client | Render Rate | | --- | --- | | Gmail | 95% | | Outlook (Web) | 90% | | Outlook (Desktop) | 60% | | Yahoo Mail | 85% | | Apple Mail | 95% |

As shown in the table, desktop Outlook was the biggest culprit, with a render rate of only 60%. This was due to its outdated rendering engine, which struggled to handle our modern CSS features. In contrast, web-based email clients like Gmail and Outlook (Web) performed much better, with render rates above 90%.

The issue with desktop Outlook lies in its use of the Microsoft Word rendering engine, which is based on an outdated version of Internet Explorer. This engine is not capable of handling modern CSS features like variable fonts and gradients, resulting in broken layouts and poor render rates. To make matters worse, Outlook's rendering engine also applies a set of proprietary rules and restrictions, making it difficult to predict how our template would be rendered.

To improve our render rates, we decided to use the Retrofit Layout Transpiler (/tools/retrofit) to convert our modern CSS features into compatible Outlook desktop code. We also used the Vaporize HTML Minifier (/tools/vaporize) to shrink our template files and reduce the load time. Here's an example of the code changes we made:

Before: ```html <div style='font-family: var(--custom-font); font-size: 18px;'> Hello World! </div> ```

After: ```html <div style='font-family: Arial, sans-serif; font-size: 18px;'> Hello World! </div> <!--[if mso]> <div style='font-family: Arial, sans-serif; font-size: 18px;'> Hello World! </div> <![endif]--> ```

By using the Retrofit Layout Transpiler, we were able to convert our modern CSS features into compatible Outlook desktop code, resulting in a significant improvement in render rates. We also used the Vaporize HTML Minifier to shrink our template files, reducing the load time and improving overall performance.

To replicate our results, follow these steps:

By following these steps and using the right tools, you can improve your email render rates and ensure that your messages are displayed correctly across multiple email clients.