How to Design the HTML of Email Newsletter

How HTML Email Works

Before you can start designing, coding and sending HTML emails, you need to know how it works and what tools you’ll need. Here’s some background information that every email designer and marketer should know.

The Multipart/Alternative MIME format
The most important thing to know about HTML email is that you can’t just attach an HTML file and a bunch of images to a message and click sends. Most of the time, your recipients’ email applications will break all the paths to your image files by moving your images into temporary folders on your hard drive. And you can’t just paste all your code into your email application, either. Most email apps send messages in plain-text format by default, so the HTML won’t render. Your recipients would just see all that raw source code, instead of the pretty email that’s supposed to show up. You need to send HTML email from your server in Multipart-Alternative MIME format. That means your mail transfer agent bundles your HTML code, plus a plain-text version of the message, together into one email.

That way, if a recipient can’t view your beautiful HTML email, the good old plain-text version of your message is automagically displayed. It’s kind of a nerdy gobbledy-geek thing, which is why a lot of people mess it up when they try to send HTML email themselves. You either need to program a script to send email in multipart-alternative MIME format, or just use an outside vendor (like MailChimp) to deliver email for you.

Image files in HTML email
Embedding images and photos into messages is the #1 reason people want to send HTML email. The proper way to handle images in HTML email is to host them on a web server, then pull them into your HTML email, using absolute paths in your code. Basically, you can’t send the graphics along with your message. You host the graphics on a web server, and then the code in your HTML email downloads them whenever the message is opened. Incidentally, that’s how open tracking works. You place a tiny, invisible graphic into the email, and then track when it’s downloaded. This is why open tracking only works in HTML email—not plain-text—and why the new email applications that block images by
default (to protect your privacy) can screw up your open-rate stats.

Tip: When you’re coding image tags in HTML email, do this:
<img src=”http://www.yourserver.com/email/images/logo.gif”>
and NOT this:
<img src=”images/logo.gif”>

But if you use any good email broadcaster then you will find that they have built-in email designer, we host your graphics on our server for you—for free. No need to FTP files anywhere or codes any image tags.

Free hosting services

You really need your own server to host images for your HTML email. Don’t try hosting images on a free “image hosting service,” because those websites often put scripts in place to prevent you from linking to them in emails (they can’t handle all the traffic).  

And since you get what you pay for in that regard, free image hosting services tend to be pretty unreliable under heavy traffic conditions. Also, spammers use free image hosting services all the time to cover their tracks. So if you don’t want to look like a spammer, use your own web server. Email-marketing services like MailChimp have built-in image hosting capabilities.

Delivering HTML email

Lots of newbies make the mistake of setting up forwarding lists, or CC’ing copies of a message to all their customers. This causes all kinds of problems— especially when a customer clicks replies all. First of all, there’s no way to do any kind of individual tracking or personalization when they CC a big group like that. And most importantly, it just looks unprofessional and impersonal when recipients can see your entire list of other recipients.

That’s why when an email-marketing system like MailChimp sends your campaign, we take your message and send it one at a time to each recipient on your list (really, really fast). Unlike your work computer linked to your local ISP—which probably has a standard monthly bandwidth limit— email-marketing vendors use dedicated mail servers that are capable of sending hundreds of thousands of emails per hour.

Other factors to consider when delivering HTML email campaigns:

• If you send from your own server: Your ISP may throttle your outgoing emails or shut down your account if you send too much too fast. They may also shut you down if you exceed your monthly bandwidth limit.

• Email firewalls and ISPs that receive your emails don’t like receiving tons of emails from one single IP address at once (unless they normally receive tons of emails from that IP). So if you only send occasional email campaigns from your IP, you may want to throttle your delivery or spread them across multiple IPs, to avoid accidental blocking. Email-marketing services usually split your campaign into pieces and send it out over lots of different IP addresses.

• If you send emails from your desktop email program, chances are you’re connecting through your local ISP. If you don’t have a dedicated IP address set up with your ISP, you’re probably sending emails from a dynamic IP address. ISPs and spam filters don’t like receiving lots of emails from a dynamic IP address, because it looks like a hijacked home computer. If you’re not using an email-marketing vendor like MailChimp, you should always send from a dedicated IP address.

Designing and Coding

Now that you have a basic understanding of how HTML email campaigns work and how you should deliver them, let’s talk about designing and coding them (the fun part).

Here are the tools you’ll need to succeed at coding HTML emails

