Designing emails for the inbox
Mike | Friday, May 26, 2006
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.
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 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.