Blog

15 Email Guidelines for Developers

compass

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:

email guide

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.

15. Validation!

Several email marketing services require your code to be XHTML validated. Make sure your code always validates to XHTML Transitional. See here.

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 &copy; and &amp;

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.

How to Reach the Inbox Whitepaper

Share this post

Comment on this post

*
*

Ready to discuss your project?
Request a Quote
Blue Fountain Media is recognized as a
Top Digital Agency by
Ranked #1 Interactive
Agency by top interactive agencies example
Ranked Top 10 Digital
Agency by awwwards logo
Ranked Top 10 Agency
Worldwide by IMA logo
Featured Blog Article
Download our Free Whitepapers
Our Locations
New York Headquarters
New York Headquarters
102 Madison Avenue - Second Floor
New York, NY 10016
Chicago Office
Chicago Office
222 Merchandise Mart Plaza, Suite 1212
Chicago, IL 60654
Seattle Office
Seattle Office
14980 NE 31st Way, Suite 120
Redmond, WA 98052