Easy DIY HTML Emails
September 14th, 2009 | Tutorials
Every so often a web project will have a campaign that requires a mass email. This may be called a “Newsletter”, an “e-blast” or “HTML Email”. I want to explore some of the pitfalls of this trend. If that doesn’t talk you out of it, we will talk a bit about how to pull it off.
Warning One: Why?!
This isn’t the kind of marketing that should be done “because you can” in my opinion. As someone who gets a lot of email I admit that getting a newsletter or any email with embedded images usually has me scrambling for the Unsubscribe link. In 2009 there are many effective ways of engaging your audience online without emailing. Before we begin ask yourself; “is an HTML email the most effective way to communicate to these people?”
Warning Two: Spam?
Once you have your message together, who will you send it to? Where are you getting your mailing list? Have these users opted-in on your site (like this), or have you simply collected the addresses independently?
Making the HTML Email
Assuming this is a valid way of communicating to your brilliant mailing list, you can start building your HTML page.
Consider the End User
The first thing I do is look at the mailing list. What domains do the emails belong to? You’ll have many mail clients; ISPs (like Sympatico, Cogeco, Bruce Telecom etc.), online services (like Gmail, Yahoo, Hotmail etc.) and custom URLs (personal domains, company emails). The reason to look at these is to figure out how your email will be rendered. ISPs and custom URLs are wild cards!
They might be downloaded into programs on the readers computer (like Outlook, Apple Mail, etc.) or maybe from some online webmail that you won’t have access to test, or maybe to some handheld device.
Online services like Gmail, Yahoo and Hotmail can easily be tested before launch; but often render things in a painfully different way.
Your message may be viewed on any platform on any device. Email standards are less predictable than web standards. If the medium is the message here, there could be trouble!
Consider the Message
Since the mail clients will render your messages differently you have to assume that someone isn’t going to be seeing the images. Maybe they’ll have the option to turn them on, but will they? Your message has to be able to stand on its own – as text with supporting links to a webpage.
Building the Message
The end platforms are too varied for me to make absolute statements, but the following guidelines should help you make the most of this. Here are some steps I follow.
- Go Old-school: Since CSS is out the window you’ll need to build your layout in Tables. This may increase the size of your HTML – which you don’t want to be too big, especially if you have dial up users. Downloading a huge email isn’t as optional as choosing whether or not you’ll visit a page. Also, avoid Flash and PNGs. Be completely 90′s in your thinking and you should be safer.
- Follow Accessibility Rules: This is a good rule to follow anytime; but having ALT and Title tags for images is critical when they’re not loading!
- Use Absolute Links: Since this HTML page will be literally pulled into a different space, using linked files and images with relative paths (eg. /images/dog.jpg) would be a bust. You have to use the full absolute path (http://domain.com/images/dog.jpg)
- Testing, Testing, Testing: If you don’t have accounts with all of the popular webmail services, sign up and send tests out. You want to see this in as many mail clients as possible. My experience is that you’ll never get this message to look 100% unless you can get the reader on to the HTML site! You will need to find compromise.
Sending the HTML Email
There are several ways to sending your message out. If you can afford the extra expense I hear great things about Campaign Monitor. While I haven’t used it, it boasts some powerful tools which would be especially helpful in tracking the success of your campaign.
If you’re doing this on the cheap, then you only need FTP and Internet Explorer.
First, upload the HTML message and all related images and linked scripts. Then, view the page in Internet Explorer (We are using IE as it has a very easy Emailing feature we’ll be using. To my knowledge this tool isn’t included in any other browser I have installed on my PC. If you know of any alternatives (especially if you’re on a Mac!) please let me know!).
I have made a demo mail out here.
From the IE menu: File > Send > Page as Email. This will open your page in your default Mail Client (I don’t think this will work with online services. In this example I’m using Windows Mail (formerly Outlook Express)).
Tip: I recommend doing your mass-mailouts with a mail client other than your primary account. You will get a lot of replies for unsubscribes, Out of Office replies and Mailer Demon failure warnings. Setup a generic account that speaks to the campaign like “email@example.com” etc.
Now, change the title, and the message is ready to send. This is hugely important: put your mailing list in the BCC (Blind Carbon Copy). Letting those emails been seen or harvested by anyone is insanely bad netiquette and it can lead to the brand getting a ton of bad press!
If you are potentially doing more mailouts in the future you should setup Mailing Lists in your mail client. Your ISP may limit how many people you can mail at one time. This is a Spam precaution. Remember to test!
The linked HTML Email works perfectly in Gmail, Yahoo, Apple Mail and Windows Mail. In Hotmail you have to verify that you want to see the images. These five were all that I tested for the purpose of this article.
As you can see in my image of Hotmail, if my HTML Email had more live type than images the message would have still been clear. All that is legible is my live text footer and link (not shown).
As I wrote about last week, I think it’s much more effective to personally reach out to your audience with a call to action that is a link to a webpage. You can’t put a value on the personal touch, plus it gets around all the ugly usability / viewing issues that users will invariably come across.