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


Comments

18 responses to “The Holy Mail”

  1. Gabe Avatar

    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. Lux Avatar

    Don’t forget Thunderbird and Entourage!

  3. Thomas Aylott Avatar

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

  4. James Avatar

    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

  5. James Avatar

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

  6. Matthias Koch Avatar

    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.

  7. Oussama Hassouna Avatar
    Oussama Hassouna

    I want to create another email

  8. Glen Lipka Avatar
    Glen Lipka

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

  9. James Avatar

    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.

  10. stu foster Avatar

    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!

  11. Janice Tocher Avatar
    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?

  12. Glen Lipka Avatar
    Glen Lipka

    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.

  13. Janice Tocher Avatar
    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!

  14. Adam Avatar

    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.

  15. Onetop Web Design Avatar

    This is very useful info. I am web designer and a client has asked me to do design html email. You provied some useful tips.

    Thanks

    1. Glen Lipka Avatar
      Glen Lipka

      Glad I could help. Make sure to check out the updated links at the top.

  16. George Smith Avatar
    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!

  17. Victor Del Prete Avatar

    Fantastic brother! May the sun shine upon all your code and bring you great wealth.

    Much love.

    Victor Del Prete

Whatya think?

%d bloggers like this: