Before getting into specific details of HTML coding for email newsletters, the most important concept for marketers to understand is that developing them is drastically different than coding a standard Web page - even taking into consideration legacy browser standards.
The major browser based email services such as Gmail, Hotmail, Yahoo!, and AOL are all light years behind current browser rendering capabilities. And then, of course, there’s Microsoft’s Outlook program. Since Office 2007, Microsoft changed their rendering engine from Internet Explorer’s to that of Word. Feel free to take a moment to try and wrap your head around why a company would swap their layout engine from a web browser to a word processor.
These are the kind of obstacles you have to deal with in the strange world of email coding. Let’s get started on 15 ground rules developers should always adhere when creating HTML email templates:
1. No External or Internal stylesheets
When email marketing professionals are developing an HTML email, any and all CSS must be inline only. Yes, this causes a ton of repeated code, but it must be done this way. Email development is generally not very DRY.
2. No DIVs
Coding HTML newsletters is like stepping into a time-machine to the 1990s. All layout structures must be done with tables, as div tags just do not render correctly. On top of this restriction, there are a bunch of little nuances regarding the actual table code. Always remember to set cellpadding=”0” and cellspacing=”0” on every <table>. Also, <td> widths need to be set for every <td> element. Another good, general practice is to avoid stacking <tr>’s.
Try to use independent tables stacked on top of each other with single <tr> elements as much as possible. Often, random spacing will occur in Outlook and other services with stacked <tr>’s. Lastly, do not apply styling to your <tr>s. This styling will be stripped out.
3. Generally, avoid background images
Background images are stripped out in both Hotmail and Outlook, so be careful with inconsistent rendering with background images. In fact, I typically advise avoiding them altogether.
4. Avoid <body> styling
Many browser-based email applications will simply ignore any style commands applied to the body tag. If you need to set a background color, put that attribute within the table element, even if it’s just a container table.
5. Don’t float
Float attributes? Don’t use them. They can be very troublesome and inconsistent.
6. To <p> or not to <p>?
When implementing text, try to use <span style=”block;”> as often as possible. I find that using the <span> command is far more consistent and reliable. Paragraph tags work sometimes, but can be a bit unruly with spacing and other formatting. It will save you a lot of headache to just avoid them altogether and stick with <span>.
7. Don’t take shortcuts
CSS shortcuts won’t render properly. For example, you can’t use “font: 10px/16px #000 Arial”. You need to do each style property separately, like font-size, color, font-family, etc.
8. What about heading tags?
Tags like <h1> should be avoided as they have inherent styling which renders differently across the various email platforms. Stick with <span> for similar reasons as #7.
9. Staying centered
Most of email designs you receive will require centered content. Use “align=center” within a wrapping table to achieve this result. Other techniques such as the <center> tag and “margin: 0 auto” tend to misbehave for entire layouts. The <center> tag will work for content elements, but doesn't work well for table structure.
10. Images displayed Block
Unless you are distinctly trying to have text wrap around an image, it is best practice to use the display:block; style command for consistent image rendering. Even though images are supposed to be block elements by default, some email clients require it to be specified.
11. Image Alt Text
It is always best to apply alt text for the vast majority of images. This will optimize the email in the instance that the user does not choose to enable image rendering when viewing an email.
12. Align your Text
Any <td> that contains text should have the align=”” command with desired alignment selected. When viewing email in a Web-based client using Internet Explorer, text is often automatically aligned center. If you wish your text to be left aligned, for example, you must apply <td align=”left”> to the containing <td>.
13. Text styling
Make sure to style each block of text separately. While tedious, if every element’s font attribute is not directly addressed, a lot of the email clients will use their own ugly default serif fonts.
14. Provide hosted version
While these 15 guidelines do provide consistent rendering across primary email clients like Gmail, Outlook, and Yahoo, it is very rare for an email to render consistently across ALL clients. Providing a hosted version of the email to view in the user’s browser is always recommended as a best practice in the few instances in which rendering is not perfect.
A few common mistakes regarding code validation:
- <img> tags require alt as well as src attributes.
- Emtpy tags, such as <br>, <img> must self close: <br /> and <img src=”” alt=”” />
- Always use HTML entities, such as © and &
Do you have any ideas or suggestions that might also help improve a business's email marketing experience? Please let us know in the space below or at @BFMweb.