I’ve been working both in-house and with advertising agencies/companies to produce e-mail newsletters for a while now. Sometimes I’ll be working from an existing template or graphic standards, or a layout file, and simply write the code for the e-news. Other times, I’ll be designing as well as coding. Either way, there’s a lot of little technical things to keep in mind when producing an e-newsletter. In this article I’ll try to outline what I’ve learned, and I hope it will help you if you have to produce your own! (If you’re gonna send junk mail to your customers, at least do it right.)

The Content

Speaking as an email user and someone who actually opts into e-newsletters sometimes, there’s a lot of things that customers like and will read. The goal of your e-newsletter should be to have the customer read the thing rather than hit delete immediately. Maybe they’ll even forward the email to a friend!

If your company/business offers educational/professional services: include articles. Put the first paragraph or two in, and a link to read more on your website. You’ll do this for two reasons: drive people to your website, and to keep the reader from ignoring the large block of text since (it’s been proven by the tl;dr acronym) people hate reading long chunks of text. I subscribe to a few newsletters for the articles alone. Don’t just recycle the same “hey, use our services!” text… add something of educational value to your content.

If your company sells products, especially online: coupons, coupons, coupons. I love Sephora’s makeup newsletter for this: once they offered $50 off online purchases. It’s hard to say no to that!

If appropriate, use a fun and amusing writing style. I subscribe to Groupon. Not because I think I need a 50% off coupon for a dog day spa in Yaletown, but because I end up laughing hysterically at the writing. Seriously, there’s no better way to start the day off than by sipping coffee, reading the sentence: “Like a Barry Manilow concert, expertly executed Thai cuisine is full of spice, rich with enticing aromas, and desired by middle-aged women everywhere.” and then spitting out said coffee all over the screen.

The Design

Design your e-newsletter to use a white background, and contain it in a 600 pixel wide frame. Why? This is the optimal size that preview panes in some email software prefer. Why the white background? Some email software doesn’t like having a background colour in the preview pane, and will default to white anyway.

Just like designing a website, text is better than images. While your Photoshop (or inDesign/Illustrator if you really must) file will have pretty fonts for headers and so on, said pretty fonts are going to end up as images, not text. Put the important inside content in a font like Arial, Verdana, Trebuchet MS or Georgia if you want it to be immediately readable. (Most email software suppresses image loading, and the reader only sees the text until they decide to “show images”)

Legal requirements: In Canada at least, you must put a link to opt out of receiving the e-newsletter at the bottom. You also must put your company name and address.

Readability requirements: You should put a link on the top of your e-newsletter to a version stored on your website, in case the HTML gets garbled and the reader wants to read it still. You’ll have to host your images there anyway (see below) so you might as well have a backup version on your website. Something to think about: People like printing stuff, especially emails, as I know from working in an office for years (the paperless office is a myth, we all secretly hate trees.) Consider a printable .pdf version of your e-news, and a link to it from your email, especially if you’ve got articles in there!

The Code

DO NOT USE CSS CLASSES OR DIVS. There, I just went against everything you’ve ever been told as a web developer. This is the one time in your life when you will be using tables and the <font> tag.

Do you remember what it was like to be 15 years old, and building a website on Tripod or Geocities by hand-coding HTML using Notepad? (Well, I do, and it certainly explains why I had no friends in high school.) You’re going to have to go back to that. Or try to imagine it, anyway.

You need to know how to write simple HTML from scratch to code an e-newsletter, unless you have software specifically for producing these things. Don’t even think about opening Dreamweaver and using the WYSIWYG mode, it’s going to stick css everywhere. Instead, use a plain text editor (like Notepad, or TextEdit) or one of the many open-source/shareware text/code editors available out there for writing web code by hand.

Why? A lot of email software, including Outlook, will not read anything you put inside the <head> tag, and it often won’t read css styles at all. And just forget about javascript, that’s not going to happen at all. HTML emails are still handled primitively by a lot of software, and due to security concerns, it’s probably going to stay that way for a while.

1. Your <head> shouldn’t contain anything you can’t live without. HTML emails only read what’s inside the <body> tag.

2. Create your layout using tables, with a containing table that is 600 px wide. Declare height and width for every table cell.

3. If you’ve got images, make sure the width and height are declared in the <img> tag. If they don’t load up at first, your layout won’t be borked. If the image has text, make absolutely sure you’ve got the alt delcared in the <img> tag. Why? When the HTML email first loads up, chances are, the images won’t be there (especially in Gmail.) There’s no point in coming up with a witty headline and using it in an attractive image, if no one will ever read said witty headline.

4. Store your images on your own website and do a direct link to them. If your image tag reads <img src=”images/legoisawesome.gif”> …no email software is going to know where that is. It should be <img src=”http://www.everythingsawesomesaysemdash.com/images/legoisawesome.gif”>

5. If you gotta css, put your styles in the tags themselves. <p style=”font-size: 12px”> will work. <p class=”fishsticks”> will not. CSS class styles go in the <head> tag and simply won’t load.

Test it.

Here’s a trick I used to preview stuff before it goes out, since I use gmail (which doesn’t allow you to send HTML emails.) This is on a Mac using the default Mail software that comes with OsX.

Load your online version of the e-newsletter up in Safari (it’s gotta be on your server first, not your hard drive.) Your code should be identical or nearly identical to the HTML email you plan to send.

File > Mail Contents of This Page

Send the email generated by Mail to every account you own and test it in every software you can imagine or get your hands on. (I detest Windows, so I had my patient manfriend test it for me there.)

The Online Version

You’re going to put a copy of your e-newsletter on your website for people to read, right? Right??

Here’s a great tip. A lot of people (myself included) obsessively check their email on their iPhones/mobile phones/PDAs. When they click to view the online version in a mobile phone web browser, it might show a little tiny unreadable e-newsletter floating in the middle of the page.

There’s two lines of HTML you can put in the <head> to display your site at a mobile-phone-friendly size. Are you ready for it?

<meta name=”apple-mobile-web-app-capable” content=”yes” />
<meta content=”minimum-scale=0.5, width=device-width, maximum-scale=0.6667, user-scalable=yes” name=”viewport” />

What does this do? If the person opens the “Can’t see this email? Click here to read online” link on their iPhone or Blackberry, the HTML knows (spooky) and resizes the page in the browser to 300 px wide (0.5 of the 600 px width) which just happens to be pretty decently sized on a mobile phone with a large screen.

Now, this is useless in the HTML email itself, because anything in the <head> isn’t read, but it’s nice for those of us who are permanently attached to our iPhones and want to read the full newsletter.

There. I hope that’s proved useful to some of you…