1. A design application, like Adobe Photoshop, Fireworks, Dreamweaver or Illustrator. Use these tools to lay out your template and slice out your graphics, like your company logo and product photos. We’re partial to Fireworks, but to each his own. 

2. A good, pure HTML/Text editor, like BBEdit and TextWrangler for the Mac, or HomeSite and NoteTab Pro for the PC. You could use WYSIWYG style tools to generate HTML, like Microsoft FrontPage, or maybe Adobe GoLive or Macromedia Dreamweaver. But they have their disadvantages. 

WYSIWYGs very often throw in gobs of junk into your code (FYI, Microsoft says the extra code is to help with “round tripping,” which means you can export from Word to Powerpoint to HTML, then back again, without losing anything). All this extra code usually ends up just breaking things or setting off spam filters. There are some WYSIWYGs out there that generate clean code, but we’ve found those are a bit too perfect, because they’re designed for web pages and not HTML email (so they don’t know all the things you have to rig in your code). If you want to do HTML email correctly, you should learn to code HTML from scratch with a good text editor.

3. Your own web server, to host all your images and archives. You should create a folder on your website for email newsletters. This is where you’ll store images, then point to them with absolute paths in your HTML code. 

You might also want a folder on your website to store archived newsletters. When we started out, we created a folder on our website called, /monkey wrench/ and then kept campaigns under subfolders named by /date/ to store each campaign. Use your own organization style—just be sure to come up with a system and process for archiving, so that each newsletter isn’t a chore to publish.

Nowadays we don’t even bother, because we use MailChimp’s built-in archive functionality. It’ll save a copy of every campaign you send from our system. You can build a page on your website called “Newsletter Archives” and paste a little code snippet from MailChimp. We’ll keep your page updated with your most recent campaigns. Saves so much time. 

4. An FTP program, like Fetch for the Mac, or CuteFTP for PCs. When you design your mail and slice out all your graphics, you’ll use FTP to move those files from your computer to the server.

5. A test machine (or two), loaded with as many different email applications and accounts as possible. You’ll want to check your HTML email designs under lots of different scenarios. Unlike web design, where you only have to check your work in a small handful of browsers, there are tons of email applications out there, and they all handle HTML email differently.

If you use MailChimp, you our Inbox Inspector tool will do all the testing for you.

Tip: You can use MailChimp’s Inbox Inspector to get screenshots of your work in all the major email programs and webmail clients, to see if your CSS is breaking. Saves a lot of time and hassle.

Design guidelines

Here are some pointers for designing your email. Early warning: If you’re a seasoned web designer, you won’t be happy with all the compromises and hacks you’ll have to make when designing for email applications. 

Set your width to about 500-600 pixels.

If you’ve ever worked on a website, you’re probably used to designing pages to fit in 800x600 pixel resolution screens, or maybe even 1024x768. But that won’t work when you design HTML email. Most recipients will be looking at your email through their preview pane, which is usually a small portion of their available screen. A width less than 600 pixels is safe for most programs.

Simple layouts and tables work best.

You wouldn’t believe all the different ways email applications garble up HTML email. Keep your email designs nice and simple. Avoid complicated layouts, too many embedded tables, and tables with too many rows and columns. A simple two-column table with a row across the top is about as complex as you can get. Lots of email applications don’t cooperate when you code tables with colspans, which are table cells that span across multiple columns. One application that’s particularly finicky when it comes to tables (and just about everything else) is Lotus

 Notes. If you’re working on an email layout and find the tables are getting complex, and you have to code too many colspans, you might think about chopping it up into separate tables. For instance, we almost always use separate tables for the header, body and footer of our emails. Better to go with more simple tables, than one big complex table.

If you’re a CSS master, you’re probably rolling your eyes in disdain with all this “tables” talk. But trust us—you’re not going to be able to use all that cool, timesaving CSS stuff in your HTML emails. DIVs and CSS positioning don’t work. We’ll cover that later in this guide.

Special Considerations for Webmail Services

A lot of your recipients will be checking their email in their web browser, Such as with Yahoo! Mail, Hotmail or Gmail. Since they’re viewing email in Browsers, there are certain things you need to know when you code your HTML emails:

• They’ll strip out your <HTML>, <HEAD>, and <BODY> tags, in order to keep your code from interfering with their web pages. That means... 

• Any background colors you specify in your <BODY> tag will be lost. So wrap your entire email inside a larger, 100% wide table, and set a background color to that table.

