commadot.com

Email Best Practices

Every few months, I find the time to update the cross-client html template. (Link removed)  Again, I used the returnPath tool to help me get a handle on best practices.  I improved it over the previous one in a few ways.  Here is a quick list of what I know:

  • SpamAssassin will give you bad marks for spam if you:
    • include the word “Dear” near the top of your message.  (Crazy, huh?)
    • make anything font: 0px.  (oops, I got rid of that)
    • send the mail from a long URL domain with 4 or more levels.
  • My template works in:
    • AOL 9
    • AOL Web
    • Comcast
    • Earthlink
    • Gmail
    • Lotus Notes 6.5.4
    • Mail.com
    • MSN Hotmail
    • Outlook 2003
    • Outlook 2007
    • Outlook Express 6
    • Outlook XP
    • Thunderbird
    • Virgin Media (UK)
    • Windows Live Hotmail
    • Windows Mail
    • Yahoo! Classic
    • Yahoo! Mail
  • Never use CSS classes, only inline styles
  • You can make a nice email with rounded corners if you are careful.
  • Shadows are possible if you know the exact height/width of the mail
  • Images as calls to actions are ok, but use alt= or title= to give them alt text.
  • There needs to be email rendering standards.

Making emails that work are really hard.  I hope this template helps people out.  It’s usually my most popular page on the blog.

Comments

5 responses to “Email Best Practices”

  1. Jörn Zaefferer Avatar
    Jörn Zaefferer

    Thanks for updating that once more!

    Reply
  2. Frank Ramage Avatar
    Frank Ramage

    Wanted to say thank you for offering this template… I used it as the basis for our new Community Events e-mail… safe to say I couldn’t have done it myself!

    Reply
  3. David Avatar
    David

    Thanks very much for your blog – great reference. This template renders in Gmail very nicely with the exception of a very thin, white stripe under the rounded corners at the bottom. Any ideas for how to eliminate this?

    Reply
  4. Glen Lipka Avatar
    Glen Lipka

    Something may have changed since I built this. (Aug, 2008) Is the problem in all browsers? If yes in Firefox, use Firebug to figure out what is happening. Is there a difference between the corners on the outside versus the column bottom corners? Unfortunately, I don’t have much time to troubleshoot.

    Reply
  5. Matt Avatar
    Matt

    Good work. What is spacer.gif? Something else that might help testing is the http://litmus.com/email-testing. You can do a free test which is useful for templates.

    Reply

Whatya think?