June 13th, 2010

Recently, at work I’ve had to design quite a few HTML emails. While this isn’t something entirely new to me its been quite an interesting experience.
There are some fundamental things I discovered along the way, hopefully this post will shed some light for any of you who have been interested in doing them or were wondering what the best tools for the practice are.

Does size matter?

The simple answer is YES. A general rule of thumb is that the average user’s monitor size is going to be 1024 x 768 pixels. Hell, thats what my wife’s laptop uses! The width I tend to go for is 620 pixels. Now, this is my personal preference, purely because it offers a good size to work with in the design process. I wouldn’t recommend anything larger than that since you wouldn’t want your users scrolling horizontally if they have a smaller screen.

I hear some of you asking; what about height? This entirely depends on the amount of content you want to show the user. The most annoying thing a client can do is provide too much. If you are in this predicament, try and get them to reduce it to bite size sections with possible click though links to the full article as you don’t want to overload the user with too much text.

Designing and building your HTML email

So, we’ve established a safe width to go with, now we need to design it. I tend to do my mock-ups in Photoshop (as I’m sure most of you do) but you can use whatever design tool you like, be it InDesign, Fireworks, etc. I’ve supplied my own grid based template at the bottom of this article. This is a variation of the 960 grid system but reduced to 620 pixels which also includes an email newsletter wireframe as a guide. Feel free to edit it in any way you like and let me know if you find it useful.

The first thing you need to remember when coming up with your design is to not over complicate it. Remember you are designing an HTML email not a full blown website. Try and keep the images to a minimum since you want your email to be accessible to everyone. There is nothing worse than when someone has images disabled in their email client and you have to rely on the ALT tags for your description.

When it comes down to building your HTML email you need to use tables and inline CSS. Using divs and external style sheets are a no no – remember that a lot of email clients are still stuck in the dark ages.

Testing your campaign

The most important part of doing any HTML email is testing, without it your email may end up all over the place. The most affordable way for you to test is to sign up for all the popular web email clients such as Yahoo, Gmail and Hotmail. You also need to test locally using installs of Outlook, most notably Outlook 2007 –
see more about that here
, Lotus Notes, etc.

The best way in my opinion to test your email and to avoid having to go through the arduous task of logging into all those email clients is to use the excellent website Litmus. This is a site I use quite a lot for testing in all the major email clients and it gives you accurate previews. You do have to pay for it though but if this is going to be a regular thing for you I highly recommended signing up for it.

Sending your campaign

Some of the most common errors that people make when sending their email campaign is to send it from their local email client, not add tracking and not include an interesting subject line. There are plenty of programs and websites out there that help you with this, (the subject line should really be a no-brainer you’d be surprised how many people forget this) its just a matter of finding the one that works best for you.

I currently use Campaign Monitor as i find it the easiest. You can literally upload your HTML, including images to their site and it will tell you if there are any errors in it. Most importantly it will track all who opened it and which links they clicked on.

A note about the dreaded Outlook 2007

The problem you will come across if you are designing HTML emails for businesses is that more often than not they will be using Outlook 2007. When Microsoft released their 2007 version, they changed the rendering engine from Internet Explorer to Word. Now it doesn’t take a genius to realise that that was a bad move. Basically what it means is your emails are going to have to be relatively simple or risk them coming out deformed. Don’t despair though, you can get a great looking HTML email in Outlook 2007 it just requires some tweaking. Now I’m not going to go into detail about this as there are plenty of articles on the web, all you have to do is google it.

Remember the Do’s and Don’t’s of HTML email design

  • DO plan your campaign rather than jumping into the deep end.
  • DO try to use a template when creating your design.
  • DO use inline CSS when formatting text and colours.
  • DO test your email in various email clients.
  • DO add tracking on any external links.
  • DO use an email marketing software for sending your emails.
  • DON’T overload your design with images and hardly any text.
  • DON’T use divs and external CSS style sheets.
  • DON’T forget to include an interesting subject line.
  • DON’T not care how it will look in other email clients – always test it!

Final thoughts

HTML emails are not all bad, but they still have a long way to go before they look like anything we see in a modern browser. Everything comes down to testing and getting your planning right. There is no point in rushing to send out an email campaign only for you to find out half of your subscribers couldn’t view it the way it was intended. You may end up pulling your hair out at some point, but, that comes with the job doesn’t it?

Let me know your thoughts or how you go about designing HTML emails. If you have any questions don’t hesitate to get in contact with me.

Download the 620 grid based template here


  1. Thanks for sharing this post! HTML emails are hard to make look professional.

  2. 17/12/10 | 19:06

    great post, thanks for sharing

Leave a Message