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.

Don’t forget Thunderbird and Entourage!

[...] Glen Lipka goes through some of his discoveries for developing the ultimate email template. [...]

[...] Anyway, Glen thinks that he nailed it: [...]

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

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

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

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

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.

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

I want to create another email

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

[...] The Holy Mail Das perfekte Template für einen HTML Newsletter (tags: email template) [...]

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.

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

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

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!

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

[...] Mailing haz?rlarken dikkat edilecek hususlar. Ba?lant? [...]

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?

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.

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!

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

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