The 10 Basics of HTML Email Newsletters

They’re becoming ever more popular as a form of cheap, affordable and effective marketing but HTML emails can still be a pain in the arse mainly due to the dated rendering by most email clients. They’re something I’ve found myself doing ever more frequently recently (even getting an inclusion on the Beautiful Email Newsletters Gallery) so here’s my 10 basic tips for putting together your own HTML email newsletters.

1. Forget how to code HTML properly

Remember when you were told that tables were evil and not to be used for layout? When you finally took that on board and starting floating things around the page and banished your tables for good? Well that’s about to change, welcome back your friendly layout based on, yes, tables!

To be honest it’s not too difficult and I’m sure for most it’s tucked away in the back of your mind just cringe as you write it and remember background images are out.

2. Indent your code

All those nested tables can get quite hard to track so it’s pretty useful to make sure your HTML code is indented and neatly organised otherwise you can soon get lost in there.

3. Style inline

For most email clients this isn’t a problem anymore but you still get the odd few that won’t read external style sheets so stick a copy in the body of your HTML just to be safe.

4. Alt tag your images

HTML emails rely heavily on images to constitute a large amount of the content and nowadays most email clients don’t download images automatically. So as well as slicing your images up sensibly make sure you have alt tags that include any text that appears on the image.

5. Don’t stress about the details

There are that many email clients that it is very difficult to make sure that your email will appear 100% correctly in each one. The only real way to do so would be to just include one image for the entire email and you’re risking falling foul of a lot of spam filters by doing that.

So don’t stress if you’re emails aren’t pixel perfect in Lotus Notes or there’s a little extra padding when Hotmail users view it. As a general rule I’d suggest making sure your email can be read in Outlook and Hotmail and then keep an eye on your stats to see what client most of your readers are using and fix for that in future mailings.

The only place to make sure your email is pixel perfect is your web version (a hosted version of the email that people can view). At the end of the day there aren’t any excuses for that one not looking right!

6. Get a good mass mail client

Don’t send to 100’s of emails using the copy to field in Outlook! I’ve seen it done and apart from being unprofessional it lacks any form of feedback facility. Being able to view stats on bounce rates, opens and click throughs is invaluable to your email marketing strategy.

There is a great variety of email marketing software out there and if I detailed them all I’d need a whole other post! What to pick will depend on your available budget and the amount of emails you’ll expect to send. Personally I use Campaign monitor alot but there are plenty of others, a few I’ve used or looked at in detail are Mail Chimp, Interspire, Vertical Response and DotMailer, but that isn’t even scratching the surface of what’s available out there!

7. Test

Test the email, not just for appearance but for tell tale signs of spam. Most spam filter providers will have available rules for how they filter out emails such as Spam Assasin’s tips. Also make sure you’re adhereing to the rules regarding who you can send to and keep within the bounds of the law, a good starting point is CAN-SPAM.

This will also be helped by following tip number 6 as a good mailer will have inbuilt apperance and spam tests.

8. Make sure your links are in

Make sure you have unsubscribe links in for a start, a lot of spam filters will check for them and some readers may well mark your email as spam if they aren’t there.

Also include a “view web version” link, and make sure it’s at the top of the email before any content. If your email doesn’t look right users aren’t going to scroll through looking for the link, quite often they’ll only use the a preview pane, so put it where they can see it right away.

Apart from that a forward to a friend link and plenty of calls to action linking to relevant parts of your website are a must.

9. Text version

Again for most spam filters this is essential but also for mobile readers and some other email clients. Make sure all of your text is included in the text version, importing it from your HTML can easily miss out any text included on an image.

10. Read it again!

Send it to yourself and read it, and get someone else too, there’s nothing more embarrassing than rushing an email only to realise it’s full of typos, or repetitive phrasing or something similar. I’ve recieved an “Octomner” newsletter before today!

So there you go, your basics for HTML emails, I’ll be putting together a more thorough guide to designing and coding an email and the differences from normal website coding so anything you’d like to be included leave a comment below.

Tags: design, development, HTML email

Previous post - 5 key metrics you should know from Google Analytics
Next Post - TradingEye show search query string in URL

This entry was posted on Sunday, October 25th, 2009 at 21:24 and is filed under General Stuff, Quick Tips, Web Design, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.