Webmail Rendering Explained: Why Preprocessors Are the Enemy

[ 0 By

Due to the wide variety of desktop, webmail, and mobile clients—not to mention browsers, mobile apps, rendering engines, and other factors—emails don’t always appear the same in every client. So why do email clients render emails differently?

In part one of a three-part series, we’ll explore how webmail clients render emails, and what you should focus on to make designing and coding for these web-based clients a bit easier! In part two, we’ll focus on desktop clients and in part three, we’ll take a look at mobile clients!

UNDERSTANDING WEBMAIL CLIENTS

There are dozens, if not hundreds, of different web-based email services. Many are free to users and supported by advertising revenues, like Gmail, Outlook.com, Yahoo! Mail and GMX. Others are provided by cable and internet companies when you sign up for their services, like Comcast or Time Warner/Roadrunner.

There are two main factors that influence rendering in webmail clients: the preprocessor and the browser. While rendering is determined by the browser the email is opened in, it’s the preprocessor that is usually responsible for any problems you encounter.

The Preprocessor

Before an email can be rendered in a web browser, the email client needs to pass the HTML through a preprocessor. The preprocessor’s job is to maintain the security and stability of the client by removing potentially dangerous elements, and protect the integrity of the email client itself.

Most preprocessors err on the side of being overly restrictive and remove anything with even the slightest potential to affect the layout of their email client. This includes removing object or embed tags, javascript, Flash, and in the case of Gmail, even <style> blocks contained in the <head> of your HTML.

After the preprocessor has finished, it passes the newly stripped-down HTML along to the browser, which acts as the rendering engine, and the browser is now faced with the task of interpreting the preprocessed HTML.

The Browser

Popular browsers include Internet Explorer, Firefox, Chrome, and Safari. Internet Explorer uses the Trident rendering engine, while Firefox uses Gecko. Chrome and Safari both use WebKit. The latest versions of these browsers are all very modern, well-maintained, rendering engines with top-notch support for modern web standards. You’ll still want to test webmail emails in a variety of browsers, since things like image blocking behaviors, ALT text, default fonts and alignment can vary from browser to browser.

DISCOVER YOUR WEBMAIL AUDIENCE + FOCUS YOUR TESTING

Which webmails are your customers most frequently opening your emails in? Which browsers are they using? With Email Analytics, you can find out where your subscribers are most frequently reading your emails. With that information in hand, you’ll be able to focus your testing efforts where it matters most.

Check out the rest of the series!

  • Part two focuses on desktop clients.While there is an abundance of desktop clients, we’re going to focus on four of the main ones: Microsoft Outlook, Lotus Notes, Apple Mail, and Mozilla Thunderbird, which all have numerous different versions. By understanding how each of them display emails, and recognizing the similarities, you can save yourself a lot of headaches and testing time.
  • Part three walks you through mobile client rendering issues.Differences between device manufacturers, operating systems, screen sizes and email applications can all impact how your email will render on a mobile device.

ADDITIONAL RESOURCES

GET THE LATEST DELIVERED STRAIGHT TO YOUR INBOX

Want to get more tips and advice like this? Subscribe to our newsletter and get the latest content for email marketing pros delivered straight to your inbox.