Doing the HTML Email Dance
One of the first decisions you face when putting out an email newsletter is HTML or text. Ack. What are you talking about?
You know that HTML has colors and pictures while text is, well, just text. With all that code and those pictures, HTML messages can be big and users may not like that. And you've seen some HTML messages that are confusing, ugly and downright messsy.
On the other hand, HTML gives you the power to design and lay out your email so that its easier to read, easier to convey your message and get readers interested. And it's pretty simple to track who opens an HTML message and what links they click on - giving you alot of information about what topics are grabbing your readers' attention.
Used well, the benefits of HTML email can outweigh its problems. HTML can be used to produce polished, readable newsletters that reinforce your brand. Tracking who opens your message and what they click on can be a great help to your communications strategy. But it helps to have a good understanding of how HTML email works and how to put together a good looking message.
Below, we explore the strengths of HTML email and talk about how to build a good HTML email. Design ideas will apply to most anyone putting together HTML email. Advice on coding the HTML behind an HTML email will apply to those that have to 'build your own' email. Some HTML email hosting services - like that used by Eagle River Partners - handle the coding for you. This frees you up to worry about content.
Plain Text, Rich Text, HTML, Whatever
Thus far, I have assumed that you know what the heck HTML email is. Since I can't see you raise your hand to ask questions, let's pause for a moment.
HTML email uses HTML code (used to generate web pages) to control its layout, colors, images and fonts. Text email is plain black text on a white background. Email you receive that has any colors or sized fonts is at least HTML in a sense. Microsoft Outlook and some other programs have enabled what is called 'Rich Text email,' though the programs may call it HTML email.
Nothing has done more to give email a bad name than Rich Text email. The format used by an email program to create these messages is proprietary. You as the author lose all control over how the message will appear in the recipients in-box. This is risky if you're interested in ensuring a consistent experience for all readers.
A word of advice: don't use Rich Text email if possible. Send regular old everyday email in 'plain text' format. If you want to emphasize something, use ALL CAPS or an exclamation point (!).
Most importantly, though, avoid sending Rich Text email to a newsletter list. Your newsletter communications are too important to have show up in an unknown color and format at the user's end.
Multi-Part Email
When working with HTML email you will frequently see mention of multi-part email. Multi-part email is a message that has two versions of your message. The first is the HTML version and the second a text version. Both versions will be sent to the recipient in one message. The HTML version will be displayed if the recipient has an email program that renders HTML. Otherwise, the recipient will see the text version of your message.
Most HTML emails are actually sent as multi-part messages. This does increase the overall size of the email file you send but it almost always ensures that your recipient will receive a working message - HTML if it works for them and text if it does not.
Of course, this means that you need to create two versions of your message. Text versions are not 'automatically' created when you send an HTML email as a multi-part message. Thus, multi-part email increases your complexity while improving the recipient's experience.
Don't Abuse Your Power
Okay, so HTML email lets you use colors, fonts, images and the rest. But just because you can doesn't mean you should. Email readers, like web users of your website, are probably in a hurry. They like you but they just got ten other emails with yours and aren't going to dawdle. Make your message easy to read. Make it clear what the topics are. If the reader needs to hunt for a point, you're toast.
Instead of thinking about colors and fonts, think about layout. Use HTML to employ some simple layout techniques that enhance the readability of your message. Perhaps a masthead across the top. Some boxes for content. A column on one side with contents or maybe a 'note from the editor.'
Once you have a layout, think about using fonts and colors to improve readability. Stick with one font - maybe a second for a headline. Stick with just a couple color groups and please let them complement one another.
Design should support content, not distract from it. This applies to all web design, really, but is radically important in email. An email that is hard to read is an email that isn't read. Your email will benefit from clean, simple design. And simple design will also be easier to code, less likely to break in the recipient's email program and have a smaller file size - meaning that it will open faster.
Content: How You Say What You Have to Say
How much time do you spend reading every part of every email you receive? Not much, huh? The challenge in email newsletters is not to get each part of your message read but to get the key parts read. Use plain language. Make headlines meaningful. When longwinded or detailed explanations are needed, link to a web page.
It is also important to know your audience. Understand what they are interested in and cater to that.
Coding: It's 1997 All Over Again
Warning: the following section is a bit technical. If words like 'Font Tags' and 'CSS' make you woozy, you are advised to not do HTML email yourself. Stick to writing good content and work with a list hosting service and/or contractor to provide technical support.
If you're familiar with using tables to create a web page then you'll be comfortable with building an HTML email layout. You must use tables. Email programs are like old-time web browsers and as such you need to code your HTML email like it is 1997. This makes those of us that encourage Web Standards cringe. But, hey, maybe someday, we hope, table layout really will become a lost art. This will help keep those skills sharp.
In addition to using tables, here are some other things to keep in mind if you're writing your own HTML for email:
Headers
Most email programs will delete anything above a body tag. Heck, you may not even need or want a
body tag but rather start and end with open and close table tags.
CSS/Style
Never link to or import a style sheet. It won't work. More recent email programs will read embedded
styles. Inline styles are going to be your friend. Get used to using span tags around text and placing
inline style attributes in your spans.
A great reference for styling your html email can be found at css-discuss.
Font tags
Dude? Font tags? Yep. While it's been essentially illegal to use Font tags in web pages for a few years
now you should feel free to use it here. In fact, it is encouraged, even if you use embedded or inline
styles. Let's say you want to style a headline in blue Arial font, 14 pixels big.
Use <font size="14px" face="Arial" color="blue">. Most often, your font stylings can be handled by wrapping
text in a span and applying inline style attributes. But older mail programs will appreciate your font
tags.
Paragraphs
Avoid paragraph tags. You just can't control their application in different email programs.
Instead, use <br /> tags to break up text in a table cell.
Test, Test and Test - Then Test Again
Test your HTML email (and your text email, for that matter). This is particularly important the first time you use a template. A good email/list hosting service should allow you to send your email to a test list. Whether using a service or passing an email to a listserve, be sure to include a variety of mail programs in your list of test email addresses. You may be surprised at how different your newsletter might look in different email programs and in a web email reader like Yahoo.
Don't be afraid to test frequently. And, of course, proofread your text. Be sure to have a second set of eyes proof your text, also.
Make Your Intentions Clear
If you want to get past spam filters and have your message opened, make it clear who you are and what you are sending. Use accurate, straightforward subject lines and a legitimate return email address (i.e. one that goes somewhere).
If you are sending your message through an established list hosting or newsletter publishing service, chances are pretty slim that your message will be tagged as spam. If you are using desktop software to manage your list you may have more problems, depending on how the software sends messages and your Internet Service Provider.
