!DOCTYPE - The Black Sheep of HTML Email Design

As if email development wasn't already scary enough, it seems as though we are pushed even further into the HTML and CSS dark ages when it comes to the subject of DOCTYPE. After quite a bit of testing over the past year, we've have come to a very clear understanding of the DOCTYPE, it's effect on your layout and how being aware of it can save a lot of time and frustration.

First, you can't avoid it. Many email clients strip your DOCTYPE and either impose their own or leave it out entirely. Here is a breakdown:

Here are some common things that may happen to your email layout after its DOCTYPE has been stripped:

Since most email clients use a browser based rendering engine or can be viewed from within a web browser, the following list is broken down by occurrences that happen within web browsers.

• Box model padding becomes an issue when viewing your email in IE vs Firefox
• In IE 8, CSS padding on TABLEs are reset to "0" - for example:
  <table style="padding:20px">
• Center tags with a set width will no longer be centered in all browsers except IE. For example: <center width="500px">
• In IE, the minimum height on any EMPTY block element is 19px This is particularly important when using spacer divs.
  <div style="height: 10px "></div>
• In all browsers except for IE 6 and 7, paragraph elements have a default top and bottom margin of "0" whereas it would otherwise use a default top and bottom margin of 16px.
• In IE 8, you might see an exaggerated left margin on OLs and ULs, you will need to define the margins with inline CSS to correct this.
• Some special characters are not supported

Here are some common things that may happen when your email takes on the Hotmail DOCTYPE:

• Line height for small fonts may become more prevalent in all browsers except for IE. This is only an issue when using inline elements, use paragraph elements or TDs for formatting your small fonts.
• You might see a small space below each of your images. A common fix is to use <style="display:block"> inside your image tag.
• Some special characters are not supported
• There may be a difference in the way your text links appear (colored underlines)

If you have more to add to either of these lists, please feel free to share your comments below!

So What's the SOLUTION?

Before running an Acid Test and to save time, we recommend that you strip out your DOCTYPE and test your email layout in IE 6, 7, 8, Firefox, Chrome, Safari and Opera. Once you have it looking good in all browsers, add the Hotmail DOCTYPE and run an Acid test using Firefox or Safari.

By adding a DOCTYPE when you run your Acid Test, we will be able to validate your HTML before you get your test results. We provide code validation for many reasons, the first is to ensure that our test results are accurate. Secondly, your code will be interpreted within the UI of each of the web based email clients - if you have a stray </div>, that could have a big effect on the way your will email render.