New in Litmus: Understand How Email Clients Alter Your Email Code With Processed HTML Support

[ 0 By

Email rendering is quirky and complex. What looks great in one email client can look completely broken in another. While email designers and developers may have carefully crafted their code, email clients can alter HTML and CSS when they process it. This may result in the email client removing, changing, or even adding code to the original HTML and CSS.

It’s always been difficult (and, in some cases, impossible) to view your processed HTML. Until today. Processed HTML in Litmus shows what each email client actually processed your email markup into, making it easier than ever to pinpoint and diagnose rendering issues.

What’s Processed HTML?

When an email travels from your ESP to your subscribers inboxes, it moves through various stages that can trigger changes to your email code.

Preproccessors

Before an email’s HTML even makes it to a subscriber’s inbox, the client passes the HTML through a preprocessor. A preprocessor’s job is simple–remove anything that could be dangerous and convert the original email code into HTML that’s safe to show within the email client. For example, preprocessors commonly remove javascript, delete unrecognized tags, or strip external references. Or they might add tags or code snippets to prepare the email’s code for the next step in the process: the rendering engine.

Rendering Engines

The rendering engine translates the preprocessed HTML into a visual and interactive output—that’s the email your subscribers will see in their inboxes. There’s a broad variety of rendering engines available. They range from engines with top-notch support for all modern web standards that won’t give email marketers much headache (like WebKit that’s used in Apple Mail, Outlook for Mac, and a range of mobile email clients) to extremely restrictive rendering engines with limited HTML and CSS support (including Microsoft Word that powers most Outlook clients for Windows).

The code that got wrangeled by the server, the pre-processor, and the rendering engine is what we call processed HTML. The processed HTML for each individual email client can look very different from your original email code. The result: Your beautifully designed email will look different across email clients, or might even be broken in some of them.

Understanding Processed HTML to Fix Rendering Issues

Spotted a rendering issue in a specific email client? Understanding how that client processed your HTML and CSS can be crucial to pinpoint and solve any rendering issues. But getting access to the processed HTML isn’t always easy. While you can use browser developer tools to view the processed HTML and CSS for webmail clients, there hasn’t been an easy way to view it for desktop or mobile apps. Until today.

Introducing Processed HTML Support in Litmus

To view the processed HTML for a particular email client, navigate to the detail view of the client’s email preview within Litmus Builder. Above the preview, you’ll find a new “View Processed HTML” button.

Once you click the button, the processed HTML code opens in your code window.

Now, you can view the email client’s rendering and the processed HTML right next to each other, making investigating and troubleshooting issues a breeze.

Pro tip: Spotted a rendering issue? Enable Grid View, click on the element that appears to be broken, and Litmus Builder sends you straight to associated code section within the processed HTML.

Processed HTML in action: Troubleshooting a Gmail Rendering Bug

A common issue in Gmail is that it strips out any CSS it does not support or is invalid, which includes missing braces, nested media queries, and most notably attribute selectors. While attribute selectors used to be commonplace as a workaround for Yahoo! Mail, they are no longer needed today; however, a lot of legacy templates and emails continue to use attribute selectors in CSS (i.e. td[class=”foo”]). Since those aren’t supported in Gmail, they will cause your design to break.

Let’s use this simplified example of a button to illustrate what’s happening:

Processed HTML

The attribute selector in your <style> tag sets the button styling that renders perfectly in the browser view:


<style>
body {
	margin: 0;
	padding: 0;
}
.wrapper {
	background: #ddd;
	padding: 50px;
}
.box {
	max-width: 600px;
	margin: 0 auto;
	background: #aaa;
	padding: 25px;
}
a[class="cta"] {
	font-size: 30px;
	background: red;
	color: #fff;
	font-family: sans-serif;
	text-decoration: none;
	border-radius: 5px;
	padding: 12px 18px;
	display: inline-block;
}
</style>

When you check out the same email in Gmail, things look a whole lot different. The button looks broken in both the Gmail App and the webmail client.

Processed HTML

A look into Gmail’s processed HTML allows you to get to the source of the funky rendering:

Processed HTML

See how that code in your style tag changed from the original code? Gmail’s processed the original styling to this:


<style type="text/css">
        .msg-3134057882422037280 body{margin:0;padding:0}.msg-3134057882422037280 .m_-3134057882422037280wrapper{background:#ddd;padding:50px}.msg-3134057882422037280 .m_-3134057882422037280box{max-width:600px;margin:0 auto;background:#aaa;padding:25px}
    </style>

Processed HTML in Litmus shows that Gmail stripped and removed the cta class styling entirely, causing the rendering to be broken.

Knowing what changes Gmail made to your code brings you a big step closer to fixing the problem. In this case, using regular classes (i.e. .cta) in Gmail will do the trick.

Get started with Processed HTML in Litmus

Processed HTML support is available on all paid Litmus plans, so if you’re a Litmus customer, you can start testing right away. Don’t have a Litmus account yet? Learn more about our plans to get started.