Why !DOCTYPE is the Black Sheep of HTML Email Design
Posted November 10, 2010 by Michelle Klann
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:
|STRIP or IGNORE your DOCTYPE entirely|
Android Mail Client
|ACCEPT your DOCTYPE|
|Gmail & Hotmail
Each will remove your DOCTYPE, and replace it with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Removes your DOCTYPE, and replaces it with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
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.
Here are some common things that may happen when your email takes on the Hotmail DOCTYPE:
If you have more to add to either of these lists, please feel free to share your comments below!
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.
Stay up to date on all the most important email clients tips and tricks!