HTML E-mail Best Practices

HTML e-mail is an area that is very challenging to design and code. The biggest obstacles are that there are so many different clients available and virtually no adherence to web standards by the clients. Even when the HTML e-mail is displayed properly by the software, the user preferences can be modified extensively; making the final layout even more difficult to predict. This makes testing HTML e-mail a far more challenging task than testing the cross browser compatibility of web sites.

The unfortunate side effect of the lack of web standards support is that when coding e-mail the rules of semantic clean mark-up and the separation of content and presentation go straight out the window if any kind of cross client compatibility is hoped to be achieved.

In my experience following the best practices provide the greatest chance of success.


  • Use a consistent senders name and e-mail address. Avoid using a fictional or irrelevant sender’s name, instead communicate with your recipient personally
  • Write an attractive subject line, The Art of the Subject Line
  • Mark your newsletters in a consistent way to make it easier for your readers to recognize your newsletter. For example by using a tag line at the beginning of the subject line
  • Write an attention grabbing headline, How to Write Headlines That Work
  • Include a clear and specific reminder of how subscribers got onto your list. This gives context for your message and reduces the likelihood of your message being marked as spam
  • Ensure that all copy is well-formatted, making the message easier to read and easier to act on
  • Never put a link before important information, users that follow the link will be left at the target location without context and may mark the message as spam
  • Prioritise content, start with the most valuable information. Your reader should be able to glance at the top of the e-mail and know immediately if it’s worth reading
  • Ensure all images use the alt, height, and width attributes
  • Consider the purpose of the e-mail and include a clear call to action based on this
  • Always check the ‘spam score’ of your newsletters before sending, SpamCheck
  • Test your newsletters before sending them, once they have been sent they cant be taken back


  • Include a prominent unsubscribe link
  • Ensure the e-mail design provides a visual connection to the brand
  • Many people don’t actually open their email; they instead view them in the preview panel. Always design your emails to a maximum width of 600px


  • Tables for layout is a necessary evil as HTML compatibility across clients is inconsistent
  • CSS support is poor, compatibility is improved across clients by using inline CSS. Guide to CSS support in e-mail clients
  • Many e-mail clients ignore background colours specified in CSS, use a container table for body background colours
  • Borders don’t work
  • Some e-mail clients overwrite link colours with their defaults, this can be avoid by specifying the style inline and in a redundant span inside the a tag
  • Images should be stored on a web server and linked to rather that included in the e-mail in order to reduce the possibility of image blocking. Image Blocking in E-mail Clients
  • Avoid using JavaScript, most e-mail clients will disable it anyway
  • Use the target=”_blank” attribute for the a tags, so that people who read with web mail services don’t have the requested page appear within their web mail interface


  • Motivate your users to add you to their white lists
  • Always insert the current date in the content, if the date isn’t mentioned or is provided incorrectly the spam score will be increased
  • Verify your subscribers with sign up confirmation. This means that when a user subscribes to your mailing list, they will be sent an e-mail with a link that they must click on to confirm their subscription. This provides a way of validating the e-mail address and reduces the possibility of being reported as spam



Wayne Moir

User Experience Designer