• home
• resources
• whitepapers
• html design for deliverability

Text and Images in HTML Email

To make sure that your HTML email looks its best in all possible email clients, have your designers follow these guidelines and best practices.

• Use both HTML text and images in the message, not all images.  That way, recipients can still read the message if the images are turned off.
• Design images in .gif or .jpg format and include height and width parameters so the sizing remains correct.
• Store images on a web server and link them to your message instead of embedding them in the message itself.  You must use the full URL and not just the local reference.
• Use alt text for all of your images so recipients don’t need to turn the images on in order to see what is missing.  Be as descriptive as possible, especially for your calls-to-action.  You may even include the offer in your alt tags so it remains visible to your recipients at all times.  For example:
  <img src="/images/listrak.gif" alt="$50 off Listrak’s Creating Effective HTML Email Campaigns Webinar. Use coupon code HTMLWEB" width="106" height="49">
• Also, for your Gmail subscribers, it’s important to remember that the text at the beginning of your message displays in the inbox after the subject line.  If the email contains an image at the beginning, Gmail will display the alt tag messaging in the inbox.
• Use background colors in both the body and the table in order to ensure the color shows up in the multiple email clients.  Some will strip out the background color in the body, but the messages will render correctly if the color is also included in the table.
• Remember that Outlook 2007 does not support background images in table cells but it does support background colors.  If you use background images, make sure you also use a background color in the cell that will look okay for Outlook 2007 users, such as:
  <td background="/ images/listrak.gif" bgcolor="3366cc">
• Don’t use image maps as they are not fully supported across all email clients.  It is a better practice to slice the image, using alt tags for each section, and link each part separately.
• Format fonts without CSS for the highest email client compatibility:             
  <font face="Verdana, Arial, Helvetica, sans-serif" size="2">My text</font>
•  If you do use CSS to format text, be sure to use inline styles.
• Stop using invisible text (text that is the same color as the background) if you are using it for any reason.  This is a tactic used by spammers and your messages won’t make it through the spam filters if they contain invisible text.