HTML E-mail Best Practices

November 9, 2010 | Web Design

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.

Content

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

Design

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

Coding

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

Other

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

Inspiration

Resources

Tweet
Link