This is a basic guide to creating HTML emails. This post was written under the assumption that you know basic HTML. With the sections below I hope to give you a basic understanding of what goes in to developing an HTML email that can be delivered and viewed by the majority of your email list.
Your HTML File
The first thing you want to do when setting up your email for development is get your HTML file ready. You want to make sure that your DocType is HTML 4.01 Transitional or lower, if using a DocType. Most email clients will not support anything higher than this. Usually it is a good idea to remove DocType completely. Also, I would recommend removing all Meta tags from the header. This could cause problems in the way text is rendered in some email clients. Another thing to note is that most email clients will remove the header completely, but it’s always good to set up your header tags properly to ensure that the vast majority of your audience will be able to view your email as the designer has intended.
When coding your HTML email always use tables and adhere to the lowest standard of HTML possible; 4.01 at the highest. Never use external style sheets or style set in your header. Some inline CSS is acceptable but may not be supported by all email clients. If using inline CSS, use this reference sheet to ensure that your core audience will be able to render the email properly.
Images vs. System Text
Use system text whenever possible in your HTML email. When an image is necessary always use alt tags to represent the text that should be displayed in its place. This text will be displayed when the user has images turned off (images are turned off by default in most email clients).
Once you are finished coding your email, always validate your document. W3C offers a great validation service here. Tweak your code as needed until it passes the validation with no major errors.
After you have ensured that your HTML email passes the W3C validation you need to test your email in all major email clients. The most cost effective way to do this is to send the email through your Email Service Provider (ESP) to either personal accounts or accounts you have set up for testing purposes. Most major email clients are a free service so you shouldn’t have too much trouble setting up test accounts.
Here are some issues I have come across while testing in certain email clients along with solutions to those issues.
If there is weird spacing with your images; mostly in Hotmail and FireFox, then you should add in “style=’display:block’” in your img tag. This will take away the spacing issues with your images.
If you can see your spacer images in Outlook 2007 you should change the height and width of your spacer images to have a width and height of 1 then set your width or height in the containing td tag.