If you have ever developed for the web, you probably have already discovered that not all browsers interpret HTML or CSS styles the same way. Frustrating.

The Bad News: Building an HTML Email template that is consistent is even tougher to achieve and test.

The Good News: Given enough time, knowledge and resources, you can accomplish anything! The question is, do you have the desire and intrepid determination to make it happen?

The purpose of this post is to present some rules to help you create an aggressively compliant HTML email template across a a variety of browsers.

I don’t want to single any non-compliant offenders out [*AHEM! Microsoft Outlook*], but it’s helpful to at least know which ones are likely to show you weak points in your HTML template (Think of it kind of like a modern canary in an email coal mine: it will be one of the first to die if there are any ‘cracks’ in your HTML cavern). Here’s a fun fact! Microsoft Outlook 2007 and 2010 use the Microsoft Word HTML rendering engine!

This, however is small potatoes. As long as we stick to our rules of thumb, we can introduce a modern-looking template to even the most uncivilized rendering engines. They are no match for our large human brains.

Template Tips and Tricks: Building a Consistently Compliant HTML Email Template

Do Not Do:

  • Never try to use a style block or try to attach an external style sheet.
  • Never use padding or margin unless you are setting them to 0px.
  • Never use background images.
  • Never use relative or absolute positioning.

Do Do:

  • Only use inline styles. If you try to use a style block or try to attach an external style sheet, it will fail.
  • Use a table to control positioning and layout.
  • Use a single table in your entire design, if possible. You will be utterly confused with the code, but HTML rendering engines will be less confused by a single table (or one or two… three tables). You will have to plan your layout carefully, ahead of time, so that you know where to place all of the column spans and row spans. For simpler templates this approach may be overkill, but for the complex ones, this is a good way to promote consistent HTML email rendering. Sometimes, it’s a challenge to align and space elements all the same way (relative to each other) unless they are grouped into one big table.
  • Margin and padding is dead to us so empty table cells will provide the same visual spacing effect instead. Remember, HTML tables prefer to contain something, even if they should look empty, so place a space character (& nbsp ;), if nothing else, in your td element. Otherwise, the table cell may fail to display borders (at least in my experience).
  • Use transperent .gif images to enforce table cell size. Sometimes, table cells just won’t collapse like they are supposed to. Just like in the early days of HTML coding, .gif images will help you make sure the table cell is the correct size.
  • Use max and min when defining element dimensions. For example, if you want to define a width as 50px, use all three CSS commands: width:50px; min-width:50px; max-width:50px; I have seen Gmail remove the width if only one was used.
  • Don’t forget about your friend, the overflow css property. If, for example, you need to smush an image right up against the edge of a table cell and you are still getting an irritating cell-spacing or padding gap, try surrounding the image in a div, setting the width and height of the div to explicite px values and setting the overflow property of the div to hidden (overflow:hidden;). Respect my authori-tigh!
  • When in doubt, use both HTML and CSS inline styles. For example, if you want a cell to be a certain color, you have your choice of using bgcolor=”color” or style=”background-color:color;”. I have seen HTML bgcolor (alone) fail in Firefox and Gmail. However, Firefox responded to CSS style=”background-color:color;” alone.
  • Be persistent, creative and test your work. I have only emparted some of the tricks that can be used to create consistently compliant email templates. You may discover solutions to problems not discussed here. Remember, with enough time and effort, you can do anything.

And voilla! Below is a screenshot of a fancy pants email template that even works in Outlook. Check out those rounded edges that seemlessly blend in to the HTML table. Is that HTML? Wow, it looks like an image. Believe me, that’s HTML alright. Just click on the image for proof.