Code Therapy: 16 Tips for Troubleshooting Your HTML Email

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 onluselver= Mousedu form> 1 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. IMAGES AREN'T SHOWING UP. There are a variety of reasons why images might not display as you'd expect. Your Guide to Fall Fashion Intox Fashion Alerts alertsfashiondeals.com Nov 1 (1 day ago) This message contains contains unsafe or insecure content Fall Color Trends 3 X Suede Pumps PNG 8 Shop new trends» 2 Text on Top of an Image 6 Image Blocking Background images aren't supported in Outlook versions 2007 and later. Avoid using background images, or try using 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 a background color as a backup for when background images won't display. emails are turned on all the time. 3 Links and Hosting 7 Gaps Under Images Images need to be hosted on a publicly accessible server and referenced absolutely by your HTML in order to display properly. 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 INCORRECT: Relative links eimg src-"images/logo.gif CORRECT: Aboslute links img aro-"http://wwwimages.com/logo.gir style-display: block> cimg arc-Thttp://www.images.com/logogirs 4 Blue Borders Around Images 8 Fonts Aren't Displaying Correctly Blue borders can pop up around images that also include a link. Ban blue borders by using a little HTML or CSS: If text is showing up in a font you didn't expect, this is usually for ane of two reasons: a. 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 eimg sro-http:/limages.com/logo.gir border-o> eimg sro-"http://mages.com/logo.gir style-"border-atyle: none,"> Arial Verdana Georgia Times New Roman Tahoma Trebuchet 5 File Formats These fonts come installed 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 JPG instead. automatically on most computers. b. If fonts were specified in the chead> of your email in CSS rules, Gmail will strip them out. The best solution is to move all of your font styling to be inline. PNG BMP TIF GIF JPG STILL HAVING TROUBLE? TROUBLESHOOTING HTML Use the tips below to troubleshoot your ooding step by step.

stda «table cellpadding-"0" cellspacing="0" width-"600 border""

Some text goes herec/td>

More text goes here

More text goes herec/td> DOUBLE-CHECK YOUR MATH If your layout is off by just a pixel or two, try adding up all the table cells and making sure they equal the width of the parent table. Take caution with 600 ISOLATE THE PROBLEM Determine the source of the problem by completely removing the offending HTML, reintroducing it bit by bit. Alternatvely, test misbehaving HTML alone to see if elements elsewhere in the email may be interfering. CSS padding and margin some email clients include these in their width math," while others disregard it 6. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ? TEXT ISN'T ALIGNED PROPERLY SPOT SYNTAX ISSUES If you're seeing centered text when you'd prefer it left-aligned, make sure you've included properties like valign and align in etd> cells and

tags. 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 BORROW A PAIR It's often hard to see our own mistakes especially when we've been looking at With tools like the Firefox Web Developer Add-On, you can disable images, hide background images, show ALT attributes, and something for a while. Have someane else take a look. Perhaps it's something as simple as a missing quote, misspelled attribute, or an unclosed tag much more. With WUN countless issues that may occur while coding an HTML email, being avware 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: KOMAILOHIMP.COM. EMAILAESPONSIOLY.COM. LITMUS.COM litmus