Getting HTML emails displayed as intended
acquire new leads, convert them into paying customers,
and grow your business. Visit www.topica.com to
learn more and to download your free white paper now.
Previous topic: Text emails
Next topic: Grammar and spelling
The basic design and usability rules for websites apply equally to HTML emails. Emails and websites are not, however, identical. In particular, the size of the "browser" window for emails is considerably narrower than is normal when viewing websites, so use tables to adjust page widths accordingly.
And there are one or two other tricks you can use to maximize compatibility with all the HTML-enabled email clients your readers are using (100% compatibility is unattainable).
The basic rule for HTML emails is to keep it as simple as possible within the constraints imposed by your goals. Don't use HTML any more than is necessary to achieve the effect you seek; every extra bit of code is another opportunity for the email client to get the display wrong.
Many HTML newsletters restrict themselves to the use of text effects; fonts, sizes, colors, bold, italics etc.
This enhances the newsletter's appearance and emphasis, and allows you to better control and direct the reader's attention. But the very judicious use of HTML means the size of the email isn't much larger than the text-only equivalent, and it's likely to be displayed exactly as intended.
The next step up is to use images. Embedded images should generally be avoided since they can increase the size of the email to unacceptable levels.
Readers may resent downloading large emails, especially if they're charged for connection times or have limited storage space in their inbox. Some company email systems may block large emails or turn them into attachments, neither of which is desirable.
When linking to images stored online back at your web server, place the image in the email so that the newsletter will still display adequately if the image fails to show up.
That way, people reading your newsletter offline or with images blocked, will still get something from the experience. Ensure image height and width attributes are included in the code, so that the email client displays other elements (text, tables etc.) without having to wait for the image to load.
This also prevents readers from seeing a blank screen if the image fails to load at all.
Also ensure that crucial information communicated through an image is also communicated in text. That way, a broken image is not catastrophic. If the image links to a web page, for example, then make sure there's also a text link somewhere, too.
The same principles apply to interactive elements and particularly scripts you might put in your email.
Concerns about email security and virus protection mean many email clients do not activate scripts in incoming HTML emails. So your funky applet will likely not appear.
If you must use them, ensure your newsletter and message comes across well without them, too.
You'll find much more information on email design in the HTML/CSS and interactive design sections of this website.
Need more email marketing guidance? Try the email newsletter.