Thanks for so many useful advices. Layouting emails is always a very complicated job and it’s always good to set a solid base of easy and reasonable principles. :)

These are some really great tips, I always have trouble getting out e-mails with HTML regardless of if they’re newsletters, registration e-mails, etc…

A solid article with lots of spot-on advice.

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.

Are there recommendations on styling link text? Is the basic underlined text the best practice?

Somehow I remember reading (was it the Campaign Monitor website?) that underlining link text was a recommended practice. I’ve searched the tips on Campaign Monitor, but didn’t find the reference. It’s possible I missed it.

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.

I’ve been reluctant to do much with email. This is very helpful. Thanks for the tips.

Check out http://litmusapp.com/email-testing for testing against a ton of email clients. I have used the html testing and worked great.

Dan
(No association to the litmusapp people…)

Impressive article, highly appreciated. Thanks!

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

Has anyone got a way to avoid the 13px bottom margin that is added to <p> tag’s in Windows Live Hotmail?

Only work around I know of is using spans with inline styles to style the text.

Great article David.

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!

Superb article David.

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 SPF DNS 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.

Of course you could entirely ignore Lotus for the abomination it is, I’d completely understand.

Yes I have been. ;)

p {
margin: 0 0 1.6em 0;
}

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.

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.

Thank you for sharing.

Unfortunately in my experience a lot of corporate mail systems block or filter html emails. I guess that’s why professional email marketers use plain-old tested and proven plain old text emails at 40 characters wide.

It may be better economically to invest time in the offer and the copy rather than invest too much time in the layout and design if it’s never going to reach the intended recipient.

The exception would be internal communications.

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.

BTW — Awesome article, thanks!

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.

Do you know how to fix line-height for Outlook2007 and Hotmail for a HTMLemailer?

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

Hi Dave,

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?

David

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

Thanks :)

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.

this is a great website to translate head-declared styles in your markup (for html emails)

http://inlinestyler.torchboxapps.com/

Brilliant!

I had to learn many of html email trick by trial and error approach. Thanks for putting all the advices together and specially for Outlook 2007 background image advice!

Inline css is probably the safest way around, but if your target audience is all relatively modern computers, your best to stick with CSS in the <head> of the email.

This reduces the size of the email and makes it less likely to be detected as spam (the more html you have in your content over the standard text the more spammy an email appears.)

I have found this also helps a lot if you are using an online editor to keep the consitency of the content by setting one text size and font at the top.

This is supported by most of the major email programs (gmail, outlook, thunderbird, apple mail, haven’t tested in any others as of yet)

Other than that, great article!!

Are spacers so bad in HTML emails? I sometimes have problems the column widths not behaving as they should without spacers. Will try without next time and see if I run into any issues.

Also I find specifying text-decoration: underline for <a> tags ensures some email clients keep the same underline colour.

Great article, very helpful resource. Thank you! ~ Mike

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.

David: have you found this problem with P tags in Hotmail also?

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.

Thanks for this great article. It has answered so many questions for me.

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.

Our newsletter “technician” loves this article so much that we did a blog post of our own for our nonprofit clients: http://community.npowerseattle.org/npowering/tips-for-rock-solid-html-newsletters/

Thanks for combining all the great links and how-to’s in place!

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.

Great article, thanks!

You just forgot to mention that animated gifs don’t work in Outlook 2007 nor do Flash files (swf or other plug-ins) or forms.

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

Thank you for all tips. Very timely!

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>

Image tag used:
<img src=“http://blah.com/media.ashx?id=blah” width=“625” height=“270” alt=“Banner”>

Is there any way to control this?

Thanks!!

Great advise here. Email campaigns are the most difficult thing for me wrap my head around. XP

Very good article. I can’t believe even the best designers stumble on email design. I find I have to correct tons of code all the time.

Awesome article, I didn’t know about the bg img hack that has made my whole month! Thx for sharing

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.

How do I get it to work?

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.