The Holy Mail

By | September 29, 2007

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 2.0.0.6
  • Hotmail (new)
  • Windows Mail (Vista)
  • Windows Live Mail Desktop (Vista)
  • Eudora 7.1.0.9
  • 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. Gabe

    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.

    Reply
  2. Pingback: The Holy Mail » Chris Norton

  3. Pingback: Javascript News » Blog Archive » Search for the Holy Mail (template)

  4. Pingback: F-LOG-GE » Blog Archive » Das optimale Template für HTML-Mails?

  5. Thomas Aylott

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

    Reply
  6. James

    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.

    James

    Reply
  7. James

    sorry I meant to say STYLE element embedded inside the BODY – got cut off because I used gt and lt symbols…

    Reply
  8. Matthias Koch

    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.

    Reply
  9. Pingback: Designing Email with Compatibility, Image Suppression and Mobile Devices in Mind (Oy Vey!) : The Messaging Times

  10. Glen Lipka Post author

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

    Reply
  11. Pingback: links for 2007-10-08 | Patrick Kempf

  12. James

    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.

    Reply
  13. Pingback: Nachlese September 2007 - Die Seiten des Monats | Nachlese

  14. Pingback: Best of September 2007 | Best of the Month

  15. stu foster

    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!

    Reply
  16. Pingback: Funky Penguin News » Blog Archive » Best of September 2007

  17. Pingback: Fatih Hayrio?lu’nun not defteri » 18 Ekim 2007 Web’den Seçme Haberler

  18. Janice Tocher

    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?

    Reply
  19. Glen Lipka Post author

    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()kokopop.com to troubleshoot. Send me the working and the non-working.

    Reply
  20. Janice Tocher

    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!

    Reply
  21. Pingback: ??? » 2007?9???

  22. Pingback: Cross-client HTML Email v2 | commadot.com

  23. Pingback: Online Marketing Blog » Blog Archive » 42 HTML email design resources

  24. Adam

    We have had similar issue’s with our templates over at http://www.e-shotuk.co.uk. We invested alot of time and money to get ours to a point where they work in as many e-mail readers as possible. You’ve got my sympathy though with all the testing. Very time consuming.

    Reply
  25. George Smith

    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!

    Reply
  26. Pingback: The Holy Mail (The Holy Grail of HTML Emails) | Svend Koustrup

Leave a Reply