Say It With Style(s)

by Wendy Roth

Email marketers love sending messages with HTML. Email messages in HTML are more attractive and compelling. They also look professional and authentic—legitimate messages from legitimate organizations.

The catch is, email looks better in HTML only if the HTML renders correctly in the recipient’s email client or reader. If the HTML looks wrong, the message may just be ugly—or may be completely unreadable. And if the message is unreadable, it’s at best useless. At worst, the recipient may think it’s spam or a phishing attempt and report your mail to the ISP.

The chances that your HTML email won’t look right increase if you are using Cascading Style Sheets (CSS) for your email.

Web designers love using CSS, because it gives them much more control over the look and feel of a website. When used in email, CSS can make your messages look almost identical to your website. Theoretically, at least.

But in practice, email and style sheets just don’t get along, or at least not consistently.

We tested three pieces of similar content against thirty-six email clients, both web based and desktop. The first test used an internal style sheet: all styles were specified within the email message. The second used an external style sheet: the style sheet was separate from the message, and hosted on our website. The third test used inline HTML coding to control the appearance of the text.

Although many email clients display styles correctly, the majority flunked.

With an internal style sheet, twenty out of thirty-six email clients displayed the content exactly as coded. Four did not displayed the link colors as coded. But that leaves twelve where styles were completely ignored. And in the case of this sample, no styles meant the message title was illegible.

When the style sheet was external, the results were even worse. Only fourteen clients displayed the content as coded; nineteen ignored the external style sheet, and three had some errors.

HTML with inline font codes rendered best in nearly all clients. Just two clients displayed the content incorrectly and in both cases, the errors did not make the content unreadable.

Typically, it’s the web-based email readers—Gmail and Hotmail—that had the most trouble with styles in our tests. These email readers need to “wrap” the HTML of the message inside the formatting of its web pages, and apparently that’s too much for them.

Email readers that the user runs locally, like Outlook, are most likely to render the messages properly. Surprisingly, some email readers that historically have had problems with HTML, such as AOL and Lotus Notes, were able to display all three versions of the content without problems in their latest versions.

Inline HTML is more difficult for many designers to code, and you can’t achieve mouseovers and other effects like you can with style sheets. But what it lacks in bells and whistles is more than offset by the consistency of results. Use style sheets on your website, but stick to inline HTML for your email. And as always, test your content thoroughly on a range of email clients to make sure your message looks just the way you want it to look.

Contact us at editor@lyris.com to share your ideas. We may include it in the next issue of Making Mail Work!