HTML email best practicesNew York Web Standards Meetup22 October 2009

Scott Trudeau and Jeffrey Barke

Overview

1. Design issues—How to build and test your HTML email

2. Email service providers—What they provide and why you should use them

3. Analytics integration—Track your campaign

4. List hygienics—Legal issues and best practices for your campaign

5. Standards?

1. Design issues

Email clients…

are a diverse lot!

Outlook 2007, Gmail, Lotus Notes! And they’re not always getting better. Outlook 2007 took a step backwards in rendering!

Campaign Monitor maintains a list of popular email clients and the CSS support of those clients:

• http://www.campaignmonitor.com/stats/email-clients/• http://www.campaignmonitor.com/css/

Why HTML email?

Given the state of email clients, why send HTML email?

• Consistent branding• Better response rates• Additional tracking data (open rates)• Links can be displayed much shorted

Why not?

• Not everyone can or chooses to receive HTML email• If done improperly, your email can be unreadable

HTML email design guidelines

Campaign Monitor provides a few quick and dirty design guidelines:

• Don’t waste your readers’ time• Permission matters• Relevance trumps permission• Make unsubscribing easy• Image blocking is common• Bring back tables• Add inline styles• Don’t forget your plain text version• Meet your legal obligations• Test, test, test

Source: Email design guidelines . Campaign Monitor

cont’d

Image blocking is common

Many clients block images by default and require the user to click a link or button to make them visible. Given this, you cannot rely on people seeing your images.

Never design an email using all images!

• Never use images for important content like headlines, links and any calls to action.

• Add a text-based link to a web version of your design at the top of your email.

• Get added to your recipient’s address book or whitelist.• Use alt text for all images for a better experience in Gmail.• Always add the height and width to the image to ensure that the blank

placeholder image doesn’t munge your design.• Test your design with images turned off before you send it.

Add inline styles

Some email clients remove CSS from the head, but Gmail will strip all CSS from the head or body except for inline styles.

Further, some email senders will strip CSS. In my experience, HTML attributes are superior to inline styles.

No CSS shorthand!

I've even had problems with #fff vs #FFFFFF.

Bring back tables (and janky markup)

Email client support for floats and positioning is the worst, so for multi-column HTML email, it's back to structural tables.

However, plan them and attempt to minimize the nesting!

Put general font style information in the td, closest to content. Sitepoint does not recommend using the font tag, but I do. And it always works!

HTML email width

HTML emails are read within email clients, most of which, even if maximized, do not use the full width of the screen to display email messages.

The recommendation is a fixed width of 550-600 pixels.

While height is not as important as width, the average preview pane is 300–500 pixels high, so the most important things should be visible there.

If using fluid layouts, set table width to 98%. Yahoo! mail needs a 1% cushion on either side.

Miscellaneous coding bits

Use target="_blank" for anchor tags.

Outlook 2007 ignores background images altogether.

If images have been stitched together, review carefully for the pixel shift. In other words, set inline images' display equal to block.

JavaScript in email?

Nope! Gets stripped for security reasons.

Flash in email?

The answer is no.

Campaign Monitor ran a test and none of the email clients tested displayed either the Flash or alternate content except Mac Mail, which did play the Flash movie. Further, Outlook 2003 and Outlook Express displayed an ActiveX security warning that had to be clicked prior to loading the message. After being clicked, neither the Flash nor the alternate content displayed.

Source: Using Flash in email. Campaign Monitor

HTML5 video in email?

Surprisingly, yes!

Video plays in Apple Mail, Entourage 2008, MobileMe and the iPhone. All of the other clients display the fallback content.

Source:http://www.campaignmonitor.com/blog/post/2905/html5-and-video-in-email/

Forms in email?

Nope.

Email clients consider email forms to be a security risk. Some warn about the potential danger, others disable the form.

Forms are displayed in all major email clients except Outlook 2007.

However, the displayed forms are not functional in .Mac, Yahoo! Mail Classic, AOL Webmail, Windows Live Hotmail and Outlook 2003.

Source: Using forms in email. Campaign Monitor

Don't forget your plain text version

Not all email clients support HTML.

Some email readers set their client to open plain text only.

Many email design tools will create a reasonable automatic translation of HTML enter plain text; much better than raw HTML or nothing; use it.

