16 Tips for Troubleshooting Your HTML Email
Coding HTML for email can be tough. If you’ve missed even just a closing tag when coding, your entire email can be sabotaged. If you’ve included video, Flash, rollovers, JavaScript or even a simple picture or text, chances are it won’t show up the way you wanted it to—that is, if it even shows up at all.
Some common problems are:
- Syntax issues: improperly nested tables or missing tags
- Images aren’t showing up the way you wanted them to
- Fonts aren’t displaying correctly
In this infographic, we’ve included solutions for these common problems, as well as tips to make your coding job a success.
If you’re stuck on an HTML email bug, check out Interactive Testing, which allows you interact directly with email clients to test, troubleshoot, and preview changes to your HTML in real-time. You can go way beyond static screenshots to preview things like animation, hover effects and video.
Click on the graphic for an enlarged view. The entire text of the graphic is also available below.
CODE THERAPY
Identifying What Went Wrong When Coding Your HTML Email
The problem with coding email is that just one miniscule misstep has the potential to derail an otherwise perfectly executed email. To help you correctly identify the culprit sabotaging your project, we have outlined some common problems and solutions, along with tips to make your coding job a success.
Common Problems:
Images Aren’t Showing Up
There are a variety of reasons why images might not display as you’d expect.
- Stuff Just Doesn’t Work the way it does in your browser. Video, Flash, rollovers, JavaScript, or even simple surveys have limited support in email.
- Text On Top Of An Image: Background images aren’t supported in Outlook versions 2007 and later. Avoid using background images, or try using a background color as a backup for when background images won’t display.
- Links and Hosting: Images need to be hosted on a publicly accessible server and referenced absolutely by your HTML in order to display properly.
- Blue Borders Around Images: Blue borders can pop up around images that also include a link. Ban blue borders by using a little CSS: <img src=“http://www.esp.com/images/logo.gif” style=“border-style: none;”>
- File Formats: Some email programs are picky about the type of image file you’re using. If you’ve used a PNG, BMP, or TIF file, try replacing it with GIF or JPEG instead.
- Image Blocking: Over half of email programs disable images automatically until the user clicks “show images.” There’s unfortunately no way around this; although you can ask subscribers to add you to their address book so that images in your emails are turned on all the time.
- Gaps Under Images: These gaps can be especially apparent in designs where the layout consists of several images sliced apart and pieced back together in a table-based design. There’s an easy fix: just add a little bit of inline CSS to each of the troublesome images: <img src=“http://www.esp.com/images/logo.gif” style=“display: block;”>
- Fonts Aren’t Displaying Correctly: If text is showing up in a font you didn’t expect, this is usually for one of two reasons: 1) The font you’ve specified isn’t installed on the computer used to view the email. For reliable results, use web-safe fonts, such as: Arial, Verdana, Georgia, Times New Roman, Tahoma, and Trebuchet. These fonts come installed automatically on most computers. 2) If fonts were specified in the <head> of your email in CSS rules, Gmail will strip them out. The best solution is to move all your font styling inline.
Still Having Trouble?
Troubleshooting HTML: Use the tips below to troubleshoot your coding step by step.
- Override Default Settings: Some email programs and browsers have their own ideas regarding how specific elements should be displayed. Be sure that you include values (even if they’re “0”) for table cellpadding, cellspacing, image borders, etc. Explicitly stating font colors, sizes and faces can also prevent text headaches.
- Troubleshooting Tables: If you’re having issues with cells, columns, or rows not appearing in a table, add a border to the table to identify problems and better visualize the table structure.
- Isolate The Problem: Determine the source of the problem by completely removing the offending HTML and reintroducing it bit by bit. Alternatively, test the misbehaving HTML alone to see if elements elsewhere in the email may be interfering.
- Double-Check Your Math: If your layout is off by just a pixel or two, try adding all the table cells and making sure they equal the width of the parent table. Take caution with CSS padding and margin; some email clients include these in their “width math,” while others disregard it.
- Text Isn’t Aligned Properly: If you’re seeing centered text when you’d prefer it left-aligned, make sure you’ve included properties like valign and align in <td> cells and <p> tags.
- Spot Syntax Issues: Use the W3C’s HTML validator to spot syntax issues. The validator can let you know if there are any common errors such as missing closing tags or improper table nesting.
- Open Your HTML In A Browser: With tools like the Firefox Web Developer Add-On, you can disable images, hide background images, show ALT attributes, and much more.
- Borrow A Pair Of Eyes: It’s often hard to see our own mistakes, especially when we’ve been intensely looking at something for a while. Have someone else take a look. Perhaps it’s something as simple as a missing quote, an attribute that you misspelled, or an unclosed tag.
With countless issues that may occur while coding an HTML email, being aware of these common mishaps and quick fixes can help eliminate most of the frustrations and save time for the other fun tricks designers and coders enjoy.
Sources: KB.MAILCHIMP.COM, EMAILRESPONSIBILY.COM, LITMUS.COM
