Correct use of HTML and CSS in email messages

When formatting email messages using HTML, it is advisable to keep in mind that numerous currently used email clients render such messages in different ways. A nicely looking web page designed for a web browser (Firefox, Internet Explorer, or Opera) might look greatly distorted when viewed with an email client software (Outlook, Thunderbird, Yahoo! Mail, or Gmail). Should you fail to follow easy rules on using HTML and CSS for email message formatting, your subscribers may receive an ugly looking mixture of links, text and images instead of a well designed email, and would most probably unsubscribe from further newsletters from you. Our guidelines provided below will help you to create HTML-formatted email messages equally looking in most email clients.

Guidelines on creation of HTML-formatted email messages

1. Tables:

   • Use tables to create the layout of an email. If you usually feel yourself comfortable with DIV tags, you have to give them up for a while as their support by email clients is currently very limited.
   • To specify a certain background for the entire message a table with 100% width should be used with another table placed inside it to hold the main contents.
   • It is advisable to avoid very deep nesting level of tables in an HTML-formatted email, as the entire layout may be distorted by several email clients.

2. HTML tags:

   • Do not use LINK tags to reference external CSS style sheets – such tags are as a rule automatically removed by email clients.
   • Never try to embed either video/audio content or JavaScript – such content is almost always ignored by email viewing software.

3. Images:

   • For all images embedded in the text an alt attribute with alternative image description should be specified. Many email clients do not display embedded images by default (but allow a user to enable them if necessary), so this step will help your recipients understand the contents of the email even with images disabled.
   • It is not a good idea to make your email message contain only images without any text. If a recipient's email client disables images by default, your subscriber would see nothing but a row of empty boxes instead of nice images. A message should be readable even if the recipient has switched to the text-only mode (text/plain).

4. Styles:

   • Most email clients automatically cut out external style sheets including those referenced using LINK tags. Therefore inline styles for HTML tags are recommended:

     <P style="font-size:10pt; font-style:italic; color:#006699;">some paragraph text</P>

   • Use of shorthand notation for CSS properties is discouraged, e.g.:

     border: solid 1px grey;

     To be sure that an email message is correctly displayed in all email clients, specify full names of all properties:

     border-style:solid; border-width:1px; border-color:grey;

   • Unfortunately, CSS is rather poorly supported by many email clients as compared with web browsers. To make your email message look correct for all recipients, use only the following limited set of style properties:

     background-color
     border-...
     color
     font-...
     letter-spacing
     line-height
     margin-...
     padding-...
     text-align
     text-decoration
     text-transform

5. Links:

   • Hyperlinks must have absolute addresses. Links pointing to relative addresses will simply not work.
   • The text of a link should not be longer than 65 characters, as the link might become inoperable if a part of it is carried over to the next line. Either manually shorten the link text, or (if the link URL is used as its text) use a URL shortening service like http://www.tinyurl.com/.
   • Each link should have the target="_blank" attribute specified, it will help the recipients to open the link in a new browser tab or window. It is especially helpful for those who use web-based email clients such as Gmail or Yahoo! Mail.

Choosing and testing the email design

Remember that most recipients will first see your email message in a small preview pane before they decide whether it is worth opening and reading. Check twice how informative the top-left corner of the message is, that is sometimes the only thing one can see in a preview pane. That part should clearly deliver the essence of your message and be well readable.

When an HTML message has been created, test it by opening with the most widely used web browsers and then with popular email clients before sending it to subscribers.

If you have a choice between a simple and a complicated design for a HTML-formatted email message, choose the simple option. In this case chances that the message is incorrectly rendered by some email clients would be minimal.