10 tips to code a better HTML e-mail
February 26th, 2012Coding an e-mail is not an easy thing. Just like building a website and ensuring the cross-browser rendering, you must work the same way on your HTML template. Gmail and Hotmail don’t interprate the code similarly, same for Yahoo and most of the e-mail clients (i.e Thunderbird, Outlook, Mail, . .). The rendering on Outlook can also turn into a nightmare: the 2003, 2007, 2010 versions are using different ways to display the HTML.
A general rule is to keep your code (very) simple and standard-compliant.
1. Use and abuse of tables
Web clients are not really up to date in terms of HTML. Most of your code has to be done in HTML1. So to structure the layout of your e-mail, you have to use tables, raws and cells: <table>, <tbody>, <tr> and <td>.
No more div, limit the usage of <span> to the minimum, don’t stack elements (z-index property, PNG format don’t work in e-mails): Keep it simple!
2. Use inline CSS
It is common practice to not use a CSS file, or put the CSS in the <head> but instead inline CSS. Again, the mail clients are not like web browsers.
3. Detail your CSS in every <td> tag
Even if it results to a longer file, try not to optimize the code with short writting. Some e-mail clients may not take into account the inherited properties, so be sure to write your inline css wherever it’s necessary.
Example:
DO’s: <td style=”background-color: #FFFFFF; padding-bottom: 15px; padding-top: 15px;>
and
DON’T's: <td style=”background-color: #FFFFFF; padding:15px 0px;>
4. Avoid the <p> issue
Hotmail (and some others) adds a break line after every paragraph. If it breaks your design, try to avoid using paragraph tags by playing with the tables and <br>.
DO’s: <td>text text text text<br><br>text text text<br><br>
and
DON’T's: <td><p>text text text</p> <p>text text text</p></td>
5. Avoid the color and border issue
Some of the webmails (Yahoo, Gmail, especially) add a default color to hyper links, and default border to images. Define systematically a border:none; in your style, and a color:#yourcolor; in your <a> tag. Unless you like the default border style given by the email client.
DO’s: <img border=”0″ src=”http://yourdomain.com/yourimage.jpg” alt=” ” width=”285″ height=”150″>
and
DON’T's: <img src=”http://yourdomain.com/yourimage.jpg” alt=” ” width=”285″ height=”150″>
6. Height and width of images
Never forget to set up the size of your image. It will maintain the general layout even if the images are blocked.
DO’s: <img border=”0″ src=”http://yourdomain.com/yourimage.jpg” alt=” ” width=”285″ height=”150″>
and
DON’T's: <img border=”0″ src=”http://yourdomain.com/yourimage.jpg” alt=” “>
Also prefer JPG to PNG, it works better.
7. Use padding rather than margin
Hotmail and some others don’t take into account the margin, try to replace them with padding. Also define to “0″ the cellspacing and the cellpadding, as it is not the default style in some e-mail clients.
DO’s: <table width=”610″ cellpadding=”0″ cellspacing=”0″ style=”color:#333333; padding-top:16px;”></table>
and
DON’T's <table width=”610″ style=”style=”color:#333333;”></table>
8. No relative URLs
Most of the e-mail clients won’t download the images if you use relative URLs. So make sure you always use absolute URLs of images stored on a web server.
DO’s: <img border=”0″ src=”http://yourdomain.com/folder/yourimage.jpg” alt=” ” width=”285″ height=”150″>
and
DON’T's: <img border=”0″ src=”folder/yourimage.jpg” alt=” ” width=”285″ height=”150″>
9. Don’t forget the alt text
As mentionned above most of the e-mail clients (web or not) block by default the images you insert in your e-mail. It is really important to take this into account as a lot of your database recipients won’t download the images. While you are building your template it is necessary to take this factor into account.
So do not forget the “alt” in your <img> tag as this is the first element people will see when opening the e-mail. Make sure this alternative text is visible.
Even if it is not relevant to add an alternative text, (shadow image, separation image), put an empty one.
10. Test, test and test again
Last but not least, test your e-mails on every clients (embed or online) you can. Also do not forget to work on a text version and to check the display when images are blocked.
Want more information about the different clients and best practices? Visit the following websites:
http://www.campaignmonitor.com/css/
http://www.email-standards.org/
http://mailchimp.com/resources/
