How Different Email Applications Render HTML Email

The recipients will be viewing your email newsletter in different email applications which render HTML email differently. For this reason, you need to test your email first and make sure it works in as many different email applications as possible. There are many email applications out there and they all render HTML email in different sometimes unpredictable ways. Do you need to test every single newsletter across every single application, every single time you send? No. Just setup a good, simple, foolproof template and test it as much as possible. In the future all you’ll need to do is to vary the content. It really helps to setup a test computer (or two) in your office. If it’s not possible, send the email to a few friends or office-mates. Just ask them to let you know if anything looks "off" or broken to them.

In the table below we summarize the particularities of most popular email clients. Knowing common issues of various email applications will help you find the optimal HTML design so that you email newsletter is displayed in the suitable way for all the subscribers.

• AOL 9. The "preview pane" is extremely tiny. Make sure to design your emails to peek out enough from the preview pane. Your HTML code needs an extra line break or two after the final tag, or you’ll see weird "equals signs" in your email.
• Outlook 2000. Default installations of Outlook 2000 will display almost anything you throw at it, including embedded movies. Displays HTML email just fine but like in AOL, if you don’t have an extra line break under the closing tag, you may see mysterious equals signs appearing in your email.
• Outlook 2003. Blocks images by default to protect your privacy. Displays HTML email fine, but default installations of Outlook 2003 open up in 3 vertical panes, leaving little room for your preview pane.
• Mozilla Thunderbird. Mozilla Thunderbird blocks images like other apps, but doesn’t use big, obvious placeholders. If you use "alt text" for a logo graphic for instance, the Alt test will display, instead of a big "broken/blocked image" graphic. The downside of this is that, depending on what alt text you use, people may never know there’s an image to display, and won’t click the "show images" button. If you don’t use alt text for your images, a placeholder seems to appear like other apps.
• Thunderbird 1.5 has a new "This looks like a Phishing scam" feature, where you get a big warning icon at the top of the email if it detects a link that appears to be deceptive. For instance, if it finds a link described as, "Paypal home page" but the URL actually points to some suspicious URL.
• Lotus Notes. You’ll almost always get a random border box around something. A graphic, a table cell – whatever. Lotus Notes 6.5.3 handles center alignment ok, but 6.5.4 doesn’t. And neither seems to handle animated GIFs with transparency. COLSPANs can also be touchy here. Keep the table structures very simple.
• Comcast, Bellsouth, and other "at-home" ISPs. We’ve noticed some "at-home" ISPs use email servers that interpret lines beginning with "periods" to mean "end of email." So be careful not to start any lines with a period. Sounds weird to do such a thing anyway, but places where it often occurs include: plain-text emails, where someone uses periods as visual markers and divider lines, embedded CSS code (header, footer, etc). Indent your CSS, or add a space in front of each line to get around this.

Table of contents | Page list for this chapter | Next page