Has this ever happened to you? You’ve just spent hours perfecting your template in your email service provider (ESP), hit send, and are (obviously) expecting all recipients to see your email exactly as designed. But then you hear back from some concerned subscribers, saying their email just doesn’t look right – maybe the background image is missing, there’s not enough padding, or images are clipped. Why does this happen? Let’s talk about it.
HTML rendering is the culprit!
Regardless of which ESP you use to design your email (or even if you code it yourself!) it’s almost guaranteed that your message will look at least slightly different across various email clients. The way an email looks is dependent on the way the email client renders your email’s HTML. Even if you build your email in a drag-and-drop editor, your ESP converts it into HTML before it’s sent out. Each email client then parses the HTML and decides what and how to render it. Different clients have their own quirks: HTML elements aren’t recognized or styles are rendered differently. This is especially prevalent in old versions of email clients that are downloaded to a device (vs. accessed in a browser, and therefore kept up to date). Outlook, especially older versions, are some of the worst offenders.
In the case of Outlook, Microsoft Word is used to render the HTML, as Mailchimp explains in the article My campaign looks bad in Outlook. Microsoft Word is meant for print design and not email design, which results in emails displaying differently than intended. Klavyio provides further insight into the common types of display issues seen within Outlook in the article My email campaign looks different when viewed in Microsoft Outlook.
Why can’t ESPs just optimize for all email clients?
Great question, but it’s much easier said than done. It’s possible to write HTML that behaves conditionally, and optimizes based on the client that it’s opened within (e.g. use this HTML if opened in the most recent version of Gmail, and this HTML if opened in Outlook version 12.3.1). But there’s a catch: emails are limited in their maximum size, and popular clients (e.g. Gmail) begin clipping an email once an even lower limit is passed.
Because some clients, like Outlook, have hundreds of past versions that could be running on a recipient’s device, and optimizing for any one of them requires significant conditional HTML additions, optimizing for all potential clients is an impossible challenge. All ESPs therefore have to prioritize certain clients over others in the way that they optimize a template’s HTML. Making changes to the DNA of an ESP to optimize for a particular version of Outlook would mean removing an optimization for a different client like Gmail, that is likely (much) more widely used.
What can you do?
You can use an email template testing service like Litmus to see how your template will display across all email clients (to get a holistic idea of how your subscribers will see your emails). This is quick and requires sending a test email from your ESP to a Litmus test email address, which gives you a chance to make changes to the template if you’d like to make optimizations for a certain email client on your side. That said, optimizing for specific versions of email clients that are not commonly used or that have a reputation for displaying HTML in strange ways is not recommended. Most email elements will not display exactly the same in every possible email client.
It’s worth nothing that when an issue occurs on common or recent versions of an email client, or across lots of versions, you should bring it up to your ESP. Any widespread issue should be fixed! As uncomfortable as it is, the better choice in most cases is to ignore certain versions of an email client to optimize for more common email clients – the ones that most of your subscribers use and are likely viewing your emails with!
This article was originally published by our friends at Hive.co
