Email

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.

General News
In a Nutshell
General News
Political Growth
General News
Genetic Engineering
  • Dave

    DaveDave

    Author Reply

    This isn’t targeted toward me or anything is it? 🙂


  • Zach

    ZachZach

    Author Reply

    lol, no just needed something to write on. I create several html emails every week, so it’s something I’ve grown pretty knowledgeable about. 🙂


  • José

    JoséJosé

    Author Reply

    Hi. Very interesting article. What I’d really like to know is what software do you use to create the email message itself. I mean, I use Dreamweaver to create the HTML but I really don’t know how create the email based on that HTML. Can you help, please? Thanks.

    JM


  • Zachary

    ZacharyZachary

    Author Reply

    Hi José, once you’ve created the HTML you’re pretty much done, you just need a way of sending it out properly. Personally, I wrote a small test-app using the open-source email library, PHPMailer.

    But, there are free web applications out there that you could use as well. One such app is Pommo. It has a pretty widespread userbase.

    Or, if you wanted to pay for the service, there are companies such as Campaign Monitor that will send your HTML emails for you. Campaign Monitor in particular provides a number of great features(e.g. blacklist monitoring – neither of the previous options I provided have this).


Leave a Reply