The Holy Mail
29
Sep
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:
- 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:
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.
26 Comments
Gabe
October 1st, 2007 at 1:17 am
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.
Amen, brother, amen.
Lux
October 1st, 2007 at 2:16 am
Don’t forget Thunderbird and Entourage!
The Holy Mail » Chris Norton
October 1st, 2007 at 1:45 pm
[...] Glen Lipka goes through some of his discoveries for developing the ultimate email template. [...]
Javascript News » Blog Archive » Search for the Holy Mail (template)
October 1st, 2007 at 6:50 pm
[...] Anyway, Glen thinks that he nailed it: [...]
F-LOG-GE » Blog Archive » Das optimale Template für HTML-Mails?
October 1st, 2007 at 9:03 pm
[...] Lipka hat sich lange mit der Horroraufgabe beschäftigt, HTML-Mails zu erstellen. Er bietet uns ein Template an, das auch in Outlook 2007 gut funktionieren soll, und das obwohl Outlook 2007 ein Rückschritt [...]
Thomas Aylott
October 2nd, 2007 at 12:35 am
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).
James
October 4th, 2007 at 10:56 am
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
James
October 4th, 2007 at 10:59 am
sorry I meant to say STYLE element embedded inside the BODY – got cut off because I used gt and lt symbols…
Matthias Koch
October 4th, 2007 at 1:01 pm
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.
Designing Email with Compatibility, Image Suppression and Mobile Devices in Mind (Oy Vey!) : The Messaging Times
October 4th, 2007 at 5:27 pm
[...] mobile email growth, iPhone email design considerations and even a post that includes an actual email template that Glen Lipka designed which seems to test well across most clients. Glen is a NY Jets fan. As a [...]
Oussama Hassouna
October 7th, 2007 at 4:42 pm
I want to create another email
Glen Lipka
October 7th, 2007 at 6:45 pm
@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.
links for 2007-10-08 | Patrick Kempf
October 8th, 2007 at 12:21 am
[...] The Holy Mail Das perfekte Template für einen HTML Newsletter (tags: email template) [...]
James
October 9th, 2007 at 10:48 am
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.
Nachlese September 2007 - Die Seiten des Monats | Nachlese
October 9th, 2007 at 6:07 pm
[...] The Holy Mail Das Software-übergreifende Design von E-Mails wird in der letzten plötzlich zu einem allgegenwärtigen Thema. Neben Galerien mit Newsletter-Designs gibt es mittlerweile auch Tools zum Testen von Newsletter-Designs. Dieser Beitrag liefert eine optimale Vorlage für HTML-E-Mails, die in einschlägigen Mail-Clients wie etwa Gmail, Outlook 2007, Yahoo Mail, Hotmail, Thunderbird, iPhone u.a. korrekt angezeigt werden. [...]
Best of September 2007 | Best of the Month
October 9th, 2007 at 7:14 pm
[...] The Holy MailRecently newsletter design is becoming more and more important. There is a showcase of newsletter-designs and professional solutions for testing newsletter-designs on cross-browser-compatibility. This article present a bulletproof template for HTML-E-Mails, which are displayed identically among popular mail-clients and services such as Gmail, Outlook 2007, Yahoo Mail, Hotmail, Thunderbird, iPhone etc. [...]
stu foster
October 10th, 2007 at 12:04 pm
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!
Funky Penguin News » Blog Archive » Best of September 2007
October 11th, 2007 at 6:53 am
[...] The Holy MailRecently newsletter design is becoming more and more important. There is a showcase of newsletter-designs and professional solutions for testing newsletter-designs on cross-browser-compatibility. This article present a bulletproof template for HTML-E-Mails, which are displayed identically among popular mail-clients and services such as Gmail, Outlook 2007, Yahoo Mail, Hotmail, Thunderbird, iPhone etc. [...]
Fatih Hayrio?lu’nun not defteri » 18 Ekim 2007 Web’den Seçme Haberler
October 18th, 2007 at 12:48 am
[...] Mailing haz?rlarken dikkat edilecek hususlar. Ba?lant? [...]
Janice Tocher
November 12th, 2007 at 2:54 pm
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?
Glen Lipka
November 12th, 2007 at 3:04 pm
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.
Janice Tocher
November 14th, 2007 at 12:10 pm
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!
??? » 2007?9???
November 16th, 2007 at 9:55 am
[...] The Holy Mail Recently newsletter design is becoming more and more important. There is a showcase of newsletter-designs and professional solutions for testing newsletter-designs on cross-browser-compatibility. This article present a bulletproof template for HTML-E-Mails, which are displayed identically among popular mail-clients and services such as Gmail, Outlook 2007, Yahoo Mail, Hotmail, Thunderbird, iPhone etc. [...]
Cross-client HTML Email v2 | commadot.com
May 16th, 2008 at 10:02 am
[...] As previously posted 6 months ago, I had been working on a solid design for HTML emails that would work in every client. The design of that email worked pretty well. However, since then, I kept getting asked to do the impossible. Rounded corners, curved strokes and shadows. As mentioned, Outlook 2007 doesn’t support positioning and doesn’t support background-images. This combination makes it really really hard to create a decent design. [...]
Online Marketing Blog » Blog Archive » 42 HTML email design resources
August 30th, 2008 at 10:36 am
[...] The Holy Mail: Glen Lipka’s universal template, which also has an update. [...]
Adam
September 5th, 2008 at 4:15 pm
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.