HTML Email Coding Tips For Web Designers

We get this a lot: "I'm not a complete noob. I can code web pages with a text editor, I'm darn good with CSS, I've got my own server, and I've even setup my own opt-in database. So how do I get started designing HTML email? Any tips for the more advanced user?"

If you're a web designer, and you know your stuff, we'll spare you all the WYSIWYGs and "Hello World" examples, and give you a quick, no-nonsense "Quick Start Guide" to HTML Email...

• HTML Email should be sent in "multipart-alternative" format. That means the email is embedded with both the plain-text version, and the HTML version, of the message. When people can't (or won't) view HTML email, the plain-text version displays instead. That's the main reason to use a system like EmailLoop, ConstantContact, iContact, Campaigner, etc.
• Save yourself some trouble. You can try to code your own script to send multipart-alternative email. Use Google to research how. Then, after you've pulled out all your hair, yelled at your mom, and kicked your dog out of frustration, use one of the tools we listed above (preferably EmailLoop). Because even if you figure out how to deliver in multipart alternative MIME format, you still need open, click, and bounce handling scripts, plus an email server that sends authenticated messages.
• Image files don't get sent along with HTML email as attachments. You host images on your server, then code the HTML in your email to point to them with absolute paths.

  In other words, you code something like this:
  <img src="http://www.yourserver.com/images/image.gif">
  
  instead of like this:
  <img src="../images/image.gif">

• Design for the preview pane of email applications. That means you've got about 500, 600 pixels tops for your email designs. If you think recipients will actually double click an email to view your message in full screen "to appreciate all its glory," send us whatever you're smokin.
• Most cool stuff won't work. You know how with web pages, you can use CSS to position things, and "separate content from appearance" and all that? Yeah, that won't work in email applications. Think back to the old days of the browser wars. When Netscape and Microsoft were duking it out. There was no Flash plugin. It was only shockwave. Put away your DIVs and DHTML. Dust off those tables, shim.gifs, and font tags, because you're gonna need 'em. Fancy CSS (especially DIVs and positioning) won't work reliably.
• Testing is different with HTML email. When you code a web page, you test it in IE, Firefox, and Safari, right? And you kind of learned to "leave a little wiggle room" so that your designs work across all browsers. Well, when you code an HTML email, you have to test it in Lotus Notes, Outlook 2003, Outlook 2000, Outlook Express, Apple Mail, Apple Entourage, Eudora, Mozilla Thunderbird, AOL, Yahoo!Mail, Yahoo!Mail Beta, Google's Gmail, Hotmail, Earthlink, Comcast, etc (here's a bare-minimum checklist for ya). And yeah, they all display HTML email a little different. When we say, "Keep your HTML email simple," we really mean it. Update: If you'd like to test your email design and code in one easy click, check out our new Inbox Inspector tool.
• CSS Support is not so great. You can use a little CSS, such as for basic fonts and colors. But use it sparingly, and design things to fail gracefully.
• Inline CSS. Use inline CSS, not linked files. Unlike images, linking to a server-hosted CSS file isn't that reliable.
• Embed CSS below the BODY Inline CSS is safest, but if you have to embed your CSS, embed it below the BODY tag because browser-based email applications (like Gmail, Hotmail, Yahoo!Mail, etc) strip out your HTML, HEAD, and BODY tags so they won't interfere with their own web page. Indent the CSS (see next tip).
• Don't start w/periods. Don't ever let any lines in your email or HTML code begin with a period. Some email servers interpret lines that begin with periods as the, "end of message" command, so your email will get stripped anywhere below that line (example). So be extra careful in your embedded CSS definitions. Add spaces before any lines of your CSS that start with a period.
• Anti-virus programs are party-poopers. JavaScript, ActiveX, Flash, and embedded movie files won't work. Don't shoot the messenger---we're just telling you the truth. The reason they won't work reliably is just about everybody has anti-virus applications that block that stuff from running.
• Background colors. Remember how we said that most browser based email applications (like HotMail) strip out your BODY tag? That's why assigning background colors to your BODY won't always work. The most reliable way of giving a background color to your email is to wrap it all inside a big, 100% wide table, and give the table cell a bgcolor. We warned you, HTML email is "old school."
• Don't forget your plain-text version. When web designers create HTML email, they often neglect the plain-text versions (they treat it like image ALT text, or META tags---always a pesky afterthought). But plain-text emails are very important. If you neglect them, some spam filters will even think you're a sloppy coder, and throw your mail into the junk folder.
• Tips for plain-text emails: You get absolutely no formatting. This is super old school. Hard wrap them at about 60 or 70 characters. Use a plain-text editor (not Microsoft Word), and type a letter (I like the letter "W") across the top of the document about 60 times. That's your ruler. When you type your message and get to the end of the ruler, hit return (more tips).

About Spam Filters (and how to avoid them)

• You need a good balance of "graphics vs. text." Otherwise, spam filters will get you. Don't send one ginourmous graphic. Balance it out with some copy, especially your company contact information and unsubscribe link. If you send one ginormous image as your HTML email, it can get you blacklisted.
• Don't write like a spammer. Watch those exclamation points, and FOR THE LOVE OF GOD, DON'T YELL in your email (learn how spam filters think).
• Don't get sloppy with your code, because spammers are sloppy with their code. Close those table cells and font tags.
• Don't use spammy looking colors, like HUGE SALE! and CLICK NOW!.
• Web designers will like this one: some spam filters will punish you for using FrontPage (or other WYSIWYG tools) to code your HTML email. So strip out any of that useless META stuff that those applications produce (more funny spam assassin criteria).
• Sending test emails to your client? If it's a fairly large corporation, their IT group probably has a spam firewall in place, and your test campaigns might get blocked. You may have to ask their IT geeks (politely) to whitelist your email service provider. Many of them throttle emails from new/unknown sending servers if they receive more than 2 or 3 messages at once.
• When you code a web page, you probably use "lorem ipsum" dummy text, right? If you do that with email, some Bayesian spam filters might block you (example). Same thing happens when you just paste a bunch of placeholder text over and over in your email. Go grab real copy from somewhere instead. Avoid the word "test."

Every Email Campaign Should Have...

• An instantly recognizable from-name and reply-to address. Use your company name, for instance. Then, don't change it, because recipients might have whitelisted you.
• A good, descriptive subject line that's not spammy. You've got a split second to convince recipients that your message isn't junk.
• A one-click unsubscribe link. Consider placing it at the top of your email, not the bottom.
• Your "offline" contact information, including your physical mailing address, phone number, etc. It will help people remember who you are (subscribers forget you in 6 months) and they might trust your unsubscribe link more, instead of reporting your email as spam.

Other Useful Resources for Designers

• Stupid Design Mistakes (Seriously. Web designers should know better)
• 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 Email Marketing Guide

Free Email Marketing Tips/Tricks

Will your campaign make it past the spam filters? Check your spam score with EmailLoop's Inbox Inspector tool.
Find out more...

Do you know if your email's rendering correctly in all the different email programs? EmailLoop's Inbox Inspector generates screenshots of your campaign in 16 different email programs. With one click.
Find out more...