Archive for February, 2010

HTML email blast marketing has advantages over plain-text because HTML emails are brandable, measurable and more readable for the subscribers, but make sure to obey applicable laws. This is the first article in a three-part series on HTML email that was delivered by CrossComm’s Steve Hong to the Raleigh-Durham Web Design Group in February 2010. You can also download these email blast marketing tips in PDF. Check out MailChimp’s comprehensive how to HTML email marketing guide for a lot of great best practices. We’ve condensed and reorganized many of those HTML email tips to specifically address email list owners.

Prepare email carefully. Don’t be a spammer.

• Avoid being reported as an email spammer because this could prevent your emails from reaching your subscribers. Give your subscribers every reason to open your email.
• Follow the rules of the CAN-SPAM Act of 2003 which essentially tells you not to be deceptive and to let people unsubscribe from your list. You should also list your physical street address. Talk to a lawyer for legal counsel.
• Send only to opt-in lists. Don’t buy lists. Follow the spirit more than the letter of opt-in rules. It’s spam if your subscribers think it is.
• Use double opt-in: customer signs up on your website and receives a confirmation email with a link he or she must click to confirm subscription.
• Provide example emails with your opt-in form to start familiarizing potential subscribers with your email brand and to let them know what to expect.
• Ask people to whitelist your email address in their spam filters.
• Send email regularly to avoid subscribers forgetting about you and marking your email as spam. Be consistent.
• Don’t sell with your subject lines (“GREAT OFFER JUST FOR YOU. HUGE SALE!!!”), just describe.
• Avoid spammy language like bright red text, excessive exclamation points!!!!, ALL-CAPS and spammy words (mortgage, Viagra, click here, limited time, etc.). Check your email’s spam score before you send it with Contactology’s email spam checker.
• Set up abuse@yourdomain.com to accept complaints from ISPs when their members flag you as a spammer.
• Host images on a server instead of sending them as attachments. Be prepared to host those images indefinitely because emails will be reopened well into the future.
• Use an email sending service because you can’t send HTML email from your own desktop email program like Outlook or Apple Mail. It needs to be sent from a server that combines HTML and text versions of an email together. Email services also handle a lot of complicated issues around helping your email pass spam filters. Here are a few companies to consider:
  • iContact (based in Durham, NC)
  • Bronto (based in Durham, NC)
  • MailChimp
  • Campaign Monitor
  • Vertical Response

Use email marketing strategically.

• Consider creating multiple lists for different kinds of emails, different audiences and different send frequencies. Don’t send the same email to all 1000 people on your list. Send a different offer to recent customers or people interested in particular subjects.
• Sign up on your own lists so you get your emails just like your subscribers and can see any potential problems.
• Set the reply-to address to a separate account you can check at your leisure. Use a generic account that can be transferred to different employees. You don’t want to get everyone’s vacation away messages at your regular email account. Also check for challenge/response emails to manually get on a subscriber’s whitelist.
• Check your email statistics but expect only about 20% or 30% of subscribers to open your email.
• Test each aspect of your email: subject, links, day of the week, time of day, etc. Consider segmenting your list into test groups to test variations with each segment. Send to one group at 9AM and another at 12PM and see which group opens and clicks more. Test one factor at a time.
• Watch your web analytics and see if your website traffic and conversions improve after emails.
• Coordinate your team to handle traffic and inquiries resulting from emails. Be aware of time zone differences.

Also in this series

• HTML email design — tips for designers
• How to code HTML email — tips for coders

HTML email design elements should be simple, minimal and non-essential. This is the second article in a three-part series on HTML email. You can also download these HTML email design tips in PDF. Check out MailChimp’s comprehensive how to HTML email marketing guide for a lot of great best practices. We’ve condensed and reorganized many of those HTML email tips to specifically address designers.

Design HTML email for the unique medium.

