E-Mail:

Creating Perfect HTML Newsletters

Wednesday, August 6th, 2008
by Dina Giolitto

If you’re going to bother setting up a business Web site, then you’ve got to capture email addresses and send out a newsletter. This is because lots of folks are in a hurry on the web. You know how YOU surf, right? Well, your visitors are doing the same mindless butterfly-flit from one site to the next. Make sure you get them to come back for a return visit each month - with a high quality newsletter that makes it to their inbox in one piece. Some tips to keep in mind when doing email newsletters yourself:

1. What You See Is Not Always What You Get.

Do your coding in a plain text editor like Notepad, if possible. Too many WYSIWYG editors insert excess “bloat code” that, at best, will get stripped by the receiving email client, and at worst, will completely befuddle said email client, resulting in a mess of unreadable garbage. If you don’t have the chops to code your HTML in a text editor, at least run your WYSIWYG code through something like HTMLTidy  http://cgi.w3.org/cgi-bin/tidy), which will strip out unnecessary code, fix missing tags and so on.

2. A MIME Is A Terrible Thing To Waste.

Always use Multipart/Alternative MIME when sending HTML newsletters. What this means is that a plain-test version of your email is sent out with the HTML version, in case the recipient doesn’t accept HTML emails or their email client doesn’t handle them well. In many cases, spam filters also look for an embedded plain-text option and assume your emails are spam if they don’t include it.

You don’t need to worry about the tech involved in this, however. Your email handling service should have some sort of automatic MIME system that either pulls a plain-text version from the HTML or that has a place where you can paste a copy of the plain text version to be automatically embedded in the email when it’s sent.

(A word of caution: If you’re sending your newsletter through Outlook or some other on board email client, stop it right now. It looks unprofessional, it’s almost impossible to do right and it’s a huge spam flag that will get you blacklisted faster than mooning the CAN-SPAM committee during their lunch break.)

3. Get the Picture.

All images in your newsletter must be uploaded to a public server. This normally involves simply creating a folder on your public web host’s server and putting all your images there (use subfolders to organize by date, etc, if necessary). Always test your images from a friend’s or a public computer if you’re not sure if your image server is 100% publicly accessible.

Also be sure to link to your images using absolute urls instead of relative urls. An absolute url will contain the entire web address, like so: http://www.yoursite.com/images/peach.jpg. A relative url would look like this: /peaches.jpg - and works on your Web site, but doesn’t translate to email.

4. Keep Your Code In Line.

Create your newsletter using only inline HTML or CSS codes. If you try to create a universal style by putting CSS in the header, it will just end up getting stripped out by web clients like Gmail and Hotmail so that your commands don’t override their commands. Also, CSS positioning like divs won’t work either. Use tables, shim.gifs and other old-school positioning tricks, instead.

5. Don’t Go Out Of Bounds.

Unlike regular web pages, HTML emails need to fit into a preview pane, not the width of the user’s monitor. Stick with either fluid-width tables or keep the width at 500 pixels or less.

Finally: Test, test, test. Sign up for as many different free email accounts as you can, and install as many alternate email clients and as many versions of those clients as possible (enlist friends for versions you don’t want to or can’t install on your own computer).

Or, just sign up for a service like MailChimp Inbox Inspector  http://www.mailchimp.com/add-ons/inboxin…), which will preview your HTML email in everything from AOL to LotusNotes, and let you know what isn’t working. Plus it runs your email through a spam filter check and other analysis to make sure that your email is lean, clean and mean before it goes out.

Finally, always send yourself a test copy. Make sure every link works, every image loads and every table renders properly in every email client and version. After all, nothing says “amateur” like a code-riddled, spam-blocked email full of misaligned columns, unloadable images and unclickable links.

Copyright 2008 Dina Giolitto, Wordfeeder.com Copywriting and Marketing. All rights reserved.

Liked this article? Have more of the same emailed to your inbox each month. Sign up for the Copywriting and Marketing Ezine from Wordfeeder.com today.

Tags
Categories

4 Comments

Chris Hansen

August 7th, 2008
at 1:59am

Also, view your HTML email in a client that accepts HTML email but with the images turned off.

Last, but not least, view your HTML email on a PDA with a small screen (less than or equal to 240 pixels wide) as more and more people monitor their email on a phone/PDA.

John

August 11th, 2008
at 7:23pm

Check out the Emogrifier, a PHP utility we wrote to merge HTML & CSS into gmail friendly emails. You can download the source code free, or use our web-based version to build your emails. Using the Emogrifier, you can develop your HTML & CSS seperately and merge them at the end. It makes development go much faster.

http://www.emogrifier.com/

Deebug

August 12th, 2008
at 5:23am

If a large part of your target could be using Microsoft Office Outlook 2007 to receive e-mails, you should consider coding HTML 3.2. Make sure to test your e-mail in other clients too.

mark b

October 16th, 2008
at 9:18am

One important thing with images is to explicitly declare height and width, so when images aren’t displayed, the default behaviour in most clients, your layout isn’t further broken.

On that note, also include meaningful alt tags on all images.

Also, spacer images aren’t required and can actually ding your spam score. Empty cells with declared heights/widths hold layout just fine in everything but Lotus, but those are garbage anyways. You can also sent a larger width/height and use align/valign to achieve layout.

Not a bad guide starting point for coding emails, but you missed out on a lot of important details. And that’s where emails will kick your ass and give you fits.

What Do You Think?

 
60 queries / 1.205 seconds.