Even though coding for email marketing is, in many ways, easier than that of a website, mistakes are very common. Fortunately, these mistakes are easy to troubleshoot, and most are even easier to fix.
This handy reference helps HTML coders quickly establish the cause of an error and outlines guidelines for proper email coding.
Why are HTML Errors in Emails Common?
Most issues are simply due to messy code. Very often, code gets re-used on a regular basis to deploy campaigns where the content and images are continually being updated and moved around. This can lead to unintentional duplication or omission of HTML tags, and QA oversights.
There’s also the matter of which email client (Gmail, Hotmail, Outlook 2007, etc.) you’re viewing the code. Knowledge of what works across each of the major email clients will help in determining where rendering errors are occurring and why.
Checking Code with an HTML Validator
First and foremost, use an HTML validator, like the one built into the CheetahMail application, to check your code. It reviews
the code and generates a report, detailing where errors like missing HTML tags, malformed table structures and alignment issues exist in the code.
In addition, make use of QA options like Mailbox Snapshot tools which provides screenshots of what the code will look like across multiple email clients.
Across the Board:
Some coding issues tend to be universal. Here are a few of them:
- Layout is off by one pixel or pushes out past the border of the design
This is usually due to one of the <td> width measurements exceeding the total width of the table. The widths are determined by a simple math equation involving the table cells; usually the math just needs to be corrected. If you add up the individual table cells and they don’t equal the <table>’s width, you’ve found the problem. The problem could also be from the use of CSS to format the design. Certain email clients like Outlook 2007 and Hotmail won’t understand formatting CSS (margin:1px;) and will disregard it. The use of CSS in email is not a best practice.
- Parts of a layout don’t display
This can be due to a malformed table structure, incorrect HTML syntax, or colspans that are missing or have incorrect numerical values.
- The background image behind the HTML text repeats
The best practice is to design your creative so it doesn’t rely on background images. If a background image must be used, leave some extra space for the HTML text to “grow” when rendered in different email clients. Since various email clients tend to add extra line-spacing to HTML text, this will allow for the table cell holding the HTML text to expand while maintaining the integrity of the design.
- HTML text isn’t aligning properly and is leaving blank areas in the creative
Make sure to use aligning properties inside the <td> like valign and align. Without those attributes defined, the HTML text will float in the vertical middle within the <td> tag. If that doesn’t work, review how the overall table is set up, and if the <td> measurements are correct.
- HTML emails in Outlook have a mysterious “break” every 800 pixels from the top of the email down
This is caused by the rendering engine that Outlook 2007 and 2010 are built on. Since Microsoft Word inserts an automatic page break every 11 inches, or the length of a letter size document, Outlook 2007 does the same. There’s currently no way to code around this issue without changing the design to use flat colors and white space to counteract the automatic breaking.
Email Clients and Their Personalities
Once HTML code has been developed and validated, testing can begin across the major email clients on both the MAC and PC operating platforms. To know the specific coding pitfalls of the email clients is to have reached true HTML email coding enlightenment!
Here are some examples to watch out for:
Known to be very finicky, Gmail will pick up on the slightest coding mistake and render the email incorrectly. Extra line-spacing is added to HTML text which can break a design. This can be controlled with the correct usage of inline styles to control how the HTML text renders. Background images should be defined within the <td> tag, and NOT within the <body> tag.
Form functionality like search fields and drop down boxes won’t work. Consider dynamically inserting forms based on domain, or linking to a hosted page offering forms.
- Gmail in Firefox
Adds extra “padding” to images which causes extra white space to appear around an image’s border. You can alleviate this by adding an inline style called “style=”display:block;” to the img tag. This work-around removes the imposed padding and fixes the issue.
- Hotmail in Firefox
The same issue mentioned above regarding Gmail in Firefox also happens in Hotmail in Firefox.
Microsoft Outlook 07
Most issues involving Outlook 07 have to do with it being based on the HTML rendering engine of Microsoft Word. Microsoft Word is predominantly for text formatting, so it cannot interpret sophisticated code. Basically, if Microsoft Word can’t render code correctly, chances are Outlook 07 will also have trouble with it.
- Outlook 07 has no support for background images
This is a common problem for clients who use system text with a graphic behind it. Because Outlook 07 won’t display the background, it will just appear as a blank white space. As a quick fix, pick a color out of the design’s background and insert it as a hex color. Another option instead of using system text, is to code that section of the design as an image.
- Animations do not work in Outlook 07
It will only display the first frame. Because of this, it is necessary that the first frame of an animation be a significant one; if the viewer is only capable of seeing the first frame, it needs to capture the basic idea of the message.
Adhering to these simple guidelines will ensure your code will be presented properly across the major email clients. Now get coding!
- Outlook 07 has no support for background images