The Complicated Nature of Email Rendering

Ever preview an email message before you send it and wonder why it looks so bad in Outlook or Gmail? Have you worked hard to get images and text to lay out nicely next to each other, only to have the message appear broken on your iPhone?

I get emails almost daily from colleagues and clients asking for help resolving these types of issues. Let me share five things that could be creating your email rendering problems and what you can do to fix them.

1. Let’s start with the desktop clients used every day to read your organizations messages. Those are the programs installed directly on your computer to send and receive email. To be blunt, there’s no consistency across email clients, whether you’re using Microsoft Outlook, Apple Mail, Thunderbird, Opera, Windows Live, or Lotus Notes. And it gets worse. Outlook, as an example, currently has five (five!) different versions being used by folks every day. From 2003 to the newest version (2016), each one of these has different ways of rendering the code that makes up your well-designed email message.
2. Then we’ve got web-based email clients such as AOL, Yahoo, Gmail, Office 365, Outlook.com (formerly Hotmail), and many more. These again have no consistency in how they read or display the messages your organization is sending. Unlike the web, there are no standards for how an email client displays the message elements you see every day such as tables, images, and text.
3. Let’s add in the different types of computer systems such as Windows, Linux, or Apple operating systems and the different versions of each of these installed in offices or at home. This adds another layer of complexity to how an email message may (or may not) display.
4. We can’t forget the array of mobile devices from the latest iPhone to a two-year-old Android device with a smaller screen and lower screen resolution. (Remember the first Kindle Fire?) In addition to the devices themselves, each supports different mobile apps. You’re probably starting to get a sense of the just how many outside influences are touching your email message before it gets to your supporter.
5. The fifth (!) possible culprit? The email service provider (ESP) you use to send your email message. MailChimp, Constant Contact, Emma, Luminate Online, Salsa, Engaging Networks, and Online Express are just a few of the 2 million ESPs in the world. Each of these ESPs applies its own internal coding changes to help your organization’s message be delivered to your audience better.

No need to do your own math. That gives us approximately 15,000 potential email renderings (and that’s being conservative).

Now for the good news.

Wonderful email rendering tools such as Litmus or Email on Acid exist to help you see what the message looks like before it lands in someone’s inbox. These tools give you a visual representation of what each email message will look like in the most popular email clients so you can quickly identify problems with the layout and fix them before someone sees the message.

Your email reports should tell you which email clients are being used most by your audience, helping to prioritize a fix for Gmail, Outlook, Yahoo, or on an iPhone as the most important.

For example, an image placed to the right of text on a message in Outlook may appear to squash the text down to a single word per line on an older iPhone as the content narrows. A full-width banner may break the layout of your message on a Samsung phone as content stacks.

If adapting the code to fix these layout problems seem overwhelming, Firefly is here to help. We’re in the business of testing and refining emails daily.

You can even learn more about how we test email in our Testing Policy.