Everything you need to know to make a great HTML email

In the past year I’ve went from an HTML email novice to an expert. I’ve created a TON of HTML emails and have even went so far as to create my own program for mass mailings (a very simple implementation of phpmailer). Here’s what I’ve learned from diving into them:

• Forget Standards – Standards based design is great, and I practice it on most all of the websites I create. However, email is not really the place to do so. There are so many different mail clients, with so many different exceptions, that to achieve the best aesthetic results, you’ll need to bite your tongue and go against the W3C(Oh the humanity! 😉 ).
• Body only – Although you can leave all the other tags in, it’s likely that your recipients mail client will strip out everything that’s not inside the body tag (gmail anybody?).
• CSS – Inline is the best way to ensure that your emails come out looking the way you intended. Try to put all of your styles inline, otherwise you risk having them stripped out by your recipients mail client. Webmail clients are especially known for removing linked & embedded stylesheets. They do this to prevent your styles from screwing up their webmail layout and to prevent any mischief from emails sent with ill-intent.
• Embedded CSS -If you use embedded styles, make sure you place them within the body tag. Some webmail clients, gmail specifically, will remove everything outside of the body tag, so it’s best to include your styles within the body tag. I usually save embedded styles for things such as hover states. That way, if the embedded styles are removed, there’s not much lost.
• Linked CSS – You can try this, but it’s probably not going to work and is more likely to get your email flagged as spam.
• Use Tables – Yeah, there is support for DIVs in many email clients. However, to get the best looking email through all clients (even the monster known as Lotus Notes), you’ll be best served to use a table-based layout. Plus, some clients remove your padding & margin styles (regardless of if it’s embedded or inline), so a table will help keep items spaced appropriately.
• Don’t Overuse Tables – Remember, you’re developing for a format that is very easy to break. If you had to choose between using a complex table layout or adding a few Kb and using just a solid image, go with the image! Saving 1-2Kb is worth not having to deal with nested tables.
• <BR> – Don’t use <br/>, use <br>. Some email clients ignore <br/> completely.
• Alt Tags – images are usually disabled by default, so make generous use of the Alt text. Doing so can mean the difference between getting a conversion and losing a subscriber. Also, remember that in Thunderbird (and other clients I’m sure), your CSS can format alt text. So, test out your email with and without images.
• Lotus Notes – Your HTML emails will never look as great in Notes, don’t sweat it.

If you have any questions, comments, or would like a quote for your email, just leave a comment or contact me directly.