Monday, October 1st, 2007

Search for the Holy Mail (template)

Category: CSS, Email

Glen Lipka has been frustrated with the task of producing quality HTML email that works across various email clients, which of course got even harder when Outlook 2007 took email design back a few years.

Anyway, Glen thinks that he nailed it:

  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!

Glen Lipka\'s Email

Posted by Dion Almaer at 7:05 am

3.3 rating from 19 votes


Comments feed TrackBack URI

Once again, some post messed up Ajaxian. That’s pretty lame.

Comment by Aaron — October 1, 2007

Or, we could just get rid of HTML emails? Gee, that would be an idea.

Personally, I hate HTML email with a passion. It is such a waste of time. If I wanted HTML then I’d go to a webpage. If you want to send me HTML, then send me an email with a link to your webpage. This way, I decide if I want to see your ad filled crappy email.

Comment by xxdesmus — October 1, 2007

As expected, Lotus Notes does not render this correctly.

Comment by bob manc — October 1, 2007

How can I test in Lotus Notes? QAnd where is the spec for supported html? Do people still use Lotus Notes?
I can try and fix it for Notes. :)

Comment by Glen Lipka — October 1, 2007

You can download a trial here.
I see they are on version 8 now. I tested it on 7.

We have had some customer tell us they are on Notes, and some on Eudora (not the Thunderbird based version). These are the two platforms that cause me the most headaches.

Comment by bob manc — October 1, 2007

Who cares, really? I’ve yet to receive a single HTML e-mail worth reading that benefited from the extra layout. I agree with what xxdesmus said; I would be be happy to get rid of all HTML e-mails.

Comment by Oskar — October 1, 2007

I know a few UK SMEs that still use Lotus Notes. Not mine thankfully, but a few others, including some large brand names which I won’t name and shame here.

Comment by Ben Bodien — October 1, 2007

This is not a discussion about whether to send html emails or not. For whatever the reason, some companies send them out. This is about the best way to deal with that fact.

Comment by bob manc — October 1, 2007

By the way. This looks good in both Eudora 7 (original version) and Eudora 8 (Thunderbird based).
Anyone tried Apple Mail (another problem client)?

Comment by bob manc — October 1, 2007

For all the haters of HTML email: learn to use your email client. If you’re using a decent one you can set your preferences to the plain text alternate of the email – no HTML.

If the provider does not include a plain text alternate then bitch to them about not following proper practice.

HTML email is not inherently evil, just like Flash is not inherently evil – it can be abused just like everything else.

Comment by Shawn — October 1, 2007

Oh, and this is great reference stuff. I’m finally getting around to fixing our templates for Outlook 07 and this is gonna help a lot!

Comment by Shawn — October 1, 2007

I just updated the template a little for Hotmail. They dont like inline comments, so I had to take them out. Plus they need text-align:left to specify left-alignment. So the current supported clients are:
* Gmail
* Outlook 2007
* Outlook 2003
* Yahoo Mail
* Thunderbird
* Hotmail (new)
* Windows Mail (Vista)
* Windows Live Mail Desktop (Vista)
* Eudora

I haven’t figured out how to test Lotus Notes yet. Yuck. And I need to get a litttle mac help.

Comment by Glen Lipka — October 1, 2007

* iPhone supported too. (no changes)

Comment by Glen Lipka — October 1, 2007

Lotus Notes supported. Might have been fixed with Hotmail fix.
I need to get that Mac Mini working.

Comment by Glen Lipka — October 1, 2007

As several have already stated, this is not a discussion of whether html email is “right”. It’s used, it’s a fact of life. I’ve had my job at risk for arguing with the marketing departments of the places I’ve worked for.

No amount of arguments will convince a marketing type that wants to send HTML emails out that it’s not good when they receive tons of them every day.

Comment by eduo — October 2, 2007 claims they will soon support Lotus Notes. It’s a browser cam for email.

Comment by Johan Sölve — October 4, 2007

Html email are just fine, if it is not broke why fix it

Comment by Aphrodisiac — July 30, 2008

Leave a comment

You must be logged in to post a comment.