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?

If your registration form didn’t indicate there would be mailouts, or (and I have seen this happen) if the mailing list is from another site or campaign entirely, you are working against your privacy policy! This is essentially spamming, which no sane person will respond favourably to. You may be doing the brand or campaign a disservice in this case .

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.

  1. Go Easy on the CSS: Unlike browsers mail clients that are standalone programs don’t necessarily obey web standards that we take for granted in web browsers today. If the program listens to CSS it may only be in a rudimentary way. If you use CSS for colouring text I would also back it up with old-school <font> tags! Likewise I think it should be fairly obvious to avoid Javascript / dynamic server calls. You want to keep this mail as low-fi and simple as possible.
  2. 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.
  3. 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!
  4. 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)
  5. 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)).

Brandy McNamingtons

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 protected]” 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!

Mail Out

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).

Hotmail Rendering

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.

3 Responses to “Easy DIY HTML Emails”

  1. Denise says:

    Thank you for such a clear guide about html emails!

  2. ask.fm says:

    Genuinely when someone doesn’t know then its up to other users
    that they will assist, so here it happens.

  3. It’snot my first time to visit this web page, i am visiting this web page dailly and obtain fastidious data from here all the time.

Leave a Reply