I received a clever notepad for Christmas from one of my favorite web-based paper companies, KnockKnock.biz.  Knock Knock’s pads, post-its and other paper-based products are incredibly smart, clever, witty, and downright useful.  My one issue with these incredibly funny products is that they are paper-based leaving their use incredibly limited (though, when appropriately timed, incredibly hysterical).

Meanwhile, several months ago, I bookmarked Apple, Inc.’s developer page on creating HTML email templates for its Apple Mail program thinking that “one of these days” I’d get around to seeing how easy creating a template or two would be.

Knock Knock's ‘Obscenely Important Memo’

As I was cleaning up the Christmas carnage yesterday, new Knock Knock “Obscenely Important Memo” pad in hand, the idea struck me that this would be the perfect test case for creating an Apple Mail template. All I needed to do was scan a sheet from the pad and my artwork was complete.  With that out of the way, I could focus completely on learning the nuances of creating a template. (Full disclosure: I did not have Knock Knock’s permission to use their artwork, but I figure since I’m not going to sell the Knock Knock template, they wouldn’t mind.  And, if I was successful, I have given them a potentially new product stream.)

From the outset, I knew that pretty much 99% of all email programs completely thumb their noses at web standards-based coding practices, which makes creating an HTML email template a nightmare.  Throwing years of coding best practices out the window, I reverted back to my late-90’s/early-2000’s HTML table-based design sense and got to work.  I also know that there are at least 25 different email applications widely used throughout the world today.  This makes designing a complex email template (like the Obscenely Important Memo) that will look correct in multiple email applications a difficult task.  But I like a challenge.

Hours later, I emerge victorious with a working template!  It is now time to test in a variety of email programs.  I send a test message to an Apple Mail account, a Yahoo! account and a Gmail account. The results are below.

The results are these:

• Apple Mail: renders the message correctly (not surprising since it was designed for Apple Mail);
• Yahoo!: renders the message correctly (pretty surprising to me);
• Gmail: renders the message incorrectly in Safari (surprising), but renders the message correctly in Firefox

Screen shots from Apple Mail, Gmail, and Yahoo! mail

With 3 email applications down and potentially 22 more to go, there’s more testing to be done!  This is where I need your help. If you use any other email program besides the 3 I list above and are interested in helping me test, send me a message.  Your responsibilities are minimal. You will:

• Need to supply a working email address;
• Let me know what email application and version you are using;
• Be able to take a screen shot of how the email appears

And that’s it!