HTML used to format emails (message content, not email addesses)
Although the HTML used to format emails is the same as that used to create web pages, it has a different set of problems and best practices.
Code Validation
Since most email clients don’t follow web standards and there are no email-specific standards in place, properly coded HTML emails will not pass HTML validating because, if coded properly, nearly all of the code within an HTML email is likely to be comprised of depreciated elements.
Client Code Compatibility
In working with HTML emails, much of the functionality possible in typical web development is not possible in email. Good practice, is to restrict code usage to that which is XHTML1.0 compliant. Recent upgrades to many platforms have allowed for some loosening of that restriction and it is now common for people to use the HTML4.0 compliance standard.
DOCTYPE
The recommended doctype for HTML email is XHTML 1.0 Strict. The reason for this is because, regardless of any alternative doctype definition, Gmail will impose XHTML 1.0 Strict regardless and of the two clients which impose their own doctype, Gmail has the largest percentage of users so it is only logical to confirm to the standard that will be imposed whether you like it or not.
Below is a list of Email Clients and Their Treatment of !DOCTYPE as well as expected results.
STRIP or IGNORE your DOCTYPE entirely:
- AOL
- Android Gmail Application
- Lotus Notes 6.5, 7, 8 and 8.5
- Outlook 2007 and 2010
- Thunderbird 2 and 3
Yahoo
Results:
- 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:
- Center tags with a set width will no longer be centered in all browsers except IE. For example:
- In IE, the minimum height on any EMPTY block element is 19px This is particularly important when using spacer divs.
- 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
ACCEPT your DOCTYPE
- Android Mail Client
- Entourage 04 and 08
- iPad and iPad Gmail
- iPhone and iPhone Gmail (iOS3 & iOS4)
- Kindle Fire
- Live Mail
- Outlook 2003
- Outlook Express
- Thunderbird 6
- Windows Mail
Impose Their Own Standards
XHTML 1.0 Strict – Gmail & Hotmail
Results:
- 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 useinside your image tag.
- Some special characters are not supported
- There may be a difference in the way your text links appear (colored underlines)
Yahoo Classic – HTML 4.01 Transitional
