Guidelines for coding HTML emails
Posted on March 2, 2006 | 1 Comment | No TrackBacks
It seems like about everyone I know has asked me questions this week related to best practices for building HTML emails and newsletters. It can be a tricky business so I've decided to assemble a few basic rules to follow that should help. In no particular order:
Avoid CSS
It hurts me to say that since I preach CSS as gospel in any other situation but support for it just isn't all that stellar in email clients right now. Write your code in HTML 4.0 and try to minimize or eliminate the use of CSS.
A good idea is to use inline styles such as:
<p><font face="Arial, Helvetica, sans-serif" size="2" style="font-size: 11px;">Remember to keep checking <a href="http://www.codescene.com" target="_blank"><font color="#2168C4">Code Scene</font></a> for the latest info.</font></p>
Newer clients will read the style property to set the font size while older ones will fall back on the HTML size attribute of the font tag. Everybody wins!
Hand-coding is also a good idea since WYSIWYG editors sometimes don't do the best job of writing clean code.
JavaScript
None. Ever. Forget it. I don't even know why people still ask about this.
Base Tag
While this works for most email clients, certain ones have trouble processing it so don't rely on it. Store all your images on a server and make absolute links to them.
I.e. <img src="http://www.mysite.com/images/whatever.jpg">
Background Images
For newsletters that require a background image or color, the 'background' and 'bgcolor' attributes of the BODY tag must NOT be used since most web-base email clients will not properly display them. Same goes for adding CSS to the body tag. What did I tell you about CSS anyways? The solution is to encapsulate everything in a container table or div tag and apply your background colors and images there.
Validated HTML
Malformed HTML code, non-standard characters, such as missing end tags or non-quoted attributes can cause display problems, especially with web-based email clients like Hotmail. To ensure that your code is valid, use the W3C Markup Validation Service at http://validator.w3.org/ to check your code for errors before sending it.
Testing
Whenever possible, test your HTML email in as many different clients as possible before sending it out. It's easy and free to sign up for all of the major web-mail clients so you have no excuse.
Use Image ALT tags
This should go without saying. If images are slow to download or turned off, the ALT tag will give a description of what the image was meant to convey.
No rich media
Many email clients still have problems with flash, video, or form components. It's much better to host those elements on your website and use the email to direct users to them.
Thanks for some useful info.