You just spent hours creating a beautiful Email with an important message. When you test sent the message to your Email client program, like Gmail or Microsoft Outlook, everything looks fantastic. Yet shortly after you send out the Email blast, people contact you complaining that it was hard to read. What happened?
The key to understanding this problem is noting that the HTML that is behind your Email is not rendered the same on different Email clients. The main reason for this is the viewing of Emails is a different experience than browsing a website. For example, Email clients need to help you quickly scan through your Inbox full of messages. Tweaking the display of Emails has been continuously changing over time, with the end result being a wide disparity of experiences on the various Email clients.
To get a grasp on this problem it is important to understand how your target market is viewing emails. The EMail Market Schare website shows the below as its ranking in November 2018.
Emails issued from EventRebels is mostly related to conferences and trade shows and strongly trend towards being B2B in nature. As the below graph shows, the phone usage for B2B Emails is much lower than the prior graph, which seems to be a lot more oriented to consumers.
For the large desktop share of this graph, Outlook dominates with almost 80%. On the other hand, Gmail represents 90% of our webmail clients.
What this data seems to imply is if your target market is consumer, then your Email is more likely to viewed on a mobile device than if you are targeting the business market.
You can preview your emails on different clients by using tools such as Litmus and Email on Acid. However, these tools have a recurring monthly charge and, by nature, require a great deal of work on your end – namely looking at your Email on dozens of clients. Your life can be simplified (and money saved) if you consider some of these major reasons why the various clients may render your Email differently.
- Many Email clients do not import CSS files. CSS is the part of the HTML that specifies your page display – such as fonts, colors, indentations and forth.
- If you have to use CSS, consider using inline CSS which does not require importation. This is more likely to give you the results you desire.
- Since clients are focused on the needs of Email, this will often result in renderings that are unlike web displays. The most important things to Email clients are such things processing incoming Emails, previews, ease of use, managing spam and so forth.
- Email clients need to remove anything that may be dangerous (preprocessing the HTML) such as JavaScript, loading external content, embed tags, and so forth.
- A link to your Email as a web page may be a good work around for Email clients that are not rendering your Email properly.
- Email clients may not show images by default. This setting is mainly to block images from hostile spammers. However, blocking images means that if the main part of your message is in the image, they reader will not see it and so may delete the Email before your primary message is conveyed. For this reason, use images to complement your Emails and not to display critical text.
- Use alt text for your images. This is an HTML tag that allows you to provide text that describes the image. This has a couple of advantages. First of all, if your image is blocked, at least the alt text will be shown. Second, accessibility tools rely heavily on alt text, so use of this will help you meet ADA compliance requirements.
- Do not use background images for your Email as many browsers will not display them correctly.
- Animated GIFs do not work on Email clients such as some versions of Outlook.
- Mobile clients render differently than web clients. To add to an already complicated situation, clients like Gmail will actually show Emails differently on the phone than on the desktop.
The bottom line is this: do not design your Email like a web page, but as an Email. You should design your Email with the baseline of the least advanced Email clients. This will improve the odds that your Email looks beautiful to all your target recipients.
