MonkeyBrains! The Official MailChimp Blog about email marketing and monkeys

Monkey Brains   WWW

« Nice "ALT TEXT" Hack for HTML Email | Main | Consumers Increasingly Hitting “This Is Spam” Button »

HTML Email Tips for Web Designers

This page has been moved to our new Blog Location: http://www.mailchimp.com/blog/html-email-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 Design and Coding Tips:

  • 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 MailChimp, Constant Contact, GotMarketing, etc.
  • 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. Because even if you figure out how to deliver in multipart, 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.
  • 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.
  • 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.
  • You can use a little CSS, such as for basic fonts and colors. But use it sparingly, and design things to fail gracefully.
  • Use inline CSS, not linked files. Unlike images, linking to a server-hosted CSS file isn't that reliable.
  • When you 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.
  • 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. Add spaces before any lines of your CSS that start with a period.
  • 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

  • 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 You

January 18, 2006 in Tips, Tricks, Best Practices | Permalink

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d8341d5a5053ef00d834531e0d69e2

Listed below are links to weblogs that reference HTML Email Tips for Web Designers:

» How To Code HTML Email Newsletters (All New Version) from RCO 15
Please note this article has been completely rewritten, tightened up, and re-organized. It provides lots of information about coding emails to display well in Google Mail and Lotus Notes. A much earlier version of this article was published on SitePoin... [Read More]

Tracked on Apr 13, 2006 12:45:50 AM

Comments

Very useful information. But how about the email with non-Latin character such as Japanese character. I have difficulties sending those mails. I work in Japan and one of my task is to create and send the company newsletter. Some users have troubles reading the newsletter they're using different charset. and most of them doesn't know about this charset things. We make it with UTF-8.

Posted by: Soyuzno | Jun 17, 2006 3:21:57 AM

all very good and useful thanks. one question is it poosible to setup "anchors" or "bookmarks" from one part of an html email to another? ie. make clickable newsheadlines that will take you down to that article with the email without having to scroll??

Posted by: steve | Jul 3, 2006 4:38:55 AM

Hi Steve,
Anchors used to be "risky" to code in HTML email years and years ago (and I think that was just in old versions of AOL), but they're pretty much safe to use nowadays.

Posted by: Ben | Jul 9, 2006 9:14:56 AM

Actually, anchors will not work with Outlook, which is the major mail client, so be aware of that.

Posted by: Justin | Jul 13, 2006 4:25:29 PM

Anchors work fine in Outlook. I just recieved an email with a TOC on top that led to the various section of the email.

Posted by: cf | Oct 4, 2006 10:50:27 AM

I just found out that anchors work in Outlook if the destination has the name attribute in an a-tag.

Posted by: Karl | Nov 17, 2006 6:20:02 PM

hi

Posted by: abc | Dec 14, 2008 11:16:25 AM

The comments to this entry are closed.

 
MonkeyBrains! is the official MailChimp Blog. MailChimp is a product of The Rocket Science Group.