HTML E-Mail & Newsletter Blasts
What you need to know
Everything you've learned so far about web standards, CSS and HTML best practices just flew out the window. Building web pages that perform well in various browsers is a piece of cake compared to building HTML e-mails.
The first thing you must understand is that e-mail clients vary widely. This is also true among different versions of the same software.
The second thing you must know is that most e-mail clients do NOT behave as browsers do. Some e-mail clients support HTML and CSS very well. Some do so with mixed results and others not at all.
Guide to CSS Support in Various E-mail Clients
http://www.campaignmonitor.com/css/
A few Dos and Don'ts
- Do use inline CSS styles for fonts and colors.
- Do use basic tables to hold your page elements.
- Do set page width to under 600px.
- Do use absolute URLs to images hosted on your server.
- Do use meaningful "alt" attributes on images in case image display is turned-off.
- Do include a plain text link to the web page on your server for people who can't see HTML e-mails.
- Do include an Opt-Out link for people who wish to be removed from your list. In most parts of the world, this is a legal requirement.
- Don't attach files.
- Don't use Flash or other media in e-mails.
- Don't use JavaScript.
- Don't use Frames or Framesets.
- Don't use spammy words or phrases in the subject or content of your e-mails.
- Don't overuse CAPS, percentage or exclamation marks as this can attract attention from Spam Filters.
E-mail Templates
It is very helpful to begin your project with a pre-built HTML E-mail Template. The link below offers several template kits that perform well in most major e-mail clients or you can build one of your own.
Campaign Monitor Free Templates & Template Builder
http://www.campaignmonitor.com/templates/
About Microsoft Outlook 2007
When Microsoft switched it's e-mail rendering engine from Internet Explorer to Microsoft Word 2007, Outlook went from being one the best HTML supported e-mail clients to one of the worst. Word/Outlook 2007 does not support animated GIFS, HTML Forms, CSS positioning, backgrounds, min-max widths, text-transform, word-spacing or line-breaks. See the link below for a complete list of what isn't supported:
http://msdn.microsoft.com/en-us/library/aa338201.aspx
Another HTML E-mail problem child is Lotus Notes. See link below for details.
http://www.templatekit.com/lotusnotes1.php
Test Before you Blast
Open some e-mail accounts at MSN Hotmail, Yahoo, G-mail, etc... Send a few test e-mails to yourself and view them in the various web mails. Also test your e-mails on popular email clients and mobile devices. An effective e-mail campaign must convey its message immediately without need for clicking on attachments or images. If it doesn't, you're missing an opportunity to reach your customers.
Bad E-mail Examples
DISCLAIMER: I have no bias towards the companies in these examples. I'm simply showing you what their e-mails look like at my end.Viewed from web mail, this company's e-mail tells me nothing so far except what's in the subject line. Sadly, there's not even a text link to the HTML page on their server which is a wasted opportunity.
Clicking on the attached file isn't much better because my web mail blocks images for security reasons. So far, not so good.
Clicking on the web page link brings up a long page of advertising that renders in Quirks Mode (no document type declaration is specified in the HTML).
To make matters worse, the creator used a non-standard font-face called Modern which looks terrible because I don't happen to have that font installed on my system. For best cross platform results, stick with Windows/Mac Web-Safe Fonts.
Good E-mail Examples
I don't need to look further to find out what this company is offering because the plain text version displays immediately.
Image based version of the same message. Short, sweet and to the point.
In summary, keep your designs simple and uncluttered. Place important content at the top of your page and use plain text and links to convey your message to people who won't see it otherwise.
Sending Limits
Now that your HTML E-mail is finally created, don't be too quick to hit that SEND button. Most server hosts, ISPs and web e-mail providers like G-mail put limits on how many messages you can send per minute/per hour/per day. If unsure, check with your provider before you send a blast. You wouldn't want to violate your Terms of Service Agreement .
At a minimum, you'll probably need a dedicated bulk e-mail sending software like PIMEX MailExpress (for Win only) or R10BatchMail (Win & Mac) that sends mail in short blasts spread out over time. If your list is larger than 20,000 names or you can't wait to send out all your e-mails, the use of an e-mail service such as Campaign Monitor, iContact, MailChimp or Constant Contact is highly recommended.
Related Links:
