Common HTML Mistakes

This feature requires Manager user level or higher.

If you'd like to code your own HTML template, rather than use one of our pre-designed template options, there are a few things to keep in mind when you create your content. Below, we go over some common HTML coding errors and how to avoid them.

Images, Links, and Graphics

Your HTML Email is Just One Giant Graphic

Most email programs block the automatic image downloads by default, which could cause your recipients to delete your email or even mark it as spam. As a general guideline, we recommend a ratio of 80 percent text to 20 percent images in a campaign. However, all spam filters use different criteria for what is a healthy balance of graphics and text. Use our Inbox Inspector to test your content to see if it could be flagged as spam.

If all your campaign requires is a single graphic, add text to the footer area like your unsubscribe link, physical address, and list permission reminder to help balance out the text-to-image ratio.

Images Hosted on a Local or Private Server

If you do work on a staging server or network drive, the general public won't have access to those servers and images will appear broken. To avoid this, upload and host all images on a public server so that they display correctly in your email or use the file manager to upload images and host them in MailChimp.

Images and Hyperlinks Don't Use Absolute Paths

Absolute paths for images and files include your server information in addition to the file name so outside applications can find and access the file. Always host all of your images on your server and use absolute paths that point back to your server.

So, instead of coding an image like this:

<img src="/images/photo.gif">

You would code it like this:

<img src="http://www.mysite.com/email/images/photo.gif">

Same goes for hyperlinks. Instead of a link like this:

<a href="index.html">Click here</a>

You'd code the link like this:

<a href="http://www.mysite.com/index.html">Click here</a>

If you code your emails locally with a WYSIWYG, double check that all <IMG> tags use absolute paths. A good tip is to upload all your email's graphics to your server at the very beginning of your project so you have to use absolute paths from the start. 

Preview and Test

Campaign Wasn't Fully Tested

Before you send your email campaign to your entire list, thoroughly test it first. We recommend that you send test emails to all common email services, like Yahoo, Hotmail, and Gmail. If you know your subscribers use a less common email client, consider taking the steps to test in that program, as well. Use our  Inbox Inspector tool to preview how your email will appear in multiple clients or refer to our campaign testing tips.

Emails Created by a Web Designer Weren't Tested

If you asked someone else to create your email for you and paste in the code he or she gave you, you should still send yourself test campaigns and make sure everything displays the way it should. Check that it wasn't designed too wide to fit in the preview pane of most major email programs. Test the images and links to make sure they work as expected and are set up as  absolute paths.

Code and Software

Microsoft FrontPage, Word, or Publisher Was Used to Create HTML Content

Word, Publisher, or FrontPage to generate HTML content can result in extra code added to your campaign. This can break your email design or result in your campaign getting filtered as spam. Instead, use a basic text editor and then import the template or paste the code into MailChimp.

JavaScript in HTML Email

Most email applications block JavaScript as a security measure. Make sure your code doesn't contain any JavaScript such as on form submit buttons, pop-up window links, image pre-loaders, and widgets. If you copy HTML from an existing web page, clean the code of all JavaScript. Our Campaign Builder will remove any JavaScript we're able to detect, but we strongly recommend that you test your campaign thoroughly before you send to ensure it displays correctly.

CSS Used Incorrectly

Most email applications strip HEAD and BODY tags from incoming email to keep embedded CSS from interfering with their page CSS. We recommend you use  inline CSS or that you embed your CSS just above your content below the <BODY> tag.

Compliance

Using Spammy Content

Most of us receive spam. The subject lines tend to be in all caps, letters are highlighted bright red or bright blue, they use lots of exclamation points, and they use phrases like "hottest," "best," or "click now!"

Keep your subject lines brief and to the point, keep your content relevant, don't try to use gimmicky catch phrases, and always  avoid spammy words.

No Unsubscribe Link

We require all email campaigns sent through MailChimp to have  our  *|UNSUB|* tag. There's absolutely no exception to this rule. It must be present in both the HTML email and the plain-text email.

No Permission Reminder

All our built-in templates automatically ask you to create a permission reminder but if you code your own, include one in your template code. Permission reminders briefly tell your subscriber how they got on your list, for example, "You received this email because you subscribed at www.example.com for our newsletter." Permission reminders prevent false abuse complaints, which could get your company's domain name blacklisted.

No Postal Address

We require that all our users include a valid physical mailing address on all emails sent through our servers in compliance with the  U.S. CAN-SPAM law. The address is automatically inserted whenever you use our built-in HTML email templates, so if you're coding your own you will need to add it manually.

 

Other useful resources

  • Free Email Marketing Guide
  • Inbox Inspector: Generate screenshots of your email designs in major email programs and test major spam filters and email firewalls, and scan for spammy keywords in one click. 

Was this article helpful?
What can we do to improve your experience with articles like this?

Tagged

Technical Support