• Any CSS that you place inside the <HEAD> tags will be lost. So don’t try to link to CSS files hosted on your server. Use embedded CSS instead, and make sure it’s below the <BODY> tag. If you’re a web designer, that’ll make you feel kind of dirty because that’s not exactly the proper place to put embedded CSS. But no worries—it’ll work. If you just can’t stomach

That, use inline CSS. 

• Some webmail clients are starting to strip even the most basic CSS, even if it’s embedded below the BODY tag (like we described above). We think it’s because they don’t want any of your CSS interfering with their CSS, or maybe because they’re using so much JavaScript and AJAX technology, stuff just gets buggy. Keep that in mind, and do lots of testing.

CSS in HTML email

CSS (Cascading Style Sheets) is a godsend for websites, but don’t put too much faith in it with HTML email. For instance, you shouldn’t expect DIVs to work. And definitely stay away from CSS positioning. Won’t work. 

If you’re a CSS-standards freak, you’re going to hate yourself after coding HTML email.

You’ll have to rely on old-fashioned <TABLES> for your layouts in HTML email, and only use CSS for simple font formatting and colors. Always design your CSS to “fail gracefully.” That means if someone took away your CSS, your design and content would still display decently. Before you send your HTML email, delete the CSS and see what it looks like. Did you have tiny text that is now gigantic, and blowing out your tables?

CSS is especially touchy if you’re using a WYSIWYG to design your HTML email, because WYSIWYGs insert all kinds of crazy CSS and DIVs by default. It’s one of the drawbacks of WYSIWYGs for HTML email. It may help you get things coded, but you still have to understand HTML enough to go back and remove some of the code, so things won’t break in email applications. You might as well code by hand. Using Microsoft Word to generate HTML is even worse than using WYSIWYGs.  Word adds so much code behind the scenes, it’s unbelievable. Don’t do it. Learn to code HTML, or use our built-in HTML email designer.

You can deliver HTML emails with Flash in them, but most recipients won’t be able to view them. Not unless they’re using an email program that uses a browser to render their HTML email. Most anti-virus applications block the code used to embed Flash movies, and they block JavaScript, ActiveX, and even background music files. All that stuff has been used in the past to spread viruses, so it’s commonly blocked now. 

The best solution is to point emails to landing pages. If you’ve got a great animation or movie to show to your recipients, just send a simple, intriguing GIF or JPEG graphic in your HTML email, and then link it to a landing page on your website with the animation in it. Same goes for JavaScript, ActiveX and movie files. Anti-virus applications block them from running. 

So fancy rollover or pop-up navigation and streaming videos aren’t going to work either.

Background colors

Remember when we told you about how browser-based email services (like Yahoo! Mail and Hotmail) strip out your <HTML>, <HEAD>, and <BODY> tags? That’s what you need to remember when coding your background colors and images. You normally specify that stuff in your <BODY> tag, but you can’t rely on that with HTML email. You’ll need to create a big, 

100% wide table wrap around your email. Set your background color in that table, and use some CELLPADDING as needed. If you’re into CSS, you might be tempted to use a <DIV> instead. But we’ve seen DIVs break quite frequently in email applications, so we don’t recommend them.

 Anatomy of a Good HTML Email Newsletter

1. Your company name in the From field. Recipients should recognize who the email is from instantly. It can’t be deceptive in any way (duh). If a recipient has to strain his brain to remember who you are, he’ll click “This is spam” instead of opening.

2. A relevant subject line (don’t be spammy), with your company or newsletter name in it. So they instantly know who the email is from, and what it’s about (hence, subject line).

3. The To field of your email should be personalized to the recipient’s name, not their email address. MailChimp lets you merge recipient names into this field, if you have it in your database. You would insert *|FNAME|* *|LNAME|*, for example. Check out our merge tag cheat sheet for more Info

4. A one-click opt-out link that removes people from your list immediately. Consider placing it at the top of your email as well as in the footer, so that people who want off your list can easily find it (instead of clicking their “Junk” button). If you use MailChimp’s Managed List functionality, you would use our *|UNSUB|* tag to generate your unsubscribe link (it’s required in every email you send from our system). Any recipient who clicks it will be instantly removed from your list. If you use our built-in HTML email templates, we insert that link into the footer for you.

5. In addition to your opt-out link, you might also include a link in your header for recipients to “View this email in your browser.” Point it to an archived version of your email on your server. This helps if the email was forwarded to friends, and got mangled along the way. MailChimp automatically keeps an archived version of all your campaigns on our server. You can just use our *|ARCHIVE|* tag in your emails to link to yours. If you use our built-in HTML email templates, we automatically place this link at the top of all your emails.

