Subscription: Absolutely free!

To Be Read

February 23, 2009

HTML Loves Email

I‘ll be the first to admit, as a developer, I try to avoid HTML emails. They suck. They go against all the proper lessons we’ve learned about Standards, CSS, Validation (the list goes on). We have to go ass-backwards to make our layouts look okay, including the use of tables (which translates to walking around a public area without any pants).

I’ve had to develop quite a few, and I thought I’d share the tips and tricks others have learned to make a layout stick. I don’t claim to have discovered any of this, I’ve just spent lots and lots of hours reading up on the subject. Much respect to those who deserve it.

Browser & Email Client Testing

Like any decent developer, the need to test, test, and test again is vital.

  • Before beginning to consider email clients, browser test first. Don’t worry about being as extensive as you would a true web site. I’ve found Firefox, IE7, and IE6 sufficient. Once you’ve worked out all the bugs, it’s a very strong likelihood your HTML will render pretty close throughout most email clients.

Once you’ve secured your layout in these browsers, time to jump in the mud pit. Time to test in various email clients. Always my favorite part! Sarcasm, yes.

  • Gmail. It’s Google. But don’t be fooled. The “G” name doesn’t mean you should put simple faith it’ll work fine without testing.
  • Hotmail. Microsoft. Yeah, test it.
  • Download Lotus Notes. It’s a train wreck, but still embraced by millions. Might as well test your beloved in it.

Markup

  • Include your print style not only inside ‹head›, but inside the ‹body› as well.
  • Do not add any inline styles to the ‹body› tag. You can’t have a body tag within a body tag. Instead, wrap your HTML up in a ‹div›. It might be extra HTML you don’t want to include, but you can consider it a ‹body› double (and extra insurance).

Fonts

  • Mac Mail has a keen choice of adding ‹font› tag around the entire email. This ensures beautiful Helvetica is seen by all. As a designer I want complete control over the font selection. Make absolutely sure to include font styles for every tag. You miss one paragraph, and Mac Mail will slap Helvetica all across your face.
  • Black text. As an insurance policy against myself, I try to keep all text black. If anything unforeseen occurs, my one constant will still be legible text. I’m not really sure how strict most developers are with this rule, but I’m throwing it in there based on personal experience.

Images

  • Always use ‹img› over background-color when possible.
  • A lot of people keep their images turned off. A beautifully designed HTML email will become null and void without your images. Nothing you can do about that. However, your job is to communicate, so make sure every image that needs a description includes alt.

Styling

Inline styles are your only hope. I really hate pointing this out, but it’s necessary. All your CSS need to reside inline, within each tag. After making my first pass through an email, all the inline styles make your code confusing as all hell. It’s worth organizing your inline styles and HTML like so:

‹td
    width="182"
    height="30"
    valign="bottom"
    style="font-family: Arial, Verdana, sans-serif;
        color: #000;
        width: 182px;
        height: 30px;
        font-size: 11px;
        text-transform: uppercase;
        text-align: left;
        margin: 0;
        padding: 0;"›

  • ‹float›. Don’t rely on it. It has support in Apple Mail, but other services like Gmail will strip it away. Stay far away.
  • >Background images. This can get you in a lot of trouble. While there is some support, it doesn’t work in Outlook 2007. I learned this the hard way. After all the development was done on an email newsletter, I released it to the wild. The next morning I received quite a few frantic phone calls from the client. Apparently the orange background image didn’t exist for quite a few people, and thus the white text also did not appear. What a lovely morning. Bottom line - anything and everything that absolutely doesn’t need text, I simply make and image. No backgrounds.
  • Javascript. Don’t get clever by adding Javascript. Most email clients disable JS altogether. Luckily you won’t be developing some insane newsletter that calls for the likes of jQuery. That’d be, you know, silly.

What about paper?

Printing out an email newsletter shouldn’t be frightening. There are steps designers can take to ensure none of their audience will hit any snags. For starters, read up on Eric Meyer’s introduction to print stylesheets.

The importance of space

Or lack thereof. It can be real easy to get all hung up on strange spaces within table cells. What the hell could be causing that? Chances are you’re simply maintaining clean code for your own sanity, which means you have line breakers between your table cell tags (td, tr, etc) and content.

Unfortunately you’ve got to remove all possible spaces between cells and content. It’ll make the code quite ugly, but it’ll also remove those extra spaces.

People Still Love Text-Only

Ironically, I’m still in the camp of text emails. Don’t know why. Maybe after spending so many hours in HTML and CSS, I like a little plain-text sanity at the end of the day. Always remember to include a text-version of your email. This can be often overlooked, and yet is one of the most important steps.

Other resources

Hey, this is by no means a finished list. Let me know if I’ve missed something. I’ll be updating this periodically as better tips emerge, and the face of email testing changes.

Just keep thinking like a web designer circa 1997 and you’ll be fine.

Clamoring






    
Body:

Preview

Somebody Might Say: