May 7, 2009

Switching transactional emails from plain-text to HTML email

html-twitterI just noticed that our Twitter "follow notifications" are in HTML email format instead of the old plain-text format (cnet noticed too). HTML email has many advantages over plain-text, so whenever companies make this move, they tend to go nuts with all the bells and whistles, just because they can.

Twitter did a much smarter job (imho), by showing restraint and focusing on usefulness. Here’s what I mean…

This is what the old plain-text notification looked like, whenever we got a new follower:


Not all that bad, but if I wanted to know more about this @sugarpixel person, I’d have to click that link, open up a browser, wait for twitter to load, and then read their profile info. After a while, this gets pretty tiresome, so I created a mail filter to just throw all twitter notifications into a folder and mark them as read.

This is the new HTML email version of twitter’s transactional email (click for a full-size version):


This is a huge improvement, because:

  • I can see the follower’s avatar, and make a snap (okay, superficial) decision on whether or not I’m interested in seeing their full profile. For example, if they haven’t customized their avatar, and are just using the default twitter icon, I’m not interested. Also, some avatars look spammy (pics of gold, cash, etc), and some look genuine.
  • I can see their stats, like followers, updates, and following. As I understand it, some people follow people strictly because they also have lots of followers, so that they can in turn get followers. Or something like that. I don’t have time for games like that, but I do look at the numbers. If someone’s got a ton of followers, maybe they’re interesting, and maybe I’d like to follow them too.
  • The design isn’t "heavy." This doesn’t feel like a ginormous, 200k download. I have no idea what the actual file size this email is, but it doesn’t "feel" gratuitously bloated. That’s very important if you send emails that people potentially receive multiple times every day (like news/fare alerts).
  • It’s easy to read and scan. Notice their use of font colors and lots of white space and padding. For example, most text is black, but the numbery stats are lighter gray. Very easy on the eyes.
  • Neat that they made the width of the email fluid (instead of fixed size). It’s not necessary, but stuff like this shows extra craftsmanship and design planning not always seen in HTML email.
  • They appear to be using Google Analytics to track the traffic from these emails.

More important is what twitter did NOT do, which I’ve seen happen way too often when companies redesign their transactional messages. I’ve seen horrible additions, like:

  • 120×600 "skyscraper" banner ads in the side column ("now that it’s HTML email, we can sell ads!")
  • Way-too-large header logos with useless photography
  • Fonts and font colors inappropriate for screen reading. For example, HTML emails allow you to use font formatting to distinguish headlines from paragraph text. I’ve seen some companies who make the switch from plain-text to HTML keep using the plain-text tactic of using ALL CAPS for headlines.

If you focus on what your customers want (and how they use your product), HTML emails can make your transactional messages much more useful (and used).