HTML E-mail: Best Practices
HTML e-mail, and in particular newsletters, is an area that is very challenging to design and code. The biggest obstacle is that there are so many different clients available for reading email, each of which can display the same e-mail in vastly different ways. 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.
HTML support in e-mail clients is a long way behind HTML support in browsers in terms of standards and support for them. This means that when coding HTML 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 below provides 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.
<a style="color: #ccc;" href="http://www.waynemoir.com/"><span style="color: #ccc;">Wayne Moir></span></a>
- 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
- 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.
- Templates Gallery – Campaign Monitor
- Beautiful E-mail Newsletters
- Gallery – Campaign Monitor
- Showcase Of 30 Sweet E-mail Newsletter Designs – Spyre Studios
- The Basics for E-mail Template Design – DesignM.ag
- Principles of Beautiful HTML E-mail – SitePoint
- E-mail design guidelines – Campaign Monitor
- How to Code HTML E-mail Newsletters – SitePoint
- 20 E-mail Design Best Practices and Resources for Beginners – Nettuts+
- E-mail Newsletter Design: Guidelines And Examples – Smashing Magazine
- UK Election E-mail Newsletters Rated – Jakob Nielsen
- Best Practices For Bulletproof E-Mail Delivery – Smashing Magazine
- The getting started checklist for new clients – Campaign Monitor
- 31 content tips and ideas for your B2B e-mail newsletter – E-mail-Marketing-Reports
- 10 Definitive Tips for Writing Captivating E-mails – Six Revisions
- Design and Build E-mail Newsletters Without Losing Your Mind (and Soul) – Smashing Magazine
- Guide to Creating E-mail Newsletters – Webdesigner Depot
- 10 Design Lessons From HTML E-mail Templates That Actually Sell – Design Shack
- How To Code HTML E-mail Newsletters – Reach Customers Online