Gammadyne Corporation

HTML Design Considerations For Email

HTML email is critical to the success of newsletters and other types of mailings.  Its visual appeal is far beyond what can be achieved with plain text.  And unfortunately, there is no third option with broad support.  For now we are all stuck with HTML email.

In an ideal world, HTML email would be no different than an HTML web page.  Alas, we do not live in such a world.  There are some important differences that you must be aware of when designing an HTML email.

Limitations

Following is a list of problems to avoid when designing an HTML email.  Breaking these rules will cause unpredictable results depending on which email client is used to view the email.

  • Don't use embedded objects or scripts.  They almost certainly won't work, and are likely to be flagged by spam filters.
  • Don't use frames.  Very few clients support them.
  • Don't use style sheets.  External style sheets almost certainly won't work.  Internal style sheets will not work on many web-based clients, including Gmail.  In fact, you should be aware that many clients ignore everything before the <body> tag.  Instead, you will have to rely on inline styles, like this:

    <div style="color: red; font-size: 1.1em">

  • The <body> tag should not use attributes or an inline style.  If necessary, put a div tag inside the body.
  • Don't use external images.  Many clients will not download them.  Instead, the images should be embedded in the email.
  • Do not use a background image or solid color.  Many clients insist on a white background.
  • Don't use a single image for the entire email's content.  It is inefficent, likely to trigger a spam filter, and likely to go unseen.

Also, it would be wise to avoid the following CSS properties:

background-image
background-position
background-repeat
border-spacing
bottom
caption-side
clear
clip
cursor
display
empty-cells
filter
float
left
list-style-image
list-style-position
margin
opacity
position
right
top
visibility
z-index

Recommendations

  • Use tables for controlling the layout.  The results tend to be more predictable than div's.
  • Use alternate text with all images.  Many clients will not display images without the user's approval.  Here is an example:

    <img src="cid:foo.jpg" alt="Description of the image goes here">

  • Use the cellpadding and cellspacing attributes in all tables.  Otherwise the client may choose an odd default.
  • Specify a width and height attribute for images.  This will keep the layout consistent in the event that the images are ignored.  And some email clients may not be able to display the image otherwise.
  • Use hspace and vspace attributes for images instead of margin or padding in an inline style.  For some reason, Outlook 2007 and Hotmail don't properly support these styles.
  • Send a test email to your own email accounts at Hotmail, Yahoo, and Gmail.  Also view the email in Outlook and possibly Thunderbird.  This will cover the majority of users.
  • Never use Microsoft Word to design the HTML.  It will embed all kinds of proprietary Microsoft junk in the HTML that will not work in many email clients.
  • Run the HTML code through the W3C HTML Validataion Service to ensure that it contains no errors.  In Gammadyne Mailer, you can do this by clicking the "Validate" button at the bottom of the "Raw" tab (requires version 37.0 or later).