How to design an unbreakable e-mail newsletter template

English: email envelope (Photo credit: Wikipedia)

Apropos of nothing, an old college friend pinged me on Facebook for advice on how to design a usable e-mail newsletter template, since she knew I oversaw a project like that for TechRepublic in the not too distant past. I actually get this question more often than you'd expect, but I never write down my general advice. Thus, I have copy-and-pasted what I told her below for, if not your benefit, than simply so I don't have to retype it up the next time someone asks:

So far as an e-mail template, you can do "pretty" to a point without breaking items left and right. The real problem most designers can't deal with is that you can't use images. For security reasons, many e-mail programs now block images (from new senders) by default, and most people never change the default settings on any application. Thus, most people never see images embedded in e-mail newsletters. (And don't even get me started on mobile/phone mail readers.) Using images in your template is a lot of effort for little gain, but I also know that designers simply won't do without them, so here are a few rules of thumb for (image-addicted) template designers:

• Most recipients will never see your design, as most people don't open all their e-mail. All they see is the subject line. Write the most compelling subject line you can; it's more important than any headline in the newsletter.
• Design your newsletter template as an HTML table, with little to no CSS. Gmail blocks most CSS, as do many other mail clients, especially if it calls an external stylesheet.
• Your template will preferably be single-column, but regardless of how many columns, the entire template should be a maximum of 450 pixels wide. Most mobile mail clients are only about that wide, and lots of versions of Outlook default-lock the preview pane around that width. You don't want users side-scrolling.
• The masthead (which in a newspaper would say 'The New York Times') should be no more than 20 pixels tall, and should be text-based if at all possible. Again, lots of mail clients preview the beginning of a message, and if all the reader sees is a big broken image or a big nameplate that doesn't say anything about what is in the newsletter, that's a problem. Keep the header small so that actual content makes it into the preview pane in the mail client.
• Don't use fancy fonts. Stick to Arial, Verdana and Courier. Several mobile clients block the font tag, so your layout will appear in these default fonts anyway.
• Images should be kept to a minimum, but if they are to be used, they MUST be used this way:

1. Specify image dimensions of the image in the HTML code. If it's a 45x60 picture, be sure the <img>  tag includes the height="60" and width="45" elements. If you do this, when the image is blocked, it will still take up the same space, and not screw up your formatting. If you don't, the blocked image may become that tiny broken image icon, which screws up your layout.
2. Specify alt-text for all images, so when they're blocked people know what the picture is supposed to be. Also, if you make the image a link, users can click on the alt-text and still get to the hyperlink.
3. Right-align all images. People read left-to-right, and since most images are blocked, you don't want the first thing the eye sees to be a broken image. Images aligned right will appear at the end of lines, and not break up natural reading flow.

Hope that helps, and don't say I never gave you nothing.