For over 6 years, I have been involved from design and layout to directing other web designers on creating best practices html email. Email marketing is still the most effective method of communication whether you are attracting new customers, nurturing leads, developing loyalty or transactional messaging. HTML Email design and layout is really a simple process that designers seem to have issues, so the guideline to HTML Email best practices below will help you in keeping things simple.
Use Tables
When coding your html email, you will need to think like a designer when web pages were created using tables. An html email is nothing more than a web page using tables for your page layout. It’s the only way to layout an email easily while ensuring it works in as many email clients as possible Nest your table if you need to, however, make sure to test thoroughly since there is no consistency with the different email clients. (i.e. Yahoo, Gmail, Outlook, Hotmail…etc.)
Limit CSS use
The use of CSS in your html email should be limited for formatting text. CSS can also be used in-line. External CSS will not work and your layout will not render properly. Keep things simple and know how to apply CSS in your html email. Again, any layout and rendering issues will be discovered through the testing phase. Having a guideline will help you with the frustration of creating your html email.
Width
There are two thoughts when determining the width of your html email. One is the pre-defined width (pixels) and the other is full width (%). I use a predefined width for my emails so I can control the way it’s viewed through the different email clients. Use full width if you are sending out a text based newsletter and even then I would test on the different monitor resolutions to view the how it renders, use your judgement. Use width of email around 620px and make sure that the table cells width are set (table width=”120px”). For a majority of your email designs, you will almost always use a fixed width.
Images
Use of images on your html email must be displayed as an absolute path from your server. (i.e. http://www.yoursite.com/images/nameofimage.jpg). This is the difference when coding image display from your website pages where file/assets are localized (i.e. ./images/ nameofimage.jpg). You will usually figure this out during testing if your images are not displaying properly. Make sure that you use the ALT tag for your images, this is so that email clients who block images will still show the text reference of the image.
Test
During this phase, you will find all display and layout issues. This is the point where you will refer back and forth from the headings above depending on issues you might have. Also, very important, you will need to create account from the different email clients for your testing. (yahoo, gmail, hotmail, etc.) Make sure you test your html email from the different email account providers.
Spamming
As the designer for html email marketing campaigns, you should have some knowledge about Spam laws. The Spam laws are different from country to country, so as an added value that you provide, make your clients/boss aware of this law. Consider how the list was gathered, geographical location of email recipients, are they opted-in. Spam laws are much more strict now since email marketing is a major component in any online marketing campaigns.
Subject Lines
You should avoid using the word “FREE” in your subject line as this will trigger the spam filter with email clients, there are more words that will not necessarily trigger the spam filter but will have a negative effect on the open rate, so you should be aware of this. There are too many for me to list here, so do a quick Google search on this subject. Here are three examples to note (Help, Percent, and Act Now.) The general rule of thumb in email marketing is to keep your subject line to 50 characters or less.. The From line should clearly communicate who the sender is.
Content
There are certain elements that should always be present in your email. There should be a link to your privacy policy, subscription opt-out, and a link to a web page if the recipient is having difficulty viewing the email. Keep the most relevant/important content above the fold and that there is a clear call to action.
Analytics
If you are using a third party vendor to deliver your email campaign, they should already provide you with the metrics you need to determine the success of your email campaign. If you are deploying your email campaign in-house, make sure that tracking is implemented so that you are able to measure that provide key performance indicators of your campaign. (i.e. open rates, click-throughs, unsubscribes, etc.)
Thanks for the great list, wdstandards. I knew that there were some ‘limitations” but I now I have a better understanding that to keep an eye on while creating a message for my email marketing. Thanks!