The most common bugs in email templates and how to avoid them
Top

Coding HTML for emails can be difficult. If you’ve missed even just a closing tag when coding, your entire email can be broken. If you’ve included a video, Flash, rollovers, JavaScript, 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

We’ve included solutions for these common problems, as well as tips to make your coding job a success.

  1. Stuff Just Doesn’t Work the way it does in your browser. Video, Flash, rollovers, JavaScript have limited support in email.
  2. 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.
  3. Hosting: Images need to be hosted on a publicly accessible server and referenced absolutely by your HTML in order to display properly.
  4. Blue Borders Around Images: Blue borders can appear around images that also include a link. Ban these borders by using HTML or CSS:
    <img src=“http://www.postimg.io/logo.gif” border=“0”> or <img src=“http://www.postimg.io/logo.gif” style=“border-style: none;”>
  5. File Formats: Some email clients are picky about the type of image file you’re using.
  6. Image Blocking: Over half of all email programs disable images automatically until the user clicks “show images” in email clients.
  7. 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:
    <img src=“http://postimg.io/logo.gif” style=“display: block;”>
  8. 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 device 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 devices. 2) If fonts were specified in the of your email in CSS rules, a lot of clients were strip them out. The best solution is to move all your font styling inline.

    e-mail template

  9. Override Default Settings: Some email clients 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.
  10. 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.
  11. 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 margins; some email clients include these in their “width math,” while others disregard it.
  12. 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.
  13. 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 cells and tags.

  14. 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.

For quick testing, you can open your HTML in a browser and with tools like the Web Developer Add-On, you can disable images, hide background images, show ALT attributes, and much more. Also 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.

Article reposted from litmus.com

up

Please turn your device