6. Your valid, physical mailing address (P.O. boxes aren’t good enough), and as much contact information as possible. The more contact information you provide, the more reputable your email will look.

7. Bonus: It’s a really good idea to also include some kind of reminder text, like “You are receiving this email because you signed up at our website.” People forget opting-in to lists, and they get a little trigger-happy with the “This is spam” button. That can get you reported to the major ISPs, so you want to prevent it. Also, in the rare case that a recipient reports you to an anti- spam organization, having this reminder text can make the difference between a server admin blacklisting you forever, or contacting you for further explanation. If you use our built-in email templates, MailChimp automatically inserts that reminder text into your email footer.

The Art Of Plain-text email

Don’t forget your plain-text email. You need it for people who can’t (or won’t) view HTML. Sometimes the plain-text version of your email is the one that gets displayed if your recipient checks email on a mobile device. 

If you don’t take the time to create the plain-text version of your HTML email, you’ll just look like a lazy spammer (spam filters will penalize you for only sending HTML). When you send a campaign in MailChimp, you’ll need to create both versions of your message (HTML & Plain-text). Then we bundle them together in multipart format and send them off. Your recipients’ email applications decide which version to display.

There’s definitely an art to constructing your plain-text email. You can’t just use the same text from your HTML email. It has to be formatted just right, so the best way to do it is to build it from scratch, or copy paste the content from your HTML email, then reformat it heavily. Here are some tips for your plain-text emails:

1. Use a plain-text editor, like Text Wrangler for the Mac, or Windows Notepad. Don’t use something like Microsoft Word, because it won’t give you the kind of raw text files you need. You need an application that gives no formatting whatsoever.

2. If you’re using MailChimp, just click the button that says Copy text from HTML version, and we’ll take care of it for you. 

3. By default, some email applications start to wrap your plain-text messages at about 60 characters or so. That’s not really a big deal to most people. Just let your text wrap wherever their email programs want it to. 

But if you have content that you absolutely do not want to wrap unexpectedly (like in the middle of a hyperlink), one nice little trick is to type a letter 60 times across the top of your message, and use that as your “ruler.” As your content approaches the end of that ruler, hit your return key and hard wrap the line. Again, this is only if you want very strict formatting.

4. People don’t read email. They scan email. Especially plain-text email. So make it really easy to find important information with bullet points and visual markers (see screenshot below). 

5. You can’t code a clickable link with plain-text email. You just have to type out the entire URL. Some email applications will make it clickable automatically. Others won’t.

We’ve noticed that a lot of people spend so much of their time on the HTML version of their message that they’re too drained to work on the plain-text email (we’re guilty of that ourselves). So they either ignore it, or they slap in some junk, or they cheat a little and type in something like, “Evidently, you can’t view HTML email, so visit this URL in your browser to see our newsletter in all its glory.” We think this is a big mistake. So don’t put all your energy into the HTML version of your email. Save some love for your plain-text message too. If you find yourself spending so much time coding HTML that you’re too pooped to make a plain-text email, you should consider setting up one re-usable template that you can just select, and fill with content every campaign. No need to reinvent the wheel for every campaign. 

Tip: When you set up a managed list in MailChimp, you have the option to let my users choose plain-text only when they fill in your opt-in form. MailChimp will automatically deliver only the plain-text formatted email to them when you send your campaigns.

Common Mistakes to Avoid

Here are some of the most common mistakes people make when coding HTML emails:

1. Not coding absolute paths to images. Remember, attaching graphics and using relative paths won’t work. You need to host the images on your server, then link to them in your code.

2. Using JavaScript, or ActiveX, or embedding movies. That stuff just doesn’t work in HTML email.

3. Getting overly ambitious with designs. Designing HTML email isn’t just like designing web pages. You can’t have all the CSS-positioning, DIVs, DHTML, and complex, embedded tables like you can in web pages.

4. Forgetting—or refusing—to include an opt-out link. It’s stupid and unprofessional not to allow recipients to unsubscribe from your list. Oh yeah, it’s illegal, too. Be sure to read and understand the CAN-SPAM Act of 2003.

5. Linking to an external CSS file. You usually put CSS code in between the <HEAD></HEAD> tags of web pages, right? But browser based email applications (like Yahoo, Hotmail and Gmail) strip <HEAD> and <BODY> tags from HTML email. Embed your CSS below the <BODY> tag.

