For all you Web developers out there, I know there is at least one thing we all have in common – our absolute hatred of HTML emails. They are a constant struggle and the backwards methods we are forced to use to make them work is downright embarrassing. How many times have you created a nice clean HTML document only to have it fall apart in any number of email clients? Then comes the fixes … and more fixes … until your ‘beautiful’ HTML document looks like a dog’s breakfast, unless of course your dog eats Alpo.

Don’t you wish that they would just go away? Well, I don’t know about you, but I can’t see them leaving us anytime soon. Currently at my place of employment, there is always a constant stream of client requests for us to build them; hardly a week will go by where I don’t need to build one.

So, safe to say, I’ve had quite a bit of experience with building these templates, and over time have come up with a good working base template that I apply to all my HTML email builds. If you are interested, it is available for download at the bottom of this post.

Today, I’m at a point where I believe I clearly understand what can and can’t be done with an HTML email. This saves a lot of time and bug testing, which as you know can take up a lot of time. Below are a few things to keep note of when you are building your next HTML email:

• Do no rely on margins or padding for flowing text around a table or image. Instead, in the case of an image, ensure the graphic includes the necessary white-space. For a table, create an extra ‘gutter’ column to separate it from the content.
• Outlook 2007 does not recognize margin or padding styles – at least not very well, if at all. Instead, use spacer graphics, <br> tags or a non-breaking space (&nbsp;)
• Use absolute font sizes; forget about creating a ‘resizable/fluid’ layout – stick to pixel (or point) measurement values only.
• Try not to get fancy with your markup – remember, you want this to be as old-school as possible in order to get good visual results across all email applications. I use <br> tags to separate my content; and just wrap <div> tags around text / blocks that need a presentational ‘boost’.
• Try to avoid background images; or ensure your design still looks and works right if they are disabled and/or not supported.
• Make sure that any table cell that contains text is styled-up with the appropriate font rules (i.e. font-family: Arial, Helvetica, sans-serif).

Hopefully you’ll find some of these tips helpful. 

I should mention that for testing the email templates you can use a service called Campaign Monitor. The free account that they offers allows unlimited email distributions for up to 10 addresses, which should be more than enough for testing purposes.

As mentioned earlier in the post, here is a base template I use for all my HTML emails. It’s not perfect but it works for me!