Best practices for coding HTML emails

by Jean. 49 Comments -

Even if you’re able to code complex website layouts, coding an html email is a hard job and there’s lots of things to take into consideration. This article features the most important things I’ve learned in 5 years of coding html emails.

Keep it simple and lightweight

If you have to remember only one of all the tips I’m going to give you in this post, it should be this one. In fact, an html email is not a website, so you shouldn’t try to embed a website into an email.

Some years ago, I used to work for a French TV channel and I often had to slice some PSD’s into html emails. The PSD’s contained gradients, funky fonts, and even animated gifs. As a result, the work (despite all efforts I’ve put in it) looked different from one email client to another, the fonts had to be replaced by Arial, and the whole email was extremely heavy and highly relied on images.

On the other hand, a simple html email will loaded smoothly, and will be more pleasant to read.


(Yoast.com Newsletter)

Don’t abuse images

An image is worth a thousand words, but it may also take forever to load. I have received many emails that consisted of a few lines of text and nothing else but big images. As a result, the recipient had to wait until the image was loaded (Which can sometimes takes up to 5 seconds!) in order to read the information embedded in the email.

This is, in my opinion, a waste of time for the recipient, as well as a waste of money for the sender: Most people won’t wait 5 seconds in order to have the big image you send them loaded. They’ll trash the email. It’s as simple as that.

An html email should be beautiful and pleasurable to view, but don’t over do it. Like I’ve just said, keep it simple, you won’t regret it.

Work with tables

As many email clients handle CSS worst than IE6 (Yes, I’m not joking), you shouldn’t even try to make advanced layouts using CSS. Instead, you should do a jump 10 years ago and say hello to tables, tr‘s and td‘s again.

If you’re like me, you’re a CSS fan, and this might sound very frustrating. In fact, having to code the dirty way is never pleasant, but you don’t have much of a choice. Do not hesitate to test by yourself: Chances are that you’ll soon be using tables again.

Always use images from your server

Among html email worst practices I ever saw, embedding images directly in the email definitely arrived at good place. This is wrong in many points: First, it will make the email heavier (I’ve seen 300ko messages!), and secondly, there’s a strong risk that the recipient email client block those images.

What you should do is to create a hierarchy of directories on your server, for example Newsletters and then May_2010, and upload images for your html email in it. Once done, simply call them using absolute url paths:

<img src="http://www.catswhocode.com/images/cat.jpg" alt="A cat" />

Write your CSS inline and use html attributes

In email clients, the lack of CSS support is definitely something to keep in mind. Don’t try linking to an external CSS file, and try to avoid as many CSS declarations as possible in the <head> section of your document.

It may be dirty, but the best way to make sure your CSS will be (quite) correctly interpreted by the recipient’s client is to code your CSS the inline way, as shown in the example below:

<p style="background:#069; color: white;">A new background and font color with inline CSS</p>

Another “dirty but effective” option to consider is the use of html attributes, such as background or bgcolor:

<body bgcolor="#069">

Don’t forget the text format

It may seems a bit obsolete in 2010, but many people, including myself, prefers the good old “plain text” format than html emails. When creating an email list subscription form, try to allow the visitor to choose between the html and plain text format.

Make sure your emails display in various clients

When creating a website, any serious developer will test its render on various browsers. This should be the same with html emails: people use a wide variety of clients and in order to be professional you should try to support most of them.

In my opinion, the following clients should be supported: Gmail, Yahoo mail, Mozilla Thunderbird, Apple Mail and Microsoft Outlook. below, you’ll find two great guides about CSS in html emails:

  • Guide to CSS support in email clients: A very interesting guide describing which CSS properties can be used depending on the user’s email client. PDF and Excel versions are downloadable.
  • CSS3 support in email clients : Enjoying CSS3? Here’s another great resource brought to you by Campaign Monitor, showing the few CSS3 properties you can already use in your html emails.

Use Google Analytics to track conversions

Sending a good html email is definitely a great thing, but your goal is to have people click on it and visit your site. There’s lots of way to track clicks on emails, but one of the easiest is to use Google Analytics, that you’re probably already using on your website.