6. Letting your permission “grow cold.” If you’ve been collecting opt-ins at your website like a good email marketer, but you haven’t sent an email in several months, your subscribers have forgotten all about you. So when they receive a full-blown email newsletter from you out of the blue, they’re going to click their “This is spam button” in their email application. Don’t let your permission grow cold. Send occasional emails. If you’ve been collecting emails for years, and you’re only just now sending your first email to everyone, you should send a little re-invitation to your list. Something like, “A long time ago, you subscribed to my email list. Well, I’ve finally got some time to start sending my cool newsletter, and I want to make sure you still want to receive it. Click here to sign up.” At the very least, send an email and place some kind of text at the top that reminds them of where and when they opted in. People usually forget about opting in to something after six months or so. 

7. Sending to a list without permission. This is the worst offense. Lots of innocent marketers who mean well commit this heinous crime. Here are some common ways legitimate marketers can inadvertently become known as evil spammers:

• Getting an email list from a tradeshow. “But I’m exhibiting there, and the tradeshow host said it would be okay, and when people purchased tickets, the fine print said that we could email them, and...” Nope. You’re spamming. Don’t do it. If they didn’t give you permission to email them, they didn’t opt-in to your list. 

If they didn’t opt-in, you’re spamming. Even if you can legally send them email marketing, those recipients are more likely to report you for spamming them. Then you’ll get blacklisted. Plus, your company will look really slimy. If a tradeshow host is collecting email addresses, then they should be doing the emailing.

• Getting a list of fellow members from some trade organization. Just because they joined a club, and the club posted contact information so everyone could keep in touch with each other, it doesn’t mean each member gives you permission to send them newsletters and offers. If you sent them a personal greeting from your own email account, they probably wouldn’t mind. That’s what the organization’s member list is for. But add them to a list and send them a huge email newsletter, and you’ll be reported for spamming.

• Say you go to events and swap business cards. The business cards just get thrown into a “prospects” pile. Years later, you get an intern to finally type all the contact info from those cards into a database. Then, one day out of the blue, you send a big, fat email newsletter to everyone. As if they actually want to hear from you. Trust us, they don’t.

• Fish bowl of business cards. Similar to the example above, but you hold an event and collect business cards in a fishbowl to win a door prize. The people who dropped their business card into the bowl wanted the shirt you’re giving away—they didn’t opt-in to your list.

8. Using a WYSIWYG to code your HTML. WYSIWYGs are notorious for generating absolutely horrible HTML. They insert so much junk code, it’s unbelievable. Even the ones that generate “clean” code don’t know how to rig things to work in email applications (like sticking your embedded CSS below the <BODY> tag). To code HTML email properly, you need to learn a little HTML. It’s really not that hard. Plus, you can download free HTML email templates at our website. 

9. Forgetting to test thoroughly. When you send HTML email, you’ve really got to test it in as many email applications you can. Then you have to test on different operating systems. Then different ISPs (we’ll explain shortly). If you keep things simple, and build a rock solid, thoroughly tested template for each newsletter, you won’t have to test so much. But you should always send at least a few campaigns to yourself before sending it out to your entire list.

10. Sending nothing but a big, gigantic graphic as the HTML email. Sigh, that’s what spammers do. And since most email programs block images by default, what do you think your recipients see when (if) they open your email? Many spam filters will block your email if you don’t have a healthy balance of images and text.

Designing Around Spam Filters

A guide to email-newsletter design wouldn’t be complete without a section on spam filters. You have to design your emails a certain way if you want your messages to make it past them. But you can’t go overboard, either.

Spam filters can smell fear. If you try too hard, they know it, and they attack. So just be cool, act normal, and don’t make any obvious mistakes. Before getting into the nitty-gritty design tips, you need to know how all the various anti-spam mechanisms out there work. Once you get an overall understanding of how they work, designing around them will be easier.

Bayesian Filtering

This is one of the most important ones to learn about, since it’s installed in so many email applications these days (like Outlook, Mozilla Thunderbird and Apple Mail). Bayesian filters work by watching users classify email as junk (such as when they click this is spam button).  It reads the junk mail, compares it to other emails you called junk, and looks for common traits in the subject line, the content, the hyperlinks, the sender, etc. Over time, ayesian filters learn to scan for those traits in every email message you receive. Every time they find something that looks spammy, they assign a score to it. For instance, using “Click here!” might get you 0.7 points. Using bright red fonts might get you 2 points. Including the word “mortgage” might get you 1 point, but using the word “Viagra” will get you 5 points. Once an email exceeds some threshold (set by the user), the email is classified as spam and thrown into the junk folder. It’s amazing how many different things Bayesian filters look for. To read some, check out our blog about funny Spam Assassin criteria.

Remember, MailChimp comes with a spam filter checker (look for the Inbox Inspector under your Account tab) that’ll tell you exactly what your email’s spam score is, and what you need to change if you want to improve your chances with spam filters.

Blacklists

A while back, some server admins got angry at all the junk mail they received. So they started to track the IP addresses of the servers that sent them spam, and put them on blacklists. Anytime they received email from a server on their blacklist, it was deleted immediately. It worked pretty well. So they started to share their lists with other server admins. And other admins started to add on to those blacklists. Pretty soon, the blacklists

got very, very big. Large ISPs started to sync up with them. If you send spammy emails, you could end up on one of these blacklists. Once you make it on to a blacklist, good luck getting off. This is why you need to make sure you only send to recipients who gave you verifiable permission to email them, and you need to have proof that each one of them opted in to your list, such as through a double opt-in system.

Email Firewalls

Managing email servers (and incoming spam, viruses, and phishing attacks) can be a lot of work. So large corporations usually install email firewalls (Google the terms “Barracuda Firewall” or “Postini” for some examples) to handle their incoming email. Think of them as spam filters on top of spam filters. They’re big, heavy-duty gatekeepers, and they’re not friendly at all. They often use a combination of Bayesian-style/adaptive filters, community reporting, blackhole lists, and a little bit of proprietary magic pixie dust to keep spam out of the company. Most of the time, when your email’s not getting through to a larger company, it’s their firewall. You can think of these firewalls as kind of Xenophobic and paranoid. They’re all twitchy, and tend to ask questions like, Okay, is this sender new to me? Why is he sending copies of the same, exact email, to a bunch of people in our company? Spammers do that kind of stuff. Hmmm, how long has their server been around? Can I really trust this sender?

Spam firewalls are usually only a problem when you first start sending campaigns to a big client. You’ll experience some deliverability issues in the beginning, because you’re new. They’ll eventually learn to let you through. To expedite things, you may have to ask the IT people in charge of the firewall to whitelist your IP Addresses (or the IP address of your email service provider). 

Challenge/Response Filters

These are more common among at-home recipients. When you send email to someone with a challenge/response filter, here’s what happens: If you’re not already in that person’s buddy list or address book, then you’re considered a stranger to him. And if you’re a stranger, you could be a spammer. 

So their challenge/response filter sends you an automatic reply with a question that you have to answer, or some link you have to click (this is to prove you’re a human, and not a spambot). Here’s an example of a typical challenge/response reply, from Spamarrest, a popular vendor:

Remember that you have to be whitelisted if you want your emails to get through. So when people fill out your opt-in forms on your website, ask them to “please add our email address to your address book.” Use your opt-in process as a way to set expectations and get white listed up front. Whenever you send a newsletter, make sure the reply-to address is valid, and that a human checks it after each campaign. You can expect to receive a couple auto-replies like this after every campaign you send. 

Whenever we send our MailChimp Monkeywrench newsletter, we get about half a dozen of these autoreplies. We have to manually click each one of them if we want the email to get delivered.

Tactics for Avoiding Spam Filters

So now you know how a lot of anti-spam systems work. You really have to think like a spam filter when you design your emails. Just like you think like a search engine when you design web pages. Spam filters read your emails and look for similarities with known spam. You don’t want to do things that’ll get you accidentally thrown into the junk folder. And the best way to learn what NOT to do is:

1. Open up your junk email folder.
2. Look through all that spam you got. Really read it. Look at how they design things, and look at how they write their copy. Notice all the similarities?
3. Now, don’t do what they do.

To be more specific, here’s some stuff to avoid:

• Don’t use bright red fonts or go crazy with colors, styles and formatting.
• Don’t yell with lots of exclamation points!!!!!!!
• DON’T YELL WITH ALL CAPS
• Don’t use spammy words like “mortgage” and “Viagra”
• Don’t say “free” or “click here!” or “click here now!” or “act now!” or “limited time!”(be especially careful of your unsubscribe link, where you might say something like, “click here to unsubscribe.”)
• If you use a WYSIWYG to code your HTML email, make sure the HTML code is clean. WYSIWYGs often throw in useless code that’s invisible to the user, but spam filters look at it and think you’re a sloppy spammer. 
• Bad HTML in general can get you spam filtered. Missing table tags, content below the closing </HTML> tag, or empty <TITLE></TITLE> tags will get your message thrown into the junk folder. Don’t get sloppy with that code. Note: the empty <TITLE> information is very common if you use WYSIWYGs. They throw that in by default, and expect that you go back and fill it in. Don’t forget to go back and give the document a title.
• Don’t use dummy text in your message, even if you’re sending a test campaign. Spam filters get suspicious of all that “lorem ipsum” stuff. When sending test campaigns, use content that’s as real as possible. Don’t type in one paragraph, then copy-paste it ten times. Spam filters notice all the duplicate content.
• Don’t use the word “test” in your subject line.
• Don’t get too creative with your spelling, because the spammers do that all the time (how many m0rtg4g3 ref1nanc3 spam messages are in your inbox right now?
• Don’t make an HTML email that’s just a bunch of pretty graphics. You need some text in your message, too. Otherwise, the spam filters will have nothing to read, and will think your message is junk.
• Don’t send the HTML email by itself. Always include that plain-text alternative message.

Testing and Troubleshooting Your Email Designs

After you’ve finally figured out how to design and code your first HTML email template (and, of course, your plain-text alternative version), don’t just plop in your content and start sending campaigns. Test your template first to make sure it’ll work in all the different email applications out there. Once you’ve found all the little bugs, and your template is rock-solid, you can start sending.

Hey web Designers: Emails aren’t the same as web pages!

If you’re a web designer, you’re probably used to testing web pages in a few different browsers, like Internet Explorer, Mozilla Firefox, and Mac’s Safari. And you’re probably familiar with a few annoying inconsistencies between all the browsers, and you have a couple hacks to make things look right. For email design, multiply all that by ten. There are tons of email applications out there that you need to test on, and they all render HTML email in their own annoying ways. Do you need to test every single newsletter across every single application every single time you send? Of course not. Just set up a good, simple, solid template and test it as much as possible. Then all you have to do is swap out content. Here are some tips for testing your email designs.

Testing in different email applications

In the past, the only way to test your campaign was to set up a bunch of accounts at all the major ISPs, set up some test computers with different operating systems and email programs, and sends test campaigns to them. It would take hours to do all this, and it really took all the fun out of email marketing.

That’s another reason why we created our Inbox Inspector tool. You build your campaign, click one button, and we’ll generate screenshots of how your campaign is going to look in every major email program. We’ll even tell you if any of the major spam filters and email firewalls will block your message, and why. We’ll point out what content you need to fix in order to not get blocked. We’ll check for typos and HTML coding errors. If you prefer to test your campaigns yourself, here are some email applications you should install, and what to look for:

AOL

AOL takes spam very seriously. So check to make sure your emails don’t get filtered. Also, notice their report spam button. You’ve got to make sure your emails look relevant, or people will click that button (even if they opted in to your list). AOL 9 has a tiny preview pane. It’s about 194 pixels wide, so make sure that your branding shows up okay under those circumstances. If your email is too wide, and your logo is right-aligned, your recipients will never see it, and they may never realize who sent it.

Apple Mail

This is Apple’s free email application. You get a nice big preview pane here, and they don’t do much image blocking at all (yet). Images seem to be blocked only if an email ends up in its junk folder. Apple Mail comes with its own spam filtering system that “learns,” so you should test your emails for any deliverability issues.

Microsoft Entourage for Mac

Kind of like Microsoft Outlook, but for the Mac (it comes with Mac Office). Their HTML email support is fine, but we noticed in earlier versions of Entourage, if you send an email in HTML format, but it consists of nothing but text and hyperlinks (no graphics or tables), then the links actually display their URL next to them. Kind of odd. But if the email actually contains a graphic or table, then the links work as coded. The issue seems to be fixed in the latest version of Entourage.

Microsoft Outlook 2003

Outlook 2003 has better spam protection, so watch whether or not your emails get filtered. Also, this one’s got three vertical panes, so your emails have less room in the preview area.

Microsoft Outlook 2000

There are lots of business users who haven’t upgraded to Outlook 2003 yet. This version of Outlook predates all the vicious worms, spam and viruses that we’re used to now, so more of your emails with flash and videos will actually work here. Don’t let it build your confidence—that fancy stuff won’t work in other programs.

Microsoft Outlook Express

This is the free version of Microsoft Outlook, installed on all Windows machines. Used mostly by at-home recipients. Not really many HTML email issues, besides the usual “block images by default” feature that’s on just about every email application these days.

Microsoft Outlook 2007

For Outlook 2007, Microsoft switched from using Internet Explorer (a web browser) to render HTML email to using Microsoft Word (a text editor). Obviously, HTML email would render a lot better in a browser than Microsoft Word, so this is kind of a bummer. Microsoft said this was because they wanted their customers to have more control over editing HTML email.  Here’s what you need to know about Outlook 2007: Background images won’t work, most CSS won’t work, flash definitely won’t work, no forms, and no animated GIFs.

Lotus Notes 6.5.3 and 6.5.4

If lots of your recipients work at very large companies, you’ll need to check your emails in Lotus Notes. This is probably the most frustrating email application out there. It does the strangest things. You’ll need to keep your layouts very simple. Even still, Lotus will find a way to mess things up. There are even big differences between Lotus Notes 6.5.3, vs. 6.5.4.

Eudora 6.2

Eudora has good, predictable HTML email support.

Mozilla Thunderbird

A free email application that’s gaining in popularity. Does some odd things with alt-text and image blocking, but for the most part supports HTML email well. Thunderbird 1.5 has a feature that tries to detect “scams,” where they look for hyperlinks that claim to point to a website, but the code actually links you somewhere else. If it detects a potential scam, you get a warning across the top of the message, saying “Thunderbird thinks this message is a scam.” You can click the “Not a scam” button if it was a false alarm. It’s a nice idea, but it seems to give lots of false positives, especially when you use click tracking in your emails (all your links will point to a redirect script, in order to track clicks). We don’t think it’s much of a problem, as long as your emails look nice and professional.

Testing in browser-based email services

You might want to set up accounts with all the browser-based email services. They’re usually free, so it’s easy to set up lots of test accounts. You especially want to look at how browser-based services alter your HTML and CSS. 

Also, since these services are used by bazillions of people, their anti-spam filters are set really high. We listed them below in order of most-to-least popularity (according to a recent survey across all MailChimp managed lists). When you set up your test accounts with these services, leave their junk mail filter settings to “default.” It really pays to test on these accounts before sending your campaign.

Yahoo!Mail

Pretty aggressive anti-spam filters (understandably). Other than that, they do the typical browser-based email stuff, like stripping your BODY and HEAD tags.

Yahoo!Mail Beta

A much richer browser interface, with a preview pane. So far, support for HTML email looks great. 

Hotmail

Similar issues as Yahoo!Mail, where BODY and HEAD tags are stripped, so background colors and embedded CSS are lost. At one time, Hotmail was “expiring” hyperlinks in emails that were open for five minutes or longer. 

Gmail

Extremely aggressive spam filters. And very, very little CSS support. It strips embedded CSS, (even if you keep the CSS out of the <HEAD> tag). It also strips every “class” code that it finds (such as in <span class=”header”>). To get CSS to work in Gmail, you’ll need to use inline styles. Otherwise, your fonts will default to Arial, colored black, and about 13 pixels in size. If your fonts don’t adhere to their CSS rules, check to see if they end up blowing out your tables cells, or wrapping in weird ways. 

Tips

1. Check Different ISPs, too.

If possible, check your emails when they’re sent through different ISPs. Different email servers will alter your messages before they even get to the recipient’s email application. For instance, some ISPs use email servers that will strip any content below a line in your email that starts with a period (we know, weird). We’ve been surprised at how differently email looks when checked in Outlook 2003, but received through Comcast, Bellsouth and Earthlink.

2. Send tests to friends and co-workers.

If you can’t set up a few test computers, keep your designs really simple, and send each campaign to a few friends or colleagues. Just ask them to let you know if anything looks funny or broken. 

3. Or just use MailChimp’s Inbox Inspector.

If you choose to set up your own test machine, and all those test accounts with the different ISPs, you could easily spend a couple grand. If you also want to check your campaigns against the big server firewalls (like IronPort, MessageLabs, and Postini), it’ll cost you several thousand dollars just to get started. If you’ve got the money, go for it. But who has the time to maintain all that stuff?

You can save yourself a ton of time and money by using our Inbox Inspector. We’ll generate detailed screenshots of your campaign in all the major email programs, and we’ll tell you if spam filters are likely to block your campaign, as well as what you need to change if you want to get through.