Creating good HTML emails

Creating good HTML email is a totally different ball game! All the rules/concepts that apply to creating good web pages do not necessary apply to creating good HTML emails at all.

In fact, none of the theories for creating good HTML web pages holds true for creating good HTML emails!
In this article, David Greiner gives a good idea what should and shouldn't be done. Incidentally, this validated most of the stuff that we had already been doing based on our experience with various webmails & HTML email blasts/campaigns that we worked on.

Here are the summary of points given by him:

• Use tables for layout and as containers for background colors
• Use nested tables instead of margins & alignments
• Set the width of each cell instead of at the table level
• Use pixels instead of percentage widths
• Use inline CSS always
• Design with the assumption that images will not be visible by default
• Use "alt" text for images
• Aviod spacer images
• Always use image widths & heights explicitly
• Prefer JPG & GIF images
• Test, Test & Test more with various clients...

And now, some more considerations for mobile emails:

• Keep the total width to less than 600 pixels
• Be aware & design with consideration that text may be resized
• Test, Test & Test more with various devices...

Read the full article by David Greiner on 24ways.org for the details and the code here.