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
    • 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.


5 responses to “Email Best Practices”

  1. Jörn Zaefferer Avatar

    Thanks for updating that once more!

  2. Frank Ramage Avatar

    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!

  3. David Avatar

    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?

  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.

  5. Matt Avatar

    Good work. What is spacer.gif? Something else that might help testing is the You can do a free test which is useful for templates.

Whatya think?

%d bloggers like this: