HomePostsSep 11, 2008

HTML emails: the last word (until everything changes again)

Here is everything I know about creating HTML emails. This is the most boring and most useful post I’ve ever created by far. This is the aggregate of a lot of research and my own coding and testing. The title is bold, I know, but the information is solid.

I’m new to all of this… how can this article help me?

That depends. If you’re not going to be doing any coding then this post will help you understand what kind of work has to go into HTML emails to make them consistent and, hopefully, effective. If you’re designing the emails but not creating them then you’ll have an idea of what you’re working with and what you’re allowed to do.

Why HTML emails?

HTML emails are preferred so they are more likely to be read. This is a bit subjective but the consensus on-line is that, as long as they are designed properly and sent responsibly, HTML emails are a great marketing tool.

HTML emails are, however, still hated by some so this is a case of “less is more.”

Emails from you are easily identified and can look similar to your home page. This allows for consistent branding across all mediums, if done correctly. More about this in the “style” section.

HTML emails connect users to the home page, literally through through links and visually through the layout and colors.

HTML emails are “cutting edge,” pardon the expression. They are impressive and colorful and are a major part of marketing campaigns in all industries. Sending out a properly-coded and carefully designed HTML email says that you’re current

HTML Emails Are Different than brochures

HTML Emails Are Different than Web Sites

HTML Emails Are Different than text emails

The basics of HTML email design

Understanding email campaigns

Permission is king. If you didn’t get someone’s permission before you sent the email then it is probably considered spam. There are a lot of companies out there just yelling their name and products and, at best, they’re getting lost in the chaos. At worst, they’re generating negative attention for themselves. When it comes to marketing, bad attention isn’t just attention, it’s a brand killer.

Quality above quantity of recipients. If you have a list of 5,000 people that may not have heard of you before and might have interests that match your product, you have little more than a bullhorn and a crowd. If you have a list of 150 people that know what you’re offering and want to hear more, you have a captivated audience. It’s easy to assume that all people need to hear is what you’re offering and they’ll come running. The fact is, if there’s any sort of negative connotation to your brand (for example, showing up unannounced in their email box), they’re not going to want what you’re selling. Strive for targeted lists of interested people instead of just bigger ones.

At the very least, your emails need to be relevant to your recipients. If someone signs up for a specific newsletter or a specific notification list, that does not mean they want everything that your institution can send out. Send less emails with better, more relevant content and you’ll see better conversion rates. In the same vein, if you can personalize emails, do it. Most HTML sending services allow you to input the names of your recipients (along with other variables) so take advantage.

Mass HTML email senders have been likened to a “loaded gun.” First, there’s nothing stopping you from spamming thousands of people, on purpose or accidentally. All it takes is one bad batch and your domain might get blacklisted from your recipients’ email clients. This is definitely a bad thing; getting blacklisted from Hotmail or Gmail means you’ve lost the ability to send to millions of people. The responsibility to send out relevant, targeted emails to the right people is yours.

A good thing to keep in mind, along with the other points so far, is that these bulk emails (or any emails) cannot be recalled once they are sent. It’s easy to shoot off an email to a co-worker or a friend and correct yourself later but it’s not possible with big email campaigns.

In the same vein, it’s important to test your emails in several different email clients. We test with Outlook 2007, Yahoo, Gmail, Hotmail, and the Windows Mobile 6 included email client. There’s no substitute for checking different email clients and your recipient list should give you a good idea of where to look. If you have home accounts with Cox or AOL, try these as well if you can. The best you can hope for is that all of the styles, images, and table layouts come through OK. The worst you should have is a broken design but text content that shows up legibly.

Last but not least, make sure you are up to date on the CAN-SPAM regulations. In a nutshell, here they are from the FTC website:

Basic HTML elements used

p

span
img
a
table
tr
td

Basic tags used

style=

width=
align=
colspan=
href=
cellpadding=
cellspacing=

Basic CSS properties used

background-color:

border:
color:
font-size:
font-style:
font-variant:
font-weight:
letter-spacing:
line-height:
list-style-type:
padding:
text-align:
text-decoration:
text-indent:
vertical-align:
white-space:
width:
*font-family: this doesn’t work in gmail but there’s nothing wrong with adding it for the other clients.

HTML Email Layout

Tables determine the layout. If you are not trained in table design, good for you, you’re on your way to being a great web designer. You do, however, need to have a solid understanding of them to build HTML emails.

No head, html or style tags are used as these are often stripped out by the email client before viewing. HTML editors might add this and, while it won’t cause any problems, it should be removed. Keep in mind, the big client that strips these is Gmail. If you’re not concerned about styles in Gmail, it is ok to use this element but make sure it appears WITHIN THE BODY TAGS, not before.

Be sure to close all HTML elements! Use an HTML checker like the one in PSPad to find errors easily.<br /> – Wrapper table should be used with a 98% width if a centered layout or background color is desired. Content section is a nested table inside the wrapper table. For full-width designs or left-justified designs without a background color, the wrapper is not needed.

For 2 or more columns, the “colspan” and “width” tags must be used together. Remember the spreadsheet model and add as many columns as you need with the first row of cells. Again, make sure to add a wrapper table if you want a background color or you want the design to be centered in the window.

Design for the preview pane of email applications. That means you’ve got about 500, 600 pixels tops for your email designs. Most email windows do not take up the entire screen (do yours?) and some people intentionally make them smaller. Make sure your main content section is slim, under 600 pixels, and that your logo, tag line, or another “grabby” piece of content is near the top-left corner. Some email applications, like AOL, allow for about 150 to 200 pixels to make sure your content will appear.

Styling your email

Simple CSS is widely supported and can be used in all HTML elements with a style tag. This is called “inline” styling and is the best way to apply CSS to an HTML file being sent. This is what I mean by “explicit;” all styling cues are added to each element individually. To style two different paragraphs the same, the same style tag and CSS properties need to be added to both. Keep in mind, sometimes the body styles don’t carry over; stick to colors and minor “throw-away” styles in case this element is tossed out.

Some sources recommend CSS shorthand to cut down on file size while others say that it should be written explicitly. Declarations like “margin: 0” are usually safe but it might be a good idea to spell out font declarations completely. This helps the design process down the line.

Use images carefully and correctly in your design. Pictures, icons, and headers are great but can easily become cluttered and bloat the size of the email. Turn down image quality and use images that enhance your design or draw attention where you need it. Also, never send an all-image email. Some email clients block images as a default so your message might be lost and/or might be marked as spam.

Make sure you always include the width and height in the image tag for every single image. This ensures the empty placeholder images don’t get stretched and completely throw your design. Also, store the email images on a web server, preferably in a folder separate from website images, for example, in /images/email not /images. And don’t delete them.

General notes

Gmail notes

Hotmail/Live notes

Yahoo notes

Outlook notes

AOL9 notes

HTML coding sources

MailChimp HTML email guide

How To Code HTML Email Newsletters

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007

Optimising CSS usage for email

A guide to CSS support in Email

Email marketing sources

Email Marketing Strategies – Email Marketing “Must Dos”

How To Build a Basic Email Marketing Capability

< Take Action >

Suggest changes on GitHub ›

Comment via:

Email › GitHub ›

Subscribe via:

RSS › Twitter › GitHub ›

< Read More >

Tags

Marketing Email Throwback

Newer

Sep 16, 2008

How to send HTML emails for free using Mozilla Thunderbird

This is just a quick tip for anyone out there that wants to send a few HTML emails from their desktop and don’t have access to an HTML sending service like MailChimp or something similar.

Older

Sep 09, 2008

I learned something today

Sometimes there is an easy way, sometimes there’s just an easIER way, and sometimes there’s just hard ways.