Tips For Coding HTML Email

Jim Basio, ON THE TOPIC OF Tips and Tricks

Mar26 7

For many, designing and coding for emails can become a frustrating task. With so many different types of email clients that each seem to follow distinct standards, many hours can be spent just to figure out what works. Luckily, there are great resources available for reference.

The following list contains both css and html tips to ensure your HTML emails look great when delivered!

Great general overview for HTML emails. LINK
Campaign Monitor offers an excellent guide to email CSS support that covers both web- and desktop-based email apps. LINK
Premailer is a good tool for checking inline CSS in your email template. LINK
The Email Standards Project works to improve web standards support and accessibility in email. They have also put together the Email Standards Project Acid Test. LINK
A great Flickr group with people showing just how frustrating creating HTML emails for Gmail can be. LINK

Additional resources:

Aaron Kuzemchak said on 03/26 at 04:11 PM

I’ve had to develop quite a few HTML e-mail templates at work lately, and I’ve found that simply giving up control and using Dreamweaver’s WYSIWYG mode with table layouts will get the design to look correct in most of the major e-mail clients.

Yuck… never thought I’d be praising something that feels so amateur!

Josh Harbaugh said on 04/03 at 08:21 AM

I’ve been working with HTML emails for quite awhile now. Hotmail and GMail are the worst I think. They give me the most trouble, but I’ve found if you use tables (or divs with inline styles for everything) you’ll be alright most of the time.

A good email campaign with the function to send “tests” to multiple addresses has been a life-saver for me. Hate to send out $100,000 email and half of the viewers can’t view it right.

Jim Basio said on 04/03 at 10:36 AM

I’ve found Outlook 2007 and Gmail to be the toughest to work with. Using table layouts w/ inline styles and plenty of testing has proven, from my experience, to be the most successful.

It’s unfortunate that coding for email has taken a step backwards by having to be limited to table-based layouts. Hopefully w/ groups like The Email Standards Project working to improve web standards support and accessibility in email, the headache of coding HTML emails will be lessened.

Zach Katkin said on 04/03 at 12:26 PM

I think the use of Word to render emails by outlook 2007 was a bad move. I’ve found the same thing as Jim. Sometimes it is too easy to forget - if you are using another mail client or firefox and testing the emails within a web based email system - that many CSS elements simply won’t work on popular systems. Tables are a necessary evil in this case!

Doug Avery said on 04/04 at 04:25 AM

I’m not one for Microsoft-bashing, but the use of the Word rendering engine is one of those decisions that seems deliberately evil. Why would you give the most popular email software on the planet a rendering engine that breaks most of the emails the previous version (and competitors’ programs) had no problem displaying? It’s like a reverse browser war; instead of adding features on top of a backwards-compatible core, they’re stripping out the core and telling us to deal with it, just because they can.

< / rant >

Chloe Edwards said on 04/05 at 08:24 AM

Hello,
I want to start things off by saying i just commented on a blog competition blog about how much i like the design of you blog, i love the ‘painted’ style feel to it, really different.

Also thanks for the links, having worked on email newsletters over the past couple of years, i can agree that coding html with css is a nightmare with regards to multiple email clients. . . although still not as bad as dealing with IE 5, 5.5, 6, 7.. and now 8 which will no doubt have a new rendering !

Brandi said on 04/12 at 06:49 PM

I always try to avoid background images whenever possible. This often seems to confuse the client and I have to try my best to explain why the design needs to be uber-simple in these cases. I’ve even been asked to embed flash in HTML emails. *sigh*

I feel comfortable with one of two options usually: super simple, basically a cool header image, or completely graphic like the Urban Outfitters emails where you can go buck wild with the composition, and the user can click a “view here” link if the images are blocked.