• Use simple static images because interactive elements like Flash, movies, and Javascript won’t work.
• Use graphics minimally because image-heavy emails can look like spam.
• Make your images non-essential because webmail programs will frequently turn off image-loading by default. Your email should communicate well even without the images.
• Avoid using background images and tiling because some email programs, like Outlook, won’t show them. You can use them if they don’t matter.
• Set your canvas to 500-600 pixels wide to fit smaller preview windows.
• Design the recognizable brand to fit into the top leftmost 200×200 square because of tiny preview panes in some email programs. Give subscribers a reason to open the email in a full window.
• Make the first line of text relevant and unique because it will show in Gmail and future programs that show a snippet of the first line along with subject lines.
• Design plain-text formatting with headings, lists, links, dividers, etc.
• Read SitePoint’s HTML email design principles.

Include essential elements.

• From name should be recognizable.
• Subject line shouldn’t look spammy.
• To line should be personalized with a name, not just an email address.
• One-click opt-out link should be easy to access, perhaps at the top.
• Link to an archived web version just in case the template breaks.
• Link to a privacy policy page.
• Street address, phone number and other contact information adds legitimacy.
• Reminder how the subscribers got on your list.

Also in this series

• Email blast marketing — tips for email list owners
• How to code HTML email — tips for coders

When exploring how to code HTML email, keep in mind that the code should be low-tech, long-hand and well-tested. This is the third article in a three-part series on HTML email. You can also download these tips on how to code HTML email in PDF. Check out MailChimp’s comprehensive how to HTML email marketing guide for a lot of great best practices. We’ve condensed and reorganized many of those HTML email tips to specifically address coders.

Code HTML email templates like it’s 1999.

• Code HTML/CSS by hand rather than in a WYSIWYG editor to ensure the code is clean and only includes supported elements.
• Use low-tech and simple table layouts without nesting or merging cells because CSS layouts with positioning don’t work.
• Code only long-hand inline CSS styles instead of external or head stylesheets. CSS short-hand like “font” may not work, so write out individual properties like “font-size.” Try a tool like Premailer to make your styles inline.
• Use CSS primarily for text styling. Put general text styles on parent td cells but don’t rely on style inheritance from parent table cells to children cells. Use inline CSS on heading and paragraph tags to overwrite inherited styles.
• Avoid font tags because they don’t yield consistent font sizes.
• Wrap everything in a master 100% width table for background colors and other body styles because head and body tags are stripped out by webmail.
• Avoid conflicting with webmail CSS ID and class names by not using any or using unique names, like “clientname-footer”, rather than generic names, like “footer.”
• Reference images with absolute instead of relative paths because they’re hosted on a web server.
• Use alt text in a header image to ask people to “please turn on images” so that they know they’re missing out when their webmail turns off images.
• Add CSS text styles to table cells even if they contain only images because alt text will be styled when images are turned off.
• Take a look at MailChimp’s sample email templates to see code that works.
• Check out CSS Tricks’ s HTML email screencast for a how-to video.

Test HTML email code everywhere.

• Test with images and CSS turned off using the Firefox Web Developer Toolbar plugin.
• Set up many webmail test addresses and install several desktop email programs for testing. For a fee, try MailChimp’s Inbox Inspector for final tests of your template.
• Avoid spam filters in testing by avoiding the word “test” and dummy text like “lorem ipsum.” Make every aspect of the email production-ready before testing it.

Discover email program inconsistencies on your own, but start with these.

• Gmail doesn’t honor background-repeat styles, so plan for backgrounds to repeat in all directions.
• Gmail breaks when using single quotes around multi-word font names in font-family declarations. For example, don’t use “font-family:’Lucida Grande’,Verdana,sans-serif;” but rather “font-family:Lucida Grande,Verdana,sans-serif;”.
• Gmail doesn’t like percentage values for CSS line-height. Outlook 2007 creates too much line-height when em sizes are used. Use pixel sizes.
• Gmail and Hotmail don’t display background images declared with CSS, so use the background attribute of the table and td tags.
• Hotmail seems to ignore margins when margin-top CSS is used. Try using padding instead.
• Hotmail and AOL on Macs add extra line-height around images unless the line-height of the container is smaller than the font size. Try 70% of the font size like this: 12px font size, use 8px line height (12 x .7 = 8.4)
• Yahoo uses non-standard align and valign default values on table cells, so set them explicitly.
• Yahoo has styles that make cellspacing ineffective on tables. Use cellpadding instead.

Also in this series

• HTML email design — tips for designers
• How to code HTML email — tips for coders