I couldn't locate these plain text templates on Campaign Monitor's site anymore: http://web.archive.org/web/20070824022914/http://www.campaignmonitor.com/resources/plain-text-templates.aspx

Test, test, test

Test in the browsers first and validate your code (as much as possible). If it works in Firefox and Internet Explorer, it will probably work in Outlook, Yahoo! and Google Mail. IE 6 is a good proxy for Outlook 2003.

Next, I test in actual email clients. I have accounts with Gmail, Hotmail, Yahoo!, Outlook Express, etc. And I wrote a simple emailer, so other people can test theirs too!

Finally, I run it through Campaign Monitor.

Test, test, test cont’d

If it smells like spam… http://spamcheck.sitesell.com/

Things to check:

• Does the From address display properly (as a name, not a bare email address)?

• Is the subject line correct?• Is the contact information correct and visually obvious?• Does the top of the email display the text, "You received this email

because ... Unsubscribe instructions are at the bottom of this email."?• Does your email contain text asking readers to add your from address

to their email address book?• Does the top of your email include a link to the web version of the

message?

2. Email service providers

Email service providers

Do I really need an Email Service Provider?

Yes

Why you need an ESP

• Ensuring deliverability is a full-time job• Stats (delivered, opened, bounced, etc.)• Subscribe/unsusbcribe APIs, integrated unsubscribe & list

maintenance• Browser-based design tools• Technical assistance (e.g., SPF/DKIM)• Easy A/B testing & client testing

Recommended ESPs

I've worked with many. For most people, my two favorites:

• MailChimp• CampaignMonitor

Both have great marketing resources, template design help, strong UIs, good reporting, integrated testing, reasonable pricing and responsive tech support.

MailChimp

• Pay-as-you-go OR all you can eat monthly (for < 50,000 subscribers)• Good for few, smaller lists with frequent campaigns

CampaignMonitor

• Pay-as-you-go• White-label• Great when working with clients & larger lists w/ less frequent

campaigns

Price

For every email sent to more than five people, you pay $5 plus a cent per recipient. If you purchase credits in advance, the rate decreases after the first 50,000 credits.

Source: http://www.campaignmonitor.com/pricing/

CampaignMonitor cont’d

Does not play well with others.

Unfortunately, Campaign Monitor does not seem to integrate with other platforms, or, if it does, it certainly doesn't make it as obvious as MailChip does.

Campaign Monitor does have an API, so this should be possible.

Since 37signals uses Campaign Monitor, not sure why it hasn't been done yet.

3. Analytics integration

Google Analytics

utm_campaign

The name of the marketing campaign the email belongs to.

utm_medium

Marketing medium. For HTML email campaigns, use email.

utm_source

The list of recipients you're sending the message to.

utm_content

Content of the email; can be useful to differentiate between version produced for an A/B test.

The campaign, medium and source parameters are all required, while the content parameter is optional.

Source: Tracking Email with Google Analytics. Analytics Talk

Google Analytics cont’d

Tools

Google Analytics URL Builder

Problems

Two common problems:

1. People forget to tag their links

2. Sites sometimes have a redirect that strips the campaign tracking parameters.

Source: Tracking Email with Google Analytics. Analytics Talk

Google Analytics cont’d

Privacy

While the email address of the visitor can be added using link tagging, the GA terms of service forbid the collecting of personally identifiable information.

Source: Tracking Email with Google Analytics. Analytics Talk

Google Analytics cont’d

"Direct" vs "other" traffic sources:

Google Analytics cont’d

Google Analytics cont’d

4. List hygienics

Keep your lists clean

A clean list is a delivered list. Don't be a spammer.

Rules-of-thumb:

• Get permission• Do not use pre-checked opt-in checkboxes• Use double opt-in• Don't break the (CAN-SPAM) law

And make it easy to unsubscribe! There's really no point in spamming anyone.

Source: Managing & Growing Your Subscriber List. CampaignMonitor

Keep your lists clean cont’d

• Scrub your list often (remove duplicates, compare against list of bad domains, remove role accounts.)

• Remove "spam" email addresses (have the word spam in them)• Remove inactive addresses

5. Standards?

The Email Standards Project

http://www.email-standards.org/

Rates the various email clients and works with email client developers to improve web standards support and accessibility in email:

http://www.email-standards.org/clients/