I’ve never been a big email list sender so I never experimented with Google Analytics conversion tracking. Though, it looks like doing so is very easy: All you have to do is to add some GET parameters to your links, as shown in the example below:

<a href="http://www.mysite.com/page.php?utm_campaign=fall-sale&utm_medium=email&utm_source=female-list">Click here</a>

However, if you want to know more about click tracking using Google Analytics, you should have a look at this article.

  • Andy Jones

    Great article – but one thing you specified was using inline styles such as:

    but short-hand color codes don’t always work in html email either!

    It should be:

    This is ‘belt and braces’ and is absolutely sure to translate in the plethora of email clients and web-based platforms.

    • Andy Jones

      Oops! – content was stripped out!

      What I was trying to say is that you used shorthand for your color declaration: #069, but this doesn’t always work, and should be declared in full: #006699..

  • http://php.quicoto.com quicoto

    The main problem is the testing. You have so much clients: Yahoo, Gmail, Hotmail, Outlook, Mac…

    Like you said, let’s keep it simple ;)

    Regards

    • http://johan.notitia.nl/ Johan de Jong

      I useally test the layout in the different browsers (IE, Firefox, Safari) and Outlook (due Word engine). This will ensure that the email is readable for 99% of the recipients.

      Two extra tips for this list: always include a text version with your HTML mail for Lotus Mail users and mobile users (without HTML support) and always have an online version available which can be seen with a browser.

  • james

    And if you’re dealing with any sort of business test Outlook 2007 thoroughly. It uses Word as the HTML rendering engine and simply put, it doesn’t recognize or allow many common HTML elements (such as background images) and some padding.

  • http://www.htmlemaildesigns.com/ Jordan

    Very informative post.

    Testing emails is dreadful because not only do different email clients and web-based services render differently, you also have to take into account the browser used to view the email for web-based services.

    Keeping emails simple is probably the best advice I could give as well.

    • http://www.healthcarewebpros.com Chad Powell

      If you follow the standards, testing shouldn’t be that troublesome. We use Big Response for our internal email marketing. They give us the ability to render our email in different email clients before we send it out. This avoids the headaches of having to email it to test accounts such as Outlook, Yahoo, Gmail, and etc.

  • http://www.jetwebconsulting.com John

    Being an independent contractor I found myself spending hours trying to get an email to display correctly across the plethora of email clients. One website that I found VERY useful is Email on Acid (www.emailonacid.com). They show you how your email will look in 16 email clients and indicate which HTML/CSS properties and attributes are not supported in each one. It has saved me a ton of time. I definitely suggest trying it out.

  • http://www.wype.fr Maxime (wype agency)

    I never thought about the Google Analytics in an email, thanks for the advice!
    One of the worst email clients for css is… Gmail! Weird when we see the advance that Google has on the web.

    • Andy Jones

      You’re right about Gmail – and the rules change all the time!
      Yesterday I was putting together a regular Enewsletter that I’ve been doing for years, and suddenly, there were gaps around every image! After a bit of experimenting, I found that you have to add the style ‘display:block’ to EVERY image – which is a simple fix, but a bit of a pain!
      There needs to be some standards set – please!!

      • Jeff Condit

        Thank You!! I’ve been trying to figure that out!
        You just saved me an assload of headache.

  • http://www.jimphelps.info Jim Phelps

    As someone who also receives these emails on my phone, if your email always starts out with “Having trouble viewing this email, then blah blah blah”, then the only part of your email I see before I delete it is that line. Make that first line meaningful.

  • http://www.wingate.com Daniel

    Serving images from the internet is imho worse than attaching it to the message. Firebird and some other email clients block external images by default (same goes for g-analytics scripts, tracking pixels etc.), but not images that come as attachment with the email.
    Personally i consider tracking codes, tracking pixels etc. a very bad style and will most likely leave your mailing list if i spot images like ‘logo.jpg?id=4521398746′ or some other hash that tells you where and when i read my email.

    • http://teachmewp.com Dave

      Yes, I was going to mention that too – most email readers will block images, so make sure that images don’t make up the bulk of your content. I believe that lots of images will give your email a higher spam score, and make it more likely to be blocked.

  • http://www.angercontroltips.com Austin Colbin

    I am one of the victims of HTML codes. I find it so hard to use HTML codes when it comes to web designing and all that stuff. For it will not work without a single character in its code which is freaking hell hard to find. Thanks for posting this article it really helps me a lot.

  • Neil Monroe

    If you find yourself sending out a lot of marketing emails, think about signing up for a pay service, like Mail Chimp, that will give you test results in email clients for you. This can be a big help if you don’t have the time to verify it yourself.

    But as others have said, the best HTML that can be written for emails comes from smart building of the code and not getting too fancy.

    Just remember: Emails are not web pages!–And let’s start designing like it’s 1999!

  • Dee

    All of this is great advice and true as far as the creative/content portion of email is concerned, but I’d like to add that if you are sending out marketing emails and you want them to actually be delivered to people’s inboxes, you should be using a vendor like MailChimp, Emma, etc. Reputation of sender is HUGE in getting into the inbox instead of the SPAM folder of any of the email providers out there. These services can also manage your subscription list easily, and have their own statistics tracking for opens and clicks, so there’s no need for coding in Google Analytics into the actual email (though you will want to put the Analytics code on any pages that the email links to).

    And if you are in the United States, make yourself intimately familiar with CAN-SPAM law and make sure you follow it. If you don’t, you could face massive fines from the FTC.

  • http://www.jogosgratispro.com/ Jogos Gratis

    I’m having such a hard time to code HTML emails using mailchimp. when I send it to myself I always get something different than I coded.

  • http://positiveclicks.com Positron

    I don’t really like html emails. They have many problems on different mail clients. :|

    I prefer simple txt emails. If want to promote something just put a link to a rich, full of graphics, css styled web page. :)

  • http://www.ianhoar.com Ian

    Great post, but I don’t think HTML attributes are necessary and there are a few cases where you need to use embedded styles at the top of the email to override odd default behaviors of various clients. For example declaring your font family at the top of the page on every “td” tag will save you a world of pain in Outlook 2007. You still need to add it to your table for clients that drop the embedded style, but you won’t need to put it on every “td” tag.

    Outlook 2007 is the real road block to email design and a lot of people use it. If you can get it to work flawlessly there then the rest of the clients should look good or very close to it. There are some very specific client bugs though. I go very old school with tables and spacer gifs for email newsletters. It’s dirty, but it’s a brute force method that works. There’s some really odd client specific bugs which I cover on my blog too if anyone is interested.

  • http://DCincome.com Matthew Loop

    I agree… one should not forget about text. It still converts well for me. I also use Google Analytics to track conversions. Do you have any experience with Woopra?

  • http://www.websitebegin.com Joe Boyle

    I think keeping the HTML as minimal as possible is a great suggestion. It helps make it quicker to read, as well as lowers the chance of coding mistakes. If your readers wanted to see a huge HTML and CSS works, they could go to your site and see it. Also, whenever you send emails, you generally want to keep it short, sweet, and to the point so your recipient doesn’t get lost and confused.

  • Pingback: Programar un e-mail en HTML

  • http://www.tugapassatempos.com/ Paulo Almeida

    Great post!! A
    As you said I think it is very important not to abuse images

  • http://www.threestyles.com Shane Jeffers

    Great post Jean! Highly informative.

  • Pingback: delicious Links: 27. May 2010 | miZine

  • http://www.web-design-talk.co.uk Rob Web Design Talk

    I’ll be sending this article to everyone where I work. People don’t believe me how involved coding a html email can be.

  • Peter

    webserver-linked images from your are nearly always blocked on email clients. you always have to manually allow these images to download for privacy reasons – thats imho a huge disadvantage! so you designed a big eyecatacher – and nobody sees it.
    so better include the images into the email body. And 100 KB aren’t that much in 2010…

    • some internet guy

      I totally agree. External images are blocked for good reasons! I feel so strongly about this that you should reconsider advice #2. It should be the other way round: embedding images in the e-mail body.
      Why?
      You have explained this yourself in your last advice. You could use tracking codes on image urls too. Its generally accepted to allow the sender to know you received the e-mail when you click on a link. But when you’re using tracking urls on images, the recipient could be tracked without clicking on anything. It’s an evil practice! If your e-mail client doesn’t block external images automatically, you should reenable this option or switch clients .. :)

  • http://www.takeradio.com Ted

    I will never receive a email inlcude a large img more than 2mb, if you want to send a big pic, I suggests that you should use attachment

  • http://www.dollarshower.com Ajith Edassery

    Super tips! Also, another point is the organizing of the content itself and must have entities (e.g. unsubscribe link etc). People go paranoid if they get an emailer with no possibility to opt out.

    As for the fonts part, I am always confused as to which font is the best in terms of looks in almost all clients. Any idea?

  • http://www.yusufozkan.com coexploit

    This is one of the most incredible blogs.Thanks dude for everything

  • http://www.wpexplorer.com WPExplorer

    I just started coding some email templates…These are some nice tips, definitely helped me out a lot. Lets see if my client likes them :)

  • http://projukti.com.bd/ zico

    I don’t like text email. Always i use HTML format for mail and this post is vary helpful for me.

  • http://wp-central.com WP-Central

    This is an extremely good tutorial!

    It is all too easy to get lazy and not really put in as much time to your marketing emails as you should, so thanks for the reminder and the help!

  • http://ethercycle.com/ Mary Harrington

    What is the average width of an email when viewed by the user? I personally test all my HTML templates on my iPhone to ensure accessibility.

    • Balachandra

      Keep the width less than 600 pixels because of email client preview panes.

  • http://www.takethetunnel.com Andy Holiday

    Also we keep our HTML emails to 500pixels wide. When you take into account the narrow screen space left after all the usual outlook or mail reader windows a wide email never fully gets read.

    I had a client who put links down the right hand side of a wide email and never got a single click, the following months email was much narrower and simpler and he got 450 clicks!

    So it just goes to show. Keep it simple, keep it narrow and make the sales message punchy and ALWAYS include a call to action.

  • Pingback: Ultimate Guide to HTML Emails - Tips,Tutorials and Resources

  • http://www.axigy.com/ Thomas

    What are your thoughts on using SSL using images in HTML emails?

  • http://www.ma-fleur.ru Fleur

    Beautiful!!!

  • http://www.thumbslinger.com Kelly Johnson

    With Yahoo’s new email, they add a class “.yshortcuts” and you can embed you’re own declaration to override the visual underlining and color change they do.

    It was a headache to finally get an email that looked exactly the same in Yahoo as in our other targets, but it’s 100% possible now!

  • http://blog.shpyo.net shpyo

    Using built-in css is very good idea, cose most of mail clients are blocking files (security reason).

  • http://www.ghosti.pl ghosti

    It’s sad, but true that to be dirty is the best way to be sure they will be displayed properly.

  • Rachel

    I’m creating one html email which will be sent out by each account manager to their clients. I want to put a button in the email which says ‘enquire now’ but essentially all it does is open up a reply to email. What code would I use so that it automatically adds the sender’s email address in the ‘to’ field.
    I don’t want to have to set up individual html emails for each manager.

  • Rachel

    Also what’s the best way to send an html email. I simply put the html page on our server and from the browser select ‘Mail Contents of this page’ (Safari) it can be done from IE as well.

    Is there a better (easier way) without having to use something like MailChimp.

  • http://www.brettwidmann.com Brett Widmann

    This is very useful info! I’ll be sending this to others. Thanks for sharing.

  • Balachandra

    Use below code in the HTML for font size and line height will display same in all browsers including Mobiles and email will display center in the Hotmail.

    .ReadMsgBody { width: 100%;}
    .ExternalClass {width: 100%;}
    .ExternalClass td {line-height: 100%}
    html, div, p, a, li, td { -webkit-text-size-adjust:none; }

    Video’s are working fine in iPhone with below code.

    Take first screen print screen and use image. It will display other than iPhone.

  • Mittul Chauhan

    HTML Emails makes us coders of 1950′s ;)