Having done my fair share of HTML newsletters for clients – I have pretty much followed the same rule of thumbs you have outlined over the years after many hours of frustration and surprises! – it makes you feel dirty using <tables> for the task – but like you say, it’ really is the only way to get consistent output across the bulk of email clients.

Besides the markup side of things – on the actual email sending aspect people should also be looking at implementing SPFDNS records for their outgoing mail server domains, providing a text based equivalent of newsletter content in the same message (using multipart/alternative MIME types) and ensuring reverse IP lookups can be successfully done against their domains.

With HTML emails always rating high on the ‘spam-o-meter’ with most webmail clients (Hotmail being the notable standout here – their spam pass/fail filters are nothing short of pathetic IMHO) ensuring these checks above are in place will help in getting your message through to your recipients.

This destroys P-tag margins in Lotus 6 & 7 and the result will be that there is no space between any text paragraphs.

Lotus gives some top margin to P-tag by default and if you try to mess with it, the result will be 0px all around the P-tag. Padding doesn’t work, so all that is separating paragpahs is the original default top margin.

So if you use P tags (and need to support Lotus) it’s probably best not to define P margins at all.

This is a very thorough article on how to do HTML emails right David, I knew all of the techniques you mention for HTML 4 builds, however I haven’t explored the HTML 5 email builds or explored mobile device email clients so this is great information.

I have tried to be clever with email design in the past by trying to avoid tables and instead use deeply nested DIV’s or UL’s with style tag’s in the body (to avoid Hotmail stripping out of the head), but it would just become an unflexible pickle.

ID and Class use in CSS can be buggy too, so I totally side with keep it simple and nest tables to avoid a whole load of pain.

@JOHN FAULDS – Have you tested a PNG with Lotus Notes? You’ll get a broken image link under anything prior to v8. Of course you could entirely ignore Lotus for the abomination it is, I’d completely understand.

@PeterV and @Janne Thanks for your comments about paragraph spacing. In my testing using either margin or padding inline for each paragraph gives good results in Hotmail. You can also kill the padding and have a redundant paragraph with a non-breaking space in between.

Both approaches seem to work quite well.

I wasn’t aware of the clash between paragraph margins and Notes 6 and 7 either. Would be interesting to see how Janne’s advice about not setting any paragraph margin or padding at all works across the board. Will test that when I get the chance.

@Mir Hotmail should respect the line-height you set, and I’ve seen varying support for it in Outlook depending on the text being in a table cell, div or paragraph. That one will come down to trial and error. Have fun.

Great article! I wish I had found it a couple of years sooner. I had to learn alot of the things you mentioned via trial and error. What do you think about the use of image-maps in html email? When I’ve used image maps in the past,I encountered mixed results when testing on various email clients (gmail). Recently, it seems that I’m coming across many emails that contain image mapped links. I personally find the use of image maps to be more convenient in that it saves time in regard to image slicing. What do you think?

brilliant article ! thanks for detailing so many elements and for all your pointers. I’ve always hated it when I’ve had to create HTML emails…
might be a little easier now – will refer back to this next time ;)

I’ve been designing emails for a long time now (I work for an email-marketing company) and it’s nice to see some excellent tips. I actually already use these tips/techniques but there are actually a few of them that I just learned. Thanks again!

Thanks for all the great comments so far guys, great to hear you’ve found some new advice here or previous approaches validated.

@Peter – Couldn’t agree more, a text alternative with the same content as your HTML version is always a must. Email deliverability is another beast altogether and is enough to justify a series of articles itself. Here’s a good place to start.

@Stecki – There are some benefits and downfalls to both approaches (embedding images are referring to them on an external server). Embedding alone doesn’t ensure images are displayed by default in most email clients, and it adds additional file size to the email itself. In my experience, linking to the image on the web is still the best and most common approach I see for HTML emails.

You mention avoiding PNGs as images but I’ve found PNGs to be the only image format to render properly in all the clients I’ve tested. If I use a JPEG instead of a PNG, the image never shows up in Yahoo. I’ve often thought that it can’t be right that only PNGs would show properly, but I’ve not been able to find any other way around it.

However, if Outlook 2007 would revert back to using IE’s html rendering engine (however flawed that is) instead of Word, and online mail services as Gmail and Hotmail would up their standards support, things would already improve massively across the board.

Nice article. But I take exception to using bottom-margin on a P tag. I’ve found that Hotmail strips out any value and adds its own number. 18px or something like that.

With that in mind I’ve stopped using P tags altogether. It makes things VERY complicated, though. I’ve been using spacer images (gasp!) to force the spacing between table cells, and using two BR tags between paragraphs.

Great article, I’ve been coding tabe HTML newsletters while teaching CSS for websites for a while, paradoxal isn’t it? ;-)

Anyway, I still learned a few things reading this, thanks!

About the “inexplicable reason” why Windows Live Hotmail adds a few pixels of additional padding below images, this is quite simple: some doctypes render images inline (like it should in the normal tableless world ) even in tables while it should be block when nested in a TD. Hence the bottom “baseline” margin. Another fix is to define vertical-align: bottom on img, provided the image is higher than the font-size.

