Even though coding for email marketing is, in many ways, easier than that of a website, mistakes are very common. From using functionality that doesn’t render well on certain mobile devices to developing code that email clients just won’t understand, email development has its fair share of frustration. Fortunately, HTML email issues 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 developers not understanding the subtle differences in coding an email versus a website. Where div tags and other positioning code work well in formatting a website, table structures should be strictly adhered to for coding an email. In addition, code validation can often be frustrating, since most validators are set for website development and will often produce errors on an otherwise perfectly acceptable email HTML document.
Of course, since email is a repetitive medium in which multiple campaigns can get deployed each week, a small problem can often be mistakenly replicated before it is corrected. Very often, the same coded template gets reused on a regular basis to deploy campaigns—one in which 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 is also the matter of which email client (Gmail, Apple Mail, Outlook 2013, etc.) you’re using to view the code. Knowledge of what works across each of the major email clients will help determine where rendering errors are occurring and why.
Check code with an online QA application.
First and foremost, using an email QA aggregator like Litmus.com or Email on Acid to review your coded document can save you a mountain of trial-and-error frustration. QA programs like these are web-based, so they’re accessible virtually anywhere, and they allow you to view your coded campaign across most, if not all, of the major email clients, tablets and smartphone mobile devices. They also enable you to send test results to clients to view, thereby providing added value that peace of mind can bring before a large email deployment.
Spot these 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.
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 emails in Outlook 2013 have a mysterious “break” after certain images.
When working with images in Outlook 2013, it’s important for them to have at least a 20-pixel height. If the height is less than 20 pixels, the email program will insert a line break underneath the image, causing a blank space to cut across the template. Either increasing the line height in the code or increasing the height of the image will fix this problem.
Zero in on specific email client rendering issues.
Gmail/Yahoo!
Extra line spacing is added to HTML text, which can break a design. This can be controlled with the correct usage of inline styles either within the font tag or the td tag that holds the text.
AOL
Form functionality like search fields and drop-down boxes won’t work. Instead, consider making a poll that allows users to click on their selection, then measure how many clicks each link received within the poll to determine the winner.
Microsoft Outlook 2007-13
Most issues involving Outlook 2013 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 2007-13 also 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.
In addition, animations do not work in Outlook 2007-13. 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 all the major email clients.
