Really sneaky HTML problems in your email marketing campaigns and how to fix them [INFOGRAPHIC]

Click to view

Litmus* created a really swell infographic to describe common problems that marketers have with the HTML in their mass emails. If you fall into one of these HTML traps, your email may end up in the crapper, or in the spam folder at least. I've taken it upon myself to "liberate" the content from their infographic and discuss it for you here below. Those guys at Litmus love me, so I don't expect any backlash or gnashing of teeth.
Tweet
Embedded media that doesn't play well with others
Litmus Marketing Director Justine Jordan says, "one of the most common problems we see is the inclusion of certain types of media within an email that aren't supported in that environment. These are things such as video embedded in the email itself, flash, rollovers (and other types of javascript), and even simple surveys." Most of these types of media need to be avoided when sending mass email. But, if you really want that funny cat video embedded in your email (and by "funny" I mean stupid), why not just embed an image that looks like a (stupid) embedded cat video instead? When the image is clicked, the recipient is taken to a website where the actual video exists and can be played. Where surveys are concerned, instead of placing the survey in your email content you should simply include a link to the website that hosts the survey.

Instead of embedding a video in an email, place an image
 like the above in your email body, recipients will simply
click it and visit the webpage to play the video

Problems with images going AWOL and such
The most common issue with the display of an HTML email is that images are blocked or don't show up due to some boneheaded HTML coding : ). Actually, some of these HTML mistakes aren't boneheaded at all. There are some hidden reasons why you have a problem with displaying images in your emails.

1. Don't put text on top of background images
   Background images aren't supported in Outlook 2007 and beyond. Why? No one knows, or cares. But what we do know is that some nimnod at Microsoft decided to be a pain in the background images. Instead of using a background image, and then typing text in the table cell across the top of it, why not just use Photoshop to add the text onto the image itself? If you insist on using a background image, as a precaution you could use a background color to help protect you when background images are misbehaving. That won't solve your problem, but it will look better and it is better than receiving a sharp stick in the eye from your CEO.
2. Image blocking
   Many email programs disable images until the user clicks "Show Images". You could avoid this whole problem if you ask your recipients to add you to their address book. Once in their address book, your images should display fine. Tell your recipients that if they don't add your From address to their address book that they won't get to have a cookie and hear a bedtime story. That ought to show them.
3. Gaps under images
   Every once in a while you'll see an email with a large image where the image is visibly split into parts. If you need to slice apart your large image so that it loads better, and you see a gap between them, add this CSS code:
   <img src="http://www.thoughtreach.com/images/logo.jpg style="display:block;">
4. Blue hyperlink borders around images
   Sorry, this one has been around for so long that if you are still seeing this in your HTML emails and don't know why it happens, you are a nimbleweed. This happens only when you are using an image as a hyperlink. If you didn't specifically tell the image to not have a stupid blue border around it, an ugly blue border will appear. Simply add code like this to your image hyperlinks
   <img src="http://www.thoughtreach.com/images/logo.jpg border="0">
   
   Sorry about the whole "nimbleweed" comment. I wanted to apologize before you went off and told the teacher on me.
5. Image file not supported
   This one is actually not too boneheaded at all. It's not uncommon for a marketer to want to use a .png image in their HTML. Why? Because it's such a small file size compared to .jpg and loads quickly. Unfortunately if you want all email clients to display your images, you need to use only gif or jpg images. Don't use png, bmp, or tiff, no matter how pretty they are.

Fonts displaying incorrectly 
While we all appreciate your CEO's love for fonts like "Jester" or "Kidsprint", any font you choose for your HTML will only display if that font is also installed on the recipient's computer. Since your recipient doesn't hold the same appreciation for your CEO's quirky love of those fonts, you'll need to stick to using normal-person fonts (and by "normal" I mean boring). The more boring fonts are highly supported in all email clients. These include Arial, Verdana, Georgia, Times New Roman, Tahoma, Trebuchet.

Silly fonts in your HTML email
don't show up that way

Gmail can be a pain in the head tag
Using CSS formatting in the head tag of your email will cause your email to not display properly in Gmail. The gods over at Google will take it upon themselves to strip out any CSS formatting in the head of your emails. To have your formatting display properly at Gmail (and everywhere else), use inline formatting in your HTML code. Your HTML email will display properly and you'll have fresher breath too (not sure what that means but that's what Loraine in the cube next to me told me to write).

Example of what not to do:
<head>
     <style type="text/css">
     hr {color:sienna;}
     p {margin-left:20px;}
     body {background-image:url("images/back40.gif");}
     </style>
</head>

Instead use this CSS code inline with your paragraph:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Default values
Some email clients will decide layout options related to borders and spacing for you. To prevent this, be sure to specify them first. For example, go ahead and set a table's cellspacing and border to be equal to zero such as
<table cellspacing="0" border="0">

That way, you're telling the ornery email client to not mess with your spacing, and to shut up about it.

Validate your HTML code
Some email clients are picky about the validity of the underlying HTML. If your HTML isn't exactly formed as they expect it, they will go off and cry in a corner. To validate your HTML use W3C's HTML validator tool. I'll be honest with you, this validator tool can be a pain so don't say I didn't warn you.

If you've read all the way through this article, you either are really serious about your email, or you wish you could get that ten minutes of your life back. You deserve a cookie. Since I don't have one, "liberate" one from the break room.

Read next: Learn how to save time by posting to multiple social networks quickly using one simple tool.

* About Litmus: Litmus has great toolsets for previewing your HTML emails across many different email clients before you even send it. They also have spam filter tests and email analytics. Not bad for a company made out of thin paper that changes color when you dip it in a liquid base solution...... : )