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. Design problems lead to a poor response rate, more opt-outs, less respect, and more accusations of spamming.

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 or forms. Very few clients support them.
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 inefficient, likely to trigger a spam filter, and likely to go unseen.
Don't use external images. Many clients will not download them. Instead, the images should be embedded in the email. Gammadyne Mailer can do this for you automatically, even if the images are not local. On the HTML Body/Options branch, set the Image Locality field to "Internal".
Don't use style sheets. External style sheets almost certainly won't work. Internal style sheets will not work on many web-based clients. 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">

Gammadyne Mailer has the highly useful ability to automatically convert style sheets to inline styles. Simply check the "Make Styles Inline" box on the HTML Body/Options branch.

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
max-width
min-width
opacity
position
right
table-layout
top
visibility
z-index

Recommendations

Use tables for controlling the layout. The results tend to be more predictable than div's.
Use the cellpadding and cellspacing attributes in all tables. Otherwise the client may choose an odd default.
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. Outlook and Outlook.com in particular have lousy support for even basic features of HTML, and should be tested thoroughly.
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.
Keep the content width under 600 pixels. Email clients will usually show the email in a smaller space than a browser would. Using the same width as your website is not appropriate.
Avoid colspan's and CSS positioning.
Don't put an inline style in the <BODY> tag. It is likely to be ignored, especially when the email is quoted in a reply. Put a <DIV> just inside the <BODY> instead.
Run the HTML code through the W3C HTML Validation Service to ensure that it contains no errors. In Gammadyne Mailer, you can do this by clicking the "Validate HTML" button at the bottom of the "Raw" tab.

Images

If your image needs animation or does not have more than 256 unique colors, use GIF. Otherwise if the image needs transparency, use PNG. Otherwise use JPG.
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. Gammadyne Mailer can do this for you by checking the "Auto Image Dimensions" box on the HTML Body/Options branch.
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">
Outlook may not obey the specified width and height for images. It is recommended that you resize the images to the same size that you wish them to be displayed at. Gammadyne Mailer can do this for you by checking the "Shrink Images" box on the HTML Body/Options branch.
Reduce load times by running images through TinyPNG or JPEGmini or WebsitePlanet.

Mobile-Friendly Emails

Because more than half of all emails are opened on mobile devices, it is important to follow these guidelines to ensure that your email is mobile-friendly:

Use a font size of at least 16px. Sans-serif fonts are easier to read than serif fonts at small sizes.
Use a single column. It is unlikely that a mobile device can fit more than one.
Don't place hyperlinks too close to each other. The user must be able to tap one without touching the one next to it. Avoid menu bars.
The email should be able to collapse to 480 pixels in width without displaying a horizontal scroll bar.
Try to keep the subject under 30 characters, as you don't want it to be cut off.
On some clients the first few lines of text are displayed as a preview. Try to make this something that grabs the recipient's attention. This is often called the "preheader" because this text is above the header image.
Keep the message concise. Use short, digestible chunks, like bulleted lists.
Use strongly contrasting colors. Some users keep their display dim in order to conserve battery.