HTML E-mails!

I’ve only recently found out how bad the rendering engine was for the various e-mail clients for supporting HTML e-mails. Although in the browser space things have been progressing, probably due to the higher demand of properly rendered pages, the e-mail client however, had not fixed the majority of their problem, especially the odd handling of even the most standard CSS tags. This is appalling!

Some reference for developers.

CSS support in email clients
www.campaignmonitor.com/css/

A Guide to CSS Support in Email: 2007 Edition
www.campaignmonitor.com/blog/archives/2007/04/a_guide_to_css_support_in_emai_2.html

Email Standards Project (the following links to the notes page, primarily because the world outside notes don’t care about notes…)
www.email-standards.org/clients/lotus-notes-8/

This has given rise to the very common Single JPEG eDM – one huge jpeg image embedded in a HTML that says only one thing, like “if the following message doesn’t display correctly, please click here”. That sucks – because that’s basically pushing an eDM to someone who won’t even glance at what you have. Based on my own tendency, it would be to directly delete the email (especially if the email title doesn’t make the cut, and that has been the fate of mailers for many arts/music events.

The more sophisticated ones drill down to the last HTML detail and try all their might to make it compatible while minimizing images, knowing that most email clients disable images by default. This works in forcing me to quickly glance at what the email is about, in case I’m interested. But the images were still an integral part of the email and the bad alignments due to the lack of images (including those corners and separators) makes it irritating.

I think we need to strike a balance. My own preference now is to have the one huge jpeg upfront, failing which a properly written text (also in HTML – this is not to replace the “plain text” portion of the email) with proper bolding of key points should follow. This way, those who’ve seen your nice jpeg would ignore the details below or use it as a quick way to copy and paste the details to their calendars, while those who disabled the images would see the crucial details anyway. On top of that, no alignment problems since most client handles the <p>s and the <img>s fairly consistently. CSS maybe, a light touch, for fonts.

Here’s an example:

From: Me <me>
To: You <you>
Subject: The Philharmonic Winds in Concert – 7 Dec 2008

The Philharmonic Winds in Concert
Date: 7 Dec 2008, Sunday
Time: 7:30pm
Venue: Esplanade Concert Hall
Tickets: $15, $20, $25, $35, $50 available at all SISTIC authorized agents. Click here to buy online.

See?