The Holy Mail

Updated Once
Latest Greatest (8/27/08)

I have been working on an email template to use for a future design tool. Emails, if you don’t know, are not as easy to design as web pages. They are viewed in a wider variety of clients. Some of these clients are downright evil. I feel like I have come up with a scalable and strong email template that has really good flexibility. It took me all day to design, test and tweak. I kept a loose journal of my adventures. Here are some of the highlights:

  1. Outlook 2007 actually has a little more CSS support than I thought. Just because I don’t get positioning and float and a decent DIV or the right box model or margins, doesn’t mean that I can’t still make it work. Using a couple of tables, borders, padding and width, I think I came up with a solid solution that still looks like clean html.
  2. I refuse to use spacer.gif. Spacer.gif can kiss my shiny metal ass. Boo spacer! As a side note, I sometimes interview web developers for positions. I look at their html. If I see spacer.gif I say, “Nope, they stink”. Sorry, it’s a pet peeve.
  3. Opening up your email html in Word 2007 is NOT the same thing as opening up your html as an email in Outlook 2007. They are really really close, but they have differences. I kept seeing them, so I stopped trying to use Word 2007.
  4. There is a bug in Outlook 2007. If you have a table, and each cell has padding of 10px and then you put a cell in the middle to be 0px, it shortens the height of the cell and basically makes a HOLE in your table. I was dumbstruck by this one. It seemed impossible to do, but it does it. The fix is to keep the padding on top and bottom, but remove left and right. The bug is related to height, not to width. It shortens vertically, but not horizontally.
  5. Gmail is evil. They only allow inline CSS. They do this to avoid overlapping CSS rules. They could have dealt with overlap CSS rules using a rewrite scheme that put a prefix in front of all the classes. It just made the html really messy. I did my best in my template above to make it clean. But still, that’s lame.
  6. Gmail strips all height css rules. Why height?? What did height ever do to them? I got around this problem using padding, but in the dynamic app, it means we need to calculate specific padding rules based on the height the user requested minus the height of existing content. Not trivial, but doable. Why does Gmail allow width? What’s the deal with height?
  7. Borders can not be defined as 0px width. In Outlook 2007, if you declare a border as 0px width, it shows up anyway. I couldn’t figure that out, so I said, “Ok, I won’t do that.” I saved an example which works in the browser, but not Outlook 2007.
  8. Divs can have borders, but not padding in Outlook 2007. Why not Microsoft? Come on, work with me here. Meet me halfway. YUCK!
  9. UPDATE: Hotmail is unhappy with inline commenting in the style attribute. Took them out. Additionally, text-align: left is required in Hotmail. Not sure why.

Some reference material:

Tested so far in:

  • Gmail
  • Outlook 2007
  • Outlook 2003
  • Yahoo Mail
  • Thunderbird
  • Hotmail (new)
  • Windows Mail (Vista)
  • Windows Live Mail Desktop (Vista)
  • Eudora
  • iPhone
  • Lotus Notes 8.0
  • Apple Mail

I need to check mobile devices and lotus notes, AOL and some others. I hope it’s helpful to some of you.

31 thoughts on “The Holy Mail”

  1. Indeed, designing an email is much different than designing a web page. At my previous employer I was responsible for all of our email marketing campaigns, so I was well aware of the evil tricks email clients play on html emails. We used an email service provider Bronto, and they were very helpful in providing insight on what to expect from the different clients. This isn’t just a shameless plug for them, they really were a valuable resource as I’m sure other email service providers are. The main lesson to be learned – test the email in every client your contact list might be using within reason.

    Spacer.gif can kiss my shiny metal ass.

    Amen, brother, amen.

  2. I’ve always hated Spacer.gif

    Using TextMate to do HTML email really really helps. I made a nice “Email this” command to email the current HTML file to my test addresses. It also helps to have Parallels on a mac with Outlook 2007 & Outlook 2003 installed.

    Inline CSS is indeed much hated. But you do what you gotta do :'( It REALLY fixes a lot of inconsistencies across the board though so it’s totally worth the effort.

    The Gmail team surely could have done much better. Even Yahoo Beta does a better job (sometimes).

  3. Hey, nice job – this should help out a lot of people… myself included!

    Like the first commenter, I’m not meaning to shamelessly plug anything either, but the folk over at Mailchimp have also come up with a seemingly infallible Outlook 2007-friendly template: their version uses the attribute (embedded inside the ) instead of inline css, and uses table cellpadding to get around the lack of css padding support you mention.

    I’ll soon be testing their template to an audience of about 10,000 opted in customers, so we’ll soon see how many complaints come back! I suspect it’s still Lotus Notes which gives us the most headaches.


  4. There is another prob with MS Outlook/OE concerning the CSS-Support. If you use line-height without an unit, e.g.
    p { font-size: 1em; line-height: 1.2; } it causes the layout to break.

  5. @James: The only reason to put styles inline is Gmail. They ignore all classes. I really wish they would just decorate them with prefixes or something. It seems a draconian measure for a simple problem.

    @Oussama: The template I made is pretty flexible. Try changing the css styles for borders, paddings, background-colors. You can make a pretty rich email that looks exactly the way you want it.

  6. Ah yes, you’re quite right of course. I’ve now realised that the Mailchimp templates I was referring to actually use some cunning scripting to convert everything inside the STYLE element into inline css after you commit changes using their system.

    On another note, using negative margins seems to produce some unpredictable effects in various clients.

  7. mate. you’re a legend. I often thought of doing this myself but always gave up when i thought of all the pain i would experience. props to you for taking the pain for all of us!

  8. I designed an email template for a client based on this info. It looks groovy cool coming from my machine. However, when she installs the template and brings it up, MS Word changes all the font sizes to a smaller size than defined in the inline styles. Of course she could turn off the ‘use MS Word for editing email’ option when using this template but that seems to be a bit of a pain.
    Has anyone else had similar issues? AND most important, do you have a solution?

  9. When you say “Installs the template”, I am not sure what you mean. What email program does she use? What is her process for installing the template? How is it different than your process, where it works?

    I haven’t actually tried to install it as a “template” in Outlook. I have been using it on the server of our application to send emails. You can email me at glen() to troubleshoot. Send me the working and the non-working.

  10. A follow-up on this… *if* you use your lovely html template to send a message through Outlook and the ‘use MS Word for editing email’ option is turned *on*, then do NOT use px to define widths or font-size. Use pt instead.
    Thanks Glen for your help on this!

  11. Pingback: ??? » 2007?9???
  12. Hi Glen, thanks for this post and the hard work involved here.
    I’ve been really stumped by Outlook 2007 myself recently, but my problem has been with the use of images.
    Everywhere renders happily, except 2007 which puts giant chunks of white space between the images.

    Still searching for useful fixes!

Leave a Reply