Email Marketing Articles and Guides
Top HTML Email Coding Mistakes
New to email marketing? Watch for these common mistakesOver the years, we've noticed some common mistakes that people make with HTML email (ahem, okay we admit---we've made a few of them ourselves), so we thought it would be good to share them with you...
Sending nothing but a big, giant graphic as your HTML email.
We've seen lots of people (especially graphic and web designers who are new to email design) send HTML emails that are nothing but one gigantic graphic. First of all, that's what spammers do. They send a giant graphic, hoping to trick spam filters (see, spam filters need to read text in order to determine if a message is spam). But the spam filters have caught on to this. Try sending an email that's nothing but a graphic, and you're lucky if any of your recipients even open it. Spam filters aside, email programs now turn images off by default. That means your recipients have to click a button to "open images" in order to view that work of art you made. If you think they'll actually take the time, you're deluding yourself. You can send HTML emails with nice, big graphics. But always include some text in the message, as a backup. Assume people won't be able to see your images. What would you want them to read there, instead?
Not testing your campaign in different email programs
Before you send an email out to your entire list, you should have sent at least 4 or 5 tests to yourself, and to all your test email accounts. Whenever we send one of our MailChimp newsletters, we send about a dozen tests before sending the final version. You should setup as many test accounts with free email providers as possible (like Yahoo!Mail, Hotmail, and Gmail). You might consider setting up accounts with Comcast and AOL, too (AOL accounts can be setup for as low as $4.95, if you call and ask). Leave them in their default settings. Don't tweak any of their junk mail filters, and don't add yourself to their address books. Check that your email isn't spam-filtered, your images aren't broken, each and every hyperlink works, your CSS is displaying properly, and that your unsubscribe link works.
Trying to send HTML email campaigns with Outlook or Outlook Express
Lots of people try sending their HTML email newsletters with Microsoft Outlook, or Outlook Express. This is a big mistake. For starters, Outlook won't send your email in "multipart-alternative" format. Multipart format means that an HTML email is sent with a plain-text alternative embedded along with it. That way, if someone's email application can't read HTML email, the plain-text version displays instead. Also, Outlook will send all your images along as attachments, which won't always work. Images in HTML email must be hosted on a web server, and your HTML code should point to them with absolute paths. Add to all that the fact that Outlook won't help you track email clicks and opens, manage unsubscribes, or process and clean bouncebacks from your list. Finally, using your desktop email application to send email marketing campaigns is a bad idea because your ISP may suspend your account after a certain amount of bandwidth has been reached (and some ISPs limit outgoing email to 500 per hour).
Using JavaScript or ActiveX in HTML email.
Just about every single email application out there blocks JavaScript and ActiveX from working, as a security measure to prevent viruses. Make sure your code doesn't contain any JavaScript or ActiveX, such as on form submit buttons, pop-up window links, image pre-loaders, Flash movies, etc. If you're copying HTML from an existing web page, make sure you clean the code of all JavaScript. If you're building your HTML email in some kind of WYSIWYG application, or Microsoft Word, Excel, or Powerpoint, be aware that those applications sometimes add "extra" code like ActiveX that will get blocked by some email programs.
Embedding CSS in the wrong place.
Linked CSS files won't always work in HTML email, so you've got to use inline or embedded CSS. Normally, when you code a web page, you put the embedded CSS code in between your <HEAD> tags. But lots of email applications (especially browser based ones) strip out the HEAD and BODY tags of your HTML email, so your CSS will get stripped too. Embed your CSS just above the content, below your BODY tag. If you design web pages for a living, that will probably make you feel "dirty" but trust us---it'll work fine in your emails. A little safer approach would be to use inline CSS instead. Even safer? Ditch CSS altogether. At MailChimp, we use CSS to keep our sanity (it helps make cosing so much easier). But we don't overuse it, and we always make sure our emails look ok if CSS were to fail completely. Note: Embedded CSS is not very well supported in the newer browser-based email programs, like Yahoo!Mail, Gmail, Windows Live, .Mac Mail, and AOL Webmail. Those web services tend to only allow inline CSS.
Over-ambitious CSS, CSS positioning, and DHTML.
Don't even try to use CSS positioning. Sorry, but with HTML email, you're still stuck using a lot of tables and shim.gif's (for now). If you're not an HTML coding pro, and you're letting an application generate your HTML email code for you, just be sure to look through the code and check to make sure CSS is done according to our guidelines. While you're checking the code, make sure there's no DHTML, either (that'll break too). Even if you have no idea what CSS positioning or DHTML is, you might be using it accidentally. If you use Microsoft Word (or Excel, or PowerPoint) to "design" an email, then choose "Save as HTML," you'll often get some overzealous CSS and other stuff that'll break in email programs.
Writing like a spammer.
We all get spam. You know what it looks like. The subject lines are IN ALL CAPS, letters are highlighted bright red or bright blue, they SCREAM by using lots! of! exclamation! points!!!! and they use phrases like, "hottest, best, click now! limited time only!, and act now!" Don't be like that. Keep your subject lines brief and to the point. Keep your content relevant. Don't try to use gimmicky catch phrases. Avoid spammy words. More advice on avoiding spam filters here.
Only using images
Some people design an email in Photoshop, then "Export to HTML." That just generates a big graphic! The problem with this is that spam filters can't read emails that are nothing but giant graphics. When they encounter an email they can't read, they block it. Always include some kind of "computer-readable" text in your email. And don't just make it your "unsubscribe" copy.
Forgetting the plain-text alternative version.
Lots of designers and marketers work so hard on their HTML email, they're too tired to spend any time working on their plain-text alternative email. This is bad. Spam filters will penalize you for not including a plain-text version of your email (think about it---that's what lazy spammers do). Also, what about all your recipients who can't (or won't) view HTML email? And some people prefer plain-text, because they're always checking email on their mobile devices. Always spend a good amount of time creating your plain-text emails.
Forgetting to upload your graphics to your public web server
We've seen some people do their work on a "staging" server or on their "network drive" at the office, and forget that the general public won't won't have access to those servers (and so images will be broken). Or they use the company's "network drive" because the email is for internal employees. This of course won't work for employees who check email at home. We've seen others have their IT group setup a temporary computer at the office "that's open to the public." That's not the same as having a public web server with a domain name. Assuming a little makeshift computer in your office can even handle the traffic, coding your email with a bunch of IP addresses in the <IMG> tags will most likely get your email blocked by spam filters. You should get access to your company's website. Create a folder for all your email campaigns. You might include subfolders (by date) for each campaign. Host all your images there. While you're at it, go ahead and create an "archives" page on your website, where visitors can read your past campaigns. This works as great "search engine bait" too.
Not using "absolute" paths in your images and hyperlinks.
With HTML email, you need to host all your images on your server, then use absolute paths that point back to your server.
So, instead of coding an image like this:
You would code it like this:
Same goes for hyperlinks. Instead of a link like this:
You'd code the link like this:
If you're coding your emails locally with some kind of WYSIWYG application, they'll often keep graphics in some folder on your computer, and reference graphics with "relative" links (relative to the location of your HTML file). Always make sure you go back and check that your <IMG> tags use absolute paths. One little tip is to go ahead and upload all your email's graphics to your server at the very beginning of your project. That way, you'll have to use absolute paths from the get-go.
Other Useful Resources:
- Free Email Marketing Guide
- Inbox Inspector: Generate screenshots of your email designs in all the major email programs, test all the major spam filters and email firewalls, and scan for spammy keywords in one click.
Free HTML Templates →
Compare Us →
View Pricing Plans →
Try MailChimp Free →