This is a great article with a general overview of some of the more common best practices to developing HTML for email clients. One thing to remember about developing for email is there are no standards. As such, there are no hard and fast rules. How you coded one template might not be the best way to code for another. There’s not necessarily one right way to develop, but there are a lot of wrong ways to develop. You have to mix and match best practices according to your design, in order to achieve the best rendering across the intended audience. Also, if you revisit the code a month later there’s likely a better way to do it (which may have been how you were doing it 5 years ago).

While you may not be able to achieve pixel accuracy in every email client, you can successfully code in such a way that the email degrades in such a way that the message is still communicated.

Personally I agree with Lewis’ points. We only use styles to embellish a design/build that already works to our lowest common denominator which is “Outlook for Web” (browser access to outlook mail) since this “client” disables all styles completely. (There was a time when hotmail did this, changing all “style” tags to “xtyle” but they’ve changed this now). Outlook for Web may be rarely used, but barring a few extra rules (eg display:block for hotmail images, font tag round links for gmail etc), using this as our base testbed has meant our emails currently look right in all clients we have tested so far (more or less those covered by CM’s tester and LitmusApp etc)

Adrian, if you want to fix your underline/colours use this method

<font face=“Arial” size=“2” color=”#FFFFFF”>
At the end of this white text there is a
<a href=“http://www.google.com” target=”_blank” style=“text-decoration:underline; color:#009900”>
<font face=“Arial” size=“2” color=”#009900”>
<u>green link to google</u>
</font>
</a>
</font>

This also works for styling your alt tags for gmail for the no-images default view.

Dave, do you have any estimates as far as approximately what percentage of email users (defined as “people who would be signed up for general purpose/non-intranet newsletters”) actually use Lotus Notes? I can’t imagine it being very many, but you would know best.

@Deborah, I had a quick look and can’t track down anything on the Campaign Monitor site about styling link text, but personally I’d say the same approach applies to links on the web. If it’s a link, make sure it looks like a clickable link to your recipients (underlined, and preferably contrasted to other text). Also, if you have an image that’s linked, be sure to provide a text alternative in case of image blocking.

@Alan, our current figures shows that Notes has around 2-4% of the overall market, but it’s use is much higher for business to business rather than business to consumer.

@Nicole, thanks, glad you found it useful. I talk a lot more about video in email including Flash and gif support in the video in email article I linked to.

David – Thanks you so much for unraveling the mystery of creating good professional HTML newsletter layouts. It is refreshing to find honest and open sharing information that I personally have found most useful.

Thought it was so great did my own article for my readers with advice (and link) that they should all read your article – see http://topleftdesigns.com.au/_blog/Internet_Marketing/post/Setting_up_your_eMail_Marketing_Newsletter_Templates_and_Layouts

I think the most powerful message I walked away with is “Keep your layouts simple” closely followed by “If you follow rule 1 you can make it happen”.

For an industry that so strongly relies on standards, we do such a good job of abusing the requirements and benefits. In 35yrs in this game I have just watched it get worse and worse.

A thank you also to the other contributors for their comment and insight.

For anyone else battling Outlook 2007 where images are misaligned or splitting apart, you can try this fix. We have HTML emails with lots of images and some of them act as links. If there is an <align> tag on the image that is wrapped in an <a> tag, then Outlook 2007 seems to add one pixel padding to the top and bottom of the image. Once we had removed <align=“left”> from the image tag, it tightened up nicely. Not sure why this happens, but mine is not to question, just fix it.

OK, So we are Five years down the road here. Many of the rules including the use of tables still good advise. I am building emails to go out one at a time. I’ve rebuilt my tags to comply with this though post.

And I am still left with my original delivery problem: I open my html in Safari “comand-i” this sends it to an apple email. I send it to myself and one other. When I get it and click the link; and the entire page turns blue (selects) and it doesn’t go to the link.

Anyone use Zurb’s Ink email template framework. It saves me a lot of time. Regards targeting emails for specific devices or handlers I find this almost unmanageable, apart from general feedback of what audiences are using. Nothing to stop a client opening an email via desktop, tablet or phone, even if the same handler, it can work differently. I found aside from extensive testing using Email on Acid, the best method is for a designer to give me a loose idea and allow me to make technical decisions to make it work best. There are hacks and workarounds, but for me keeping it simple works best, which is usually a single column design.

Good article with lots of useful tips, especially the info about paragraph margins, and the Windows Live Hotmail image hack – that one’s always puzzled me.

I have to admit though, I still do not use CSS much at all in my emails, it’s just still too unstable for me. So it’s font tags for font styling, line breaks for paragraph spacing, and yep – spacer gifs when they’re needed. I’ll add inline CSS if I feel the need to add in a little bit of progressive enhancement at the end, but that’s it. It’s gotta work first and foremost without CSS for me.

Even using width values on cells I have seen to be bizarrely flaky, and cellpadding (which is mentioned a few times here) can play total havoc in Outlook 2007, so I make a note to never use it. When it’s needed, 1px spacers remove these problems for the most popular email clients.

We are having issues with images showing up. Same browser, same email client (yahoo), same markup.

In one email, the images display fine, in the second <img tags are stripped. Plus a Meta tag is added
<META content=off http-equiv=x-dns-prefetch-control>
<body>….</body>
<META content=on http-equiv=x-dns-prefetch-control>

I didn’t know about the Windows Live Hotmail image hack, thanks so much! Also nice to point out some of the galleries specific to email design. I feel like html email design gets no love amidst the css and web galleries!