Cures For the Common Code: Troubleshooting Your Email Marketing Code Issues

Stephen Sharp — Wed, 05 Jan 2011 21:49:18 +0000

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 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 ’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

like valign and align. Without those attributes defined, the HTML text will float in the vertical middle within the

tag. If that doesn’t work, review how the overall table is set up, and if the

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:

Gmail/Yahoo!
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

tag, and NOT within the tag.

AOL
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!

Email Gets Rough Around The Edges

Experian CheetahMail Client Services — Fri, 25 Jun 2010 14:52:11 +0000

From a designer’s point of view, emails could be described in their broadest sense as a series of rectangles with content inside of them. Just think of your email template’s wireframe — it’s a series of black and white-filled rectangles, right? When you think of it, nearly everything designed for viewing on a screen follows the laws of the rectangles and color fills, but that’s not necessarily the way it has to be.

A recent design trend that I’ve been intrigued by is the use of textures, uneven edges and off-kilter layers to create a more organic feel to email campaigns.

American Eagle has really been at the cutting edge of this trend. Their campaigns use all three of these techniques, plus handwritten fonts and drop shadows (rather than frames), to make their imagery stand out in the inbox. The innovative use of curled photographs and plaster background textures add even more intrigue to the design. I love the way the background texture blends into the white naturally.

Going one step further, American Eagle’s sister brands are getting in on the fun as well. 77kids utilize a linen-style background rather than a plaster one, along with heavily distressed photo borders and paper clips. It’s a unified look for the master brand and the individual brand, and manages to look home-made yet modern.

Taking a step back and looking at these designs through the lens of history, they remind me quite a bit of popular print advertising from the 1990′s, known commonly as “grunge” style. Grunge was not just associated with music and fashion in the 90′s, but was also made popular by designers such as David Carson. Even companies as straight-laced as Nike and Coca-Cola experimented with grunge visuals during the 1990′s.

If the fading retro-electro design trend of the past 10 years reminded us of the 1980′s, it makes sense that we should expect to see a renaissance of 1990′s style in email and elsewhere in the next decade.

Marketing Forward » design

Cures For the Common Code: Troubleshooting Your Email Marketing Code Issues

Email Gets Rough Around The Edges