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:
- 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.
- 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.
- 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.
- 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.
- 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.
- 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?
- 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.
- Divs can have borders, but not padding in Outlook 2007. Why not Microsoft? Come on, work with me here. Meet me halfway. YUCK!
- 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:
- CSS Support in web clients
- Microsoft Reference for Outlook 2007. Invaluable! I could not have done this without it.
- Blog about how Microsoft took us back 5 years (at least). Although I agree with the whole article, I found that, once I rolled my sleeves up, I could slog through it. The first step is forgetting that browsers are much better.
Tested so far in:
- Outlook 2007
- Outlook 2003
- Yahoo Mail
- Thunderbird 18.104.22.168
- Hotmail (new)
- Windows Mail (Vista)
- Windows Live Mail Desktop (Vista)
- Eudora 22.214.171.124
- 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.