Newsletters unfortunately are a necessary evil.  Developers hate them and marketers love them.  Here is a couple tips to help you through your next newsletter.

Newsletter Width

Probably the most common question regarding newsletter is what dimensions should they be.  The problem is each mail client is completely different.  Some are tall and skinny, others short and fat.  It’s kind of like the left over bin at a bargain basement sale, you don’t know what you’re going to get.  According to campaignmontior.com, they suggest not to go any wider than 550-600 pixels.

Tables for Structure

You’ve spent all this time using divs and CSS in your websites to layout everything.  Well with email you can forget all that. Back to the 1990’s we go.  Best practice for laying out columns or any other structural areas is to use the good ol’ table.  A lot mail clients don’t support the CSS that make using divs a viable solutions.

Inline Styles

It’s generally good practice to keep all your styles inline.  Some mail clients take pleasure in adding their own CSS to the equation which throws yours out the window. Inline styles insure the mail client uses your styles and not theirs.  If you do wish to put your styles at the top of your document, just be sure to do it within the body tag.  I know what your thinking…but that won’t validate?  You’re absolute right, but some mail clients totally discard the head tag, so anything in there will be thrown out like 2 month old milk.

Padding or Width, Not Both

In CSS it’s generally good practice to keep padding and width separate.  The same goes for emails.  Width and padding don’t get along. Think of them like the contenders in the next UFC fight night.  Since the mail clients are still stuck in prehistoric web days, padding can sometimes add to the width, even if the width is specified.  If you need to have both then you’ll have to put a table within a table.  The outside table cell specifying the width, and the inside one specifying the padding.

Backgrounds

Unfortunately Outlook 2007 screwed this up for everyone.  It doesn’t support background images.  So consider this when designing your next newsletter.  Also the body tag gets stripped of any styles, so if you put a background color on it, it won’t show up in some mail clients.  You’re best bet is to wrap you’re entire newsletter in a table, and apply the background color to the cell.  It’s also good practice to use the old bgcolor attribute in place of the CSS.  It ensures that all mail clients will display your background color.

JavaScript / Flash

Plain and simple, JavaScript and Flash aren’t supported, some cases they are, but most aren’t..  They’re like the embarrassing friend of yours that nobody wants to hang out with.  Sorry.

Images

Consider it good practice to always specify the width, height, and alt tags of all your images.  A lot of email clients have images shut off automatically.  With the width and height specified it will keep the structure of your layout, and the alt tag will give a description of the image. 

One extra little tip for images, sometimes you’ll notice an extra space underneath your images that you can’t get rid of.  This can be a couple of things.

1. You set your doctype of your document.  Get rid of the doctype, or set it to HTML 4 transitional to fix this problem.
2. An old HTML bug where the image should be right up against the closing </td> or else it throws in an extra space.

Conclusion

In general try and think like you’re back in the old days of internet.  For those younger people out there that haven’t developed in the olden days, now you see what we had to put up with, nothing works the way it should…wow I sound like my father.