10 steps to create and code HTML emails to optimize for viewing, delivery and avoiding spam filters

Creating and coding HTML emails to ensure correct formatting and a high email delivery rate is a common issue faced by online marketers. With the increased popularity of remote email clients such as Gmail and Yahoo Mail, as well as mobile devices such as the iPhone, getting your graphic rich HTML email through and looking good is tough. Here are 10 steps to optimizing your HTML email code so that you get your messages through to the majority of email applications intact.

Step 1: Less code is more

I've been creating and coding HTML for over 10 years, and it's interesting to notice that the best approach in developing HTML emails properly is with bare minimum amount of HTML code. In fact, the most optimized code is very similar to how HTML was coded way back in 1999. No fancy CSS style sheets, div tags or javascript is allowed, since remote web-based email clients like Gmail and Yahoo Mail strip out your <head> and <body> tags and all code referenced within them. The reason why they do this is that they basically don't want your code to override theirs in your browser.

So, basically we're back to old school basic HTML coding only here for setting fonts and styles. This means no more using Div tags and CSS for positioning: you'll need to rely on basic HTML tables for your layouts. So start with a simple basic table, and hard code fonts and style effects as you go with traditional HTML tags. Be sure to reference the HTML standards at w3.org and use their HTML email validator for keeping up with the latest in HTML compliance. Email services such as Gmail require that your HTML is valid and W3 compliant in order to receive it.

Step 2: With HTML email size IS everything!

Most email applications only show a very narrow width of your HTML email. Remember, we're not designing a web page here at 800 pixels wide. You've got to account for Outlook and Gmail email apps who use up at least 200 pixels in the left hand margin for folders and task bars, widgets etc.. So, we're talking less than 600 pixels wide maximum for your HTML email. Keep the number and size of images down to a minimum. I generally say not more than 3 images are really necessary, at not more than 25K each. Be sure these images are not just pretty placeholders, but actually convey some features or benefits of your offer. And the proportion of visible text to images and code is important for SPAM filters. If you have 70% graphics, and only 30% text, you are very likely to have your HTML email filtered. Try for at least 50% or more as visible text to be safe.

Step 3: Tell subscribers to white-list you

Not only should you add a link to the web version of your HTML email in the top section of your email, but you need to also ensure recipients white list you to receive future emails. They can do this simply by adding an email you specify to their contact list or address book. You may want to add copy similar to this at the top of your email: “Please add offers@mycompany.com to your saved email addresses or contact address book to make sure you can receive these emails."

Step 4: Assume images will be blocked

Many hosted email applications such as Gmail have defaults set to block images in HTML emails, even if you have added an email to your contact safe senders list. First and foremost, you must include a link to a web based version of your HTML email at the top, and even the bottom as well. This gives text-only viewers, or those who block images a way to see the full graphic version of your HTML email in their browser. I also always recommend labelling images using ALT tags with full descriptions of what they are, especially for headlines and images with a call to action in them. Not only is this good for when images are blocked, but it also provides those who are blind (and use text to speech software) the ability to hear what is being shown. Also, if you are using a 1x1 tracking pixel to monitor opens (e.g. after the <BODY> tag at the bottom of your email) then you are increasing the likelihood of being filtered. If you must include a tracking beacon, resize it from 1x1 to slightly larger, or even use an existing image for tracking, vs a separate blank gif.

Step 5: Manage your URL's

You'll need to use absolute URL references for all images that you embed in an HTML email so that they load properly (vs relative URLs). Be sure to use only one URL/domain for hosting images, since multiple domains will trigger red flags with email filtering software. Also be sure to make any visible text links consistent with their destination. For example, don't do something like this when referencing a site (hover over to see that destination URl is different than visible URL): marketingprofs.com. And finally, be sure to make the colour of your links stand out against background colours, so they don't get lost. Turn off or block images in your HTML email and see how the links look. If they blend in with the background and become invisible, change their colour so that they show up with better contrast.

Step 6: Get good at using tables and spacers

Again, basic HTML use means using tables instead of <DIV> tags. You'll need to play with these a fair bit for sizing, and use spacer images (clear gif's to keep your tables from collapsing or over expanding). Many find tables hard to create and use, but a good HTML editor such as Adobe Dreamweaver or FrontPage will really help make this task easier to manage.

Step 7: Watch your SPAM keywords

It's a myth that simply putting the word "free" in your text or subject line will get you filtered. Sure, if you use words or phrases like "diet pill" and "make money fast" throughout your email, you'll have filtering issues. But more to the point, you'll need to watch things like having too many images relative to copy. I find that 250 words of copy plus or minus is acceptable, with not more than 2 or 3 images. Also, keep ALL CAPS and excessive punctuation under control. Too many exclamation points will always hurt your SPAM filter score. And don't use excessive bolding, <H> heading tags or links/buttons that say "CLICK HERE NOW!!!". Use spam filter software to optimize your HTML email prior to sending it out. My favourite open source tool is SPAM Assassin. It scans your HTML code and gives you a score of 0 to 5, with 5 being the most likely to be filtered, and anything below 3 generally acceptable. It also provides specific coding changes for items that increase your score.

Step 8: Clean up your code, especially Word

Many newbie coders simply cut and paste copy from Microsoft Word into an HTML email format, and send it out. But if you look at the code after you've finished your pasting, you'll see a real mess of extraneous Microsoft code and tags. SPAM filters really don't like extra code beyond basic HTML, and your filtering percentage will definitely increase. Make sure you delete out any comments or markup that you don't need for your message. Also, using url encoded domains in URL's (replacing the code "%20" for a space in a URL) will cause issues at AOL, CompuServe, and MSN/Hotmail.

Step 9: Think about preview panes

Did you know that 80% of Outlook users have preview panes activated for HTML emails? To ensure you get your email opened, but sure to include your main benefit or call to action in the top inch or two of your email. Draw in the reader to open the email and click on, rather than preview and delete. Also be sure to have a mix of images (with Alt tag descriptions for each) and visible text copy as well as a link to an HTML web-based version in the top section of your HTML so that no-image viewers can get the gist of your message right away.

Step 10: Test, test and test some more

It can be a daunting task to test all available email clients and hosted applications. This becomes more of an art than a science since when you optimize for Outlook, you often have to compromise for Gmail, as well as vice versa.. For Mac, there is Apple Mail 2 and Entourage. For Windows there is Outlook, Thunderbird, Eudora, Lotus Notes and AOL. Note, Outlook 2007 doesn't use the HTML rendering backend from Internet Explorer, but rather uses MS Word’s HTML engine. For web-based email services, there is .Mac, Gmail, Yahoo, Windows Live and AOL. There are mobile clients including Blackberry, Palm and iPhone's. The good news is the latest iPhone actually does a pretty good job at rendering your HTML pretty much as is, without stripping much from it. The bad news is that you have a whole lot less screen real estate, so you need your copy to be concise, your code clean and have a simple call to action. With mobile apps, you may even want to use a URL shortening service such as bit.ly.

So how do I test over a dozen apps with my HTML email then? Well, I have 2 strategies. The first is to make some assumptions, such as choosing the top 3 or 4 most popular email apps to optimize for. Generally I'll choose MS Outlook, Apple Mail and Gmail and/or Yahoo Mail. If you optimize for these 3 or 4 services, you'll do well 95% of the time with other apps. The other approach is to spend a few pennies to use a HTML email testing service (I'm not affiliated with this one in any way, and you can test Outlook and Gmail for free with these guys).

HTML Email Examples

Can You Have More Sales, Too?
Helping over 61,000 businesses like yours raise profits and build customer relationships using AWeber's opt-in email marketing software for over 10 years.

10 Steps To Code HTML Emails