Designing emails for the inbox
Mike | Friday, May 26, 2006
At Barefoot, we help our clients with email marketing strategies and in doing so need to know the successes and pitfalls of HTML email practices. HTML email is arguably more difficult than HTML standards compliance in a browser. There are more email clients out there than browsers, and very few of the clients are held to any sort of standards compliance benchmarking.
For example, Lotus Notes may be great in some of the features it offers and corporations may really benefit from them. However it is absolutely terrible at rendering HTML email. Tables do not display correctly, especially when nested. However some email clients are starting to use the HTML rendering engines that their counterpart browsers are using. For example, Apple Mail uses the Webkit rendering engine that Apple's browser, Safari, uses. There may be small differences, but overall we know that HTML in the Mail client will look similar to what it looks like in Safari. The same could be said about Outlook and Internet Explorer to a degree.
However Mail clients don't support everything that browsers do, such as full JavaScript implementation, full CSS implementation, and most don't support full plug-in implementation.
Because of these things, designing an HTML email is not like designing an HTML file to be used on a Web site. We'll discuss some of the differences and key points below:
For example, Lotus Notes may be great in some of the features it offers and corporations may really benefit from them. However it is absolutely terrible at rendering HTML email. Tables do not display correctly, especially when nested. However some email clients are starting to use the HTML rendering engines that their counterpart browsers are using. For example, Apple Mail uses the Webkit rendering engine that Apple's browser, Safari, uses. There may be small differences, but overall we know that HTML in the Mail client will look similar to what it looks like in Safari. The same could be said about Outlook and Internet Explorer to a degree.
However Mail clients don't support everything that browsers do, such as full JavaScript implementation, full CSS implementation, and most don't support full plug-in implementation.
Because of these things, designing an HTML email is not like designing an HTML file to be used on a Web site. We'll discuss some of the differences and key points below:
- Use: Maximum width of whole message: 500 - 640 pixel wide table
- Use: HTML Title in heading
- Avoid: Hot red and blue colors
- Avoid: Large font sizes
- Avoid: Borders around tables
- Avoid: Background color other than white. Some email clients ignore background color. If background color must be set change it in a <table>, not the <body>
- Don't use Javascript
- Don't use style sheets
- Use absolute references to all web content: start with http://
- Use only standard web fonts (Arial, Verdana, Times New Roman, etc.)
- No DHTML Layers, use Tables instead
- No image maps, use complete links on images instead
- HTML should be written in HTML 3.2 and include the DOCTYPE declaration.
- Include a charset in the header.
- Keep in mind that HTML Headers get stripped when viewed in Web based email clients like GMail.
1 comments
Mike,
Another great resource (including compatability charts) is the Campaign Monitor blog. Here are their Email Design Guidelines for 2006.
Post a Comment
« Home