At some stage in your career, it’s likely you’ll be asked by a client to design a HTML email. Before you rush to explain that all the cool kids are using social media, keep in mind that when done correctly, email is still one of the best ways to promote you and your clients online. In fact, a recent survey showed that every dollar spent on email marketing this year generated more than $40 in return. That’s more than any other marketing channel, including the cool ones.
There are a whole host of ingredients that contribute to a good email marketing campaign. Permission, relevance, timeliness and engaging content are all important. Even so, the biggest challenge for designers still remains building an email that renders well across all the popular email clients.
Same same, but different
Before getting into the details, there are some uncomfortable facts that those new to HTML email should be aware of. Building an email is not like building for the web. While web browsers continue their onward march towards standards, many email clients have stubbornly stayed put. Some have even gone backwards. In 2007, Microsoft switched the Outlook rendering engine from Internet Explorer to Word. Yes, as in the word processor. Add to this the quirks of the major web-based email clients like Gmail and Hotmail, sprinkle in a little Lotus Notes and you’ll soon realize how different the email game is.
While it’s not without its challenges, rest assured it can be done. In my experience the key is to focus on three things. First, you should keep it simple. The more complex your email design, the more likely is it to choke on one of the popular clients with poor standards support. Second, you need to take your coding skills back a good decade. That often means nesting tables, bringing CSS inline and following the coding guidelines I’ll outline below. Finally, you need to test your designs regularly. Just because a template looks nice in Hotmail now, doesn’t mean it will next week.
Setting your lowest common denominator
To maintain your sanity, it’s a good idea to decide exactly which email clients you plan on supporting when building a HTML email. While general research is helpful, the email clients your subscribers are using can vary significantly from list to list. If you have the time there are a number of tools that can tell you specifically which email clients your subscribers are using. Trust me, if the testing shows almost none of them are using a client like Lotus Notes, save yourself some frustration and ignore it altogether.
Knowing which email clients you’re targeting not only makes the building process easier, it can save you lots of time in the testing phase too. For the purpose of this article, I’ll be sharing techniques that give the best results across all of the popular clients, including the notorious ones like Gmail, Lotus Notes 6 and Outlook 2007. Just remember that pixel perfection in all email clients is a pipe dream.
Let’s get started.
Use tables for layout
Because clients like Gmail and Outlook 2007 have poor support for float, margin and padding, you’ll need to use tables as the framework of your email. While nested tables are widely supported, consistent treatment of width, margin and padding within table cells is not. For the best results, keep the following in mind when coding your table structure.
Set the width in each cell, not the table
When you combine table widths, td widths, td padding and CSS padding into an email, the final result is different in almost every email client. The most reliable way to set the width of your table is to set a width for each cell, not for the table itself.
<table cellspacing="0" cellpadding="10" border="0">
<tr>
<td width="80"></td>
<td width="280"></td>
</tr>
</table>
Never assume that if you don’t specify a cell width the email client will figure it out. It won’t. Also avoid using percentage based widths. Clients like Outlook 2007 don’t respect them, especially for nested tables. Stick to pixels. If you want to add padding to each cell, use either the cellpadding attribute of the table or CSS padding for each cell, but never combine the two.
Err toward nesting
Table nesting is far more reliable than setting left and right margins or padding for table cells. If you can achieve the same effect by table nesting, that will always give you the best result across the buggier email clients.
Use a container table for body background colors
Many email clients ignore background colors specified in your CSS or the <body> tag. To work around this, wrap your entire email with a 100% width table and give that a background color.
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td bgcolor=”#000000”>
Your email code goes here.
</td>
</tr>
</table>
You can use the same approach for background images too. Just remember that some email clients don’t support them, so always provide a fallback color.
Avoid unnecessary whitespace in table cells
Where possible, avoid whitespace between your <td> tags. Some email clients (ahem, Yahoo! and Hotmail) can add additional padding above or below the cell contents in some scenarios, breaking your design for no apparent reason.
CSS and general font formatting
While some email designers do their best to avoid CSS altogether and rely on the dreaded <font> tag, the truth is many CSS properties are well supported by most email clients. See this comprehensive list of CSS support across the major clients for a good idea of the safe properties and those that should be avoided.
Always move your CSS inline
Gmail is the culprit for this one. By stripping the CSS from the <head> and <body> of any email, we’re left with no choice but to move all CSS inline. The good news is this is something you can almost completely automate. Free services like Premailer will move all CSS inline with the click of a button. I recommend leaving this step to the end of your build process so you can utilize all the benefits of CSS.
Avoid shorthand for fonts and hex notation
A number of email clients reject CSS shorthand for the font property. For example, never set your font styles like this.
p {
font:bold 1em/1.2em georgia,times,serif;
}
Instead, declare the properties individually like this.
p {
font-weight: bold;
font-size: 1em;
line-height: 1.2em;
font-family: georgia,times,serif;
}
While we’re on the topic of fonts, I recently tested every conceivable variation of @font-face across the major email clients. The results were dismal, so unfortunately it’s web-safe fonts in email for the foreseeable future.
When declaring the color property in your CSS, some email clients don’t support shorthand hexadecimal colors like color:#f60; instead of color:#ff6600;. Stick to the longhand approach for the best results.
Paragraphs
Just like table cell spacing, paragraph spacing can be tricky to get a consistent result across the board. I’ve seen many designers revert to using double <br /> or DIVs with inline CSS margins to work around these shortfalls, but recent testing showed that paragraph support is now reliable enough to use in most cases (there was a time when Yahoo! didn’t support the paragraph tag at all).
The best approach is to set the margin inline via CSS for every paragraph in your email, like so:
p {
margin: 0 0 1.6em 0;
}
Again, do this via CSS in the head when building your email, then use Premailer to bring it inline for each paragraph later.
If part of your design is height-sensitive and calls for pixel perfection, I recommend avoiding paragraphs altogether and setting the text formatting inline in the table cell. You might need to use table nesting or cellpadding / CSS to get the desired result. Here’s an example:
<td width="200" style="font-weight:bold; font-size:1em; line-height:1.2em; font-family:georgia,'times',serif;">your height sensitive text</td>
Links
Some email clients will overwrite your link colors with their defaults, and you can avoid this by taking two steps. First, set a default color for each link inline like so:
<a href="http://somesite.com/" style="color:#ff00ff">this is a link</a>
Next, add a redundant span inside the a tag.
<a href="http://somesite.com/" style="color:#ff00ff"><span style="color:#ff00ff">this is a link</span></a>
To some this may be overkill, but if link color is important to your design then a superfluous span is the best way to achieve consistency.
Images in HTML emails
The most important thing to remember about images in email is that they won’t be visible by default for many subscribers. If you start your design with that assumption, it forces you to keep things simple and ensure no important content is suppressed by image blocking.
With this in mind, here are the essentials to remember when using images in HTML email:
Avoid spacer images
While the combination of spacer images and nested tables was popular on the web ten years ago, image blocking in many email clients has ruled it out as a reliable technique today. Most clients replace images with an empty placeholder in the same dimensions, others strip the image altogether. Given image blocking is on by default in most email clients, this can lead to a poor first impression for many of your subscribers. Stick to fixed cell widths to keep your formatting in place with or without images.
Always include the dimensions of your image
If you forget to set the dimensions for each image, a number of clients will invent their own sizes when images are blocked and break your layout. Also, ensure that any images are correctly sized before adding them to your email. Some email clients will ignore the dimensions specified in code and rely on the true dimensions of your image.
Avoid PNGs
Lotus Notes 6 and 7 don’t support 8-bit or 24-bit PNG images, so stick with the GIF or JPG formats for all images, even if it means some additional file size.
Provide fallback colors for background images
Outlook 2007 has no support for background images (aside from this hack to get full page background images working). If you want to use a background image in your design, always provide a background color the email client can fall back on. This solves both the image blocking and Outlook 2007 problem simultaneously.
Don’t forget alt text
Lack of standards support means email clients have long destroyed the chances of a semantic and accessible HTML email. Even still, providing alt text is important from an image blocking perspective. Even with images suppressed by default, many email clients will display the provided alt text instead. Just remember that some email clients like Outlook 2007, Hotmail and Apple Mail don’t support alt text at all when images are blocked.
Use the display hack for Hotmail
For some inexplicable reason, Windows Live Hotmail adds a few pixels of additional padding below images. A workaround is to set the display property like so.
img {display:block;}
This removes the padding in Hotmail and still gives you the predicable result in other email clients.
Don’t use floats
Both Outlook 2007 and earlier versions of Notes offer no support for the float property. Instead, use the align attribute of the img tag to float images in your email.
<img src="image.jpg" align="right">
If you’re seeing strange image behavior in Yahoo! Mail, adding align=“top” to your images can often solve this problem.
Video in email
With no support for JavaScript or the object tag, video in email (if you can call it that) has long been limited to animated gifs. However, some recent research I did into the HTML5 video tag in email showed some promising results.
Turns out HTML5 video does work in many email clients right now, including Apple Mail, Entourage 2008, MobileMe and the iPhone. The real benefit of this approach is that if the video isn’t supported, you can provide reliable fallback content such as an animated GIF or a clickable image linking to the video in the browser.
Of course, the question of whether you should add video to email is another issue altogether. If you lean toward the “yes” side check out the technique with code samples.
What about mobile email?
The mobile email landscape was a huge mess until recently. With the advent of the iPhone, Android and big improvements from Palm and RIM, it’s becoming less important to think of mobile as a different email platform altogether.
That said, there are a few key pointers to keep in mind when coding your emails to get a decent result for your more mobile subscribers.
Keep the width less than 600 pixels
Because of email client preview panes, this rule was important long before mobile email clients came of age. In truth, the iPhone and Pre have a viewport of 320 pixels, the Droid 480 pixels and the Blackberry models hover around 360 pixels. Sticking to a maximum of 600 pixels wide ensures your design should still be readable when scaled down for each device. This width also gives good results in desktop and web-based preview panes.
Be aware of automatic text resizing
In what is almost always a good feature, email clients using webkit (such as the iPhone, Pre and Android) can automatically adjust font sizes to increase readability. If testing shows this feature is doing more harm than good to your design, you can always disable it with the following CSS rule:
-webkit-text-size-adjust: none;
Don’t forget to test
While standards support in email clients hasn’t made much progress in the last few years, there has been continual change (for better or worse) in some email clients. Web-based providers like Yahoo!, Hotmail and Gmail are notorious for this. On countless occasions I’ve seen a proven design suddenly stop working without explanation.
For this reason alone it’s important to retest your email designs on a regular basis. I find a quick test every month or so does the trick, especially in the web-based clients. The good news is that after designing and testing a few HTML email campaigns, you will find that order will emerge from the chaos. Many of these pitfalls will become quite predictable and your inbox-friendly designs will take shape with them in mind.
Looking ahead
Designing HTML email can be a tough pill for new designers and standardistas to swallow, especially given the fickle and retrospective nature of email clients today. With HTML5 just around the corner we are entering a new, uncertain phase. Will email client developers take the opportunity to repent on past mistakes and bring email clients into the present? The aim of groups such as the Email Standards Project is to make much of the above advice as redundant as the long-forgotten <blink> and <marquee> tags, however, only time will tell if this is to become a reality.
Although not the most compliant (or fashionable) medium, the results speak for themselves – email is, and will continue to be one of the most successful and targeted marketing channels available to you. As a designer with HTML email design skills in your arsenal, you have the opportunity to not only broaden your service offering, but gain a unique appreciation of how vital standards are.
Next steps
Ready to get started? There are a number of HTML email design galleries to provide ideas and inspiration for your own designs.
Enjoy!
Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
13/12/2009
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.
Vote Helpful or Unhelpful
15/12/2009
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?
Vote Helpful or Unhelpful
16/12/2009
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.
Vote Helpful or Unhelpful
13/01/2010
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.
Vote Helpful or Unhelpful
13/12/2009
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 :)
Vote Helpful or Unhelpful
13/12/2009
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!
Vote Helpful or Unhelpful
13/12/2009
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.
Vote Helpful or Unhelpful
13/12/2009
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.
Vote Helpful or Unhelpful
13/12/2009
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.
Vote Helpful or Unhelpful
13/12/2009
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.
Vote Helpful or Unhelpful
13/12/2009
I’ve been reluctant to do much with email. This is very helpful. Thanks for the tips.
Vote Helpful or Unhelpful
13/12/2009
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…
Vote Helpful or Unhelpful
13/12/2009
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. :)
Vote Helpful or Unhelpful
13/12/2009
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!
Vote Helpful or Unhelpful
13/12/2009
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.
Vote Helpful or Unhelpful
13/12/2009
Really useful indeed, thx.
Vote Helpful or Unhelpful
13/12/2009
@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.
Vote Helpful or Unhelpful
13/12/2009
Really good article David, thanks.
I have been looking for the best way to embed video into email and you’ve answered that problem for me.
Vote Helpful or Unhelpful
14/12/2009
this is a great website to translate head-declared styles in your markup (for html emails)
http://inlinestyler.torchboxapps.com/
Vote Helpful or Unhelpful
14/12/2009
Yes I have been. ;)
Vote Helpful or Unhelpful
14/12/2009
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!
Vote Helpful or Unhelpful
14/12/2009
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!!
Vote Helpful or Unhelpful
15/12/2009
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.
Vote Helpful or Unhelpful
15/12/2009
> there was a time when Yahoo! didn’t support the paragraph
> tag at all
Still doesn’t, at least not for my BT Yahoo! web email when I checked the other day on one of our newsletters.
Maybe next time…
Vote Helpful or Unhelpful
15/12/2009
Impressive article, highly appreciated. Thanks!
Vote Helpful or Unhelpful
15/12/2009
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.
Vote Helpful or Unhelpful
15/12/2009
Great article, very helpful resource. Thank you! ~ Mike
Vote Helpful or Unhelpful
15/12/2009
Perfect. Definitely the best article about html emails I’ve ever read.
Vote Helpful or Unhelpful
16/12/2009
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.
Vote Helpful or Unhelpful
16/12/2009
Do you know how to fix line-height for Outlook2007 and Hotmail for a HTMLemailer?
Vote Helpful or Unhelpful
17/12/2009
Thanks for this great article. It has answered so many questions for me.
Vote Helpful or Unhelpful
17/12/2009
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.
Vote Helpful or Unhelpful
18/12/2009
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.
Vote Helpful or Unhelpful
21/12/2009
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!
Vote Helpful or Unhelpful
23/12/2009
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.
Vote Helpful or Unhelpful
24/12/2009
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.
Vote Helpful or Unhelpful
25/12/2009
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.
Vote Helpful or Unhelpful
29/12/2009
Thanks David!
I’ve been researching HTML Emails for clients at my new job and this article will be very helpful moving forward.
Vote Helpful or Unhelpful
05/01/2010
@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.
Vote Helpful or Unhelpful
06/01/2010
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.
Vote Helpful or Unhelpful
11/01/2010
Great advise here. Email campaigns are the most difficult thing for me wrap my head around. XP
Vote Helpful or Unhelpful
18/02/2010
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.
Vote Helpful or Unhelpful
10/03/2010
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?
Vote Helpful or Unhelpful
11/03/2010
Awesome article, I didn’t know about the bg img hack that has made my whole month! Thx for sharing
Vote Helpful or Unhelpful
23/03/2010
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!
Vote Helpful or Unhelpful
13/12/2009
Are there fool-proof ways or best-practices for embedding images inline as data url, maybe with fallback options like attaching them to the mail and only as a last resort linking them to the web?
Vote Helpful or Unhelpful
13/12/2009
Love these tips.
Coding for HTML emails can be very tricky so I’m glad you’ve got some general guidelines to follow.
Thanks!
Vote Helpful or Unhelpful
14/12/2009
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…)
Vote Helpful or Unhelpful
17/12/2009
@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.
Vote Helpful or Unhelpful
06/01/2010
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!!
Vote Helpful or Unhelpful
Impress us