Writing HTML newsletters is a critical piece of marketing for many companies, but it can be a very difficult task. You need to know HTML and CSS just like building a web page. But you also need to know the drawbacks of writing HTML newsletters, and there are several.
HTML Newsletters Have More Compatibility Issues than HTML Web Pages Do
Nearly any designer who has been building web pages for more than a short time has come up against the browser problem. The problem where while your page looks great in your browser, it looks horrible in someone else's. Building a website that looks great in IE 6 (or, heaven forbid, IE 5!) while also having all the features of IE 8 and Firefox 3 or 4 is a big challenge. But there are many more email clients in widespread use than there are web browsers.
Some email clients have a lot of CSS support, while others are only just getting on the CSS bandwagon. And then, in a move that stunned many designers, Microsoft decided to downgrade Outloook 2007 to use an HTML rendering engine that has very poor CSS support. If your newsletter customers use Outlook 2007, you have my pity.
Your HTML for Newsletters will be Different than Your HTML for Web Pages
You may be very comfortable doing pure CSS layouts on your web pages, but you can't work that way in HTML newsletters. Plus, you have to remember that some people force all email messages to only display text and even when they allow HTML, and the widths of email clients varies widely. And while you should always use external CSS to keep your web pages fast, many email clients don't support them, so you're stuck with inline CSS.
In a lot of ways, writing HTML newsletters requires you to violate many of the rules we've learned for writing fast, high-quality web pages. Such as:
- Lay out your newsletters with tables
Most modern email clients understand how to render tables, and they don't understand DIVs and CSS positioning. Don't use tables for layout on web pages. - Use inline CSS styles
While some email clients support internal styles, the majority don't, or don't support them well. So it's better to stick with the style attribute in all your tags. Use one external css file to speed up page downloads. - Use images for headlines
The best way to get an HTML newsletter to look the way you want is to use images. A common method is to create the newsletter as an image, and then cut it up into pieces to link to different pages, and then put all the pieces together like a jigsaw puzzle using HTML tables. Be sure to test this carefully, as some clients (like Hotmail) add extra spaces in the tables that can ruin the effect. CSS image replacement should be kept on your web pages only. - Don't use CSS shorthand
If you want to set the font size, weight, and line height you need to use font-size, font-weight, and line-height as separate style properties. CSS shorthand decreases your CSS file size. - Don't use JavaScript
Most email clients disable embedded JavaScript for security purposes anyway. Use Ajax and JavaScript on your websites and leave the email less dynamic.
Tips for Designing HTML Newsletters
Besides all the above suggestions, there are some things that you should do to design your HTML newsletters so that they are more effective.
- Enclose the whole newsletter in a table
Even if you plan on using tables to lay out your newsletter, put all the sub-tables inside a table. This tells email clients that the whole thing is connected, and so will be less likely to add artificial page breaks in the middle of your newsletter. - Use percentages for widths
Because email clients can vary widely in width, using percentages is the safest way to ensure that it looks right in most situations. But be sure to test, as some wider newsletters will only work with fixed widths. - Include a gutter around the entire newsletter
By setting the width of the container table to a percentage less than 100% (such as 98%) will help clients display the newsletter without over-writing the edges. - Don't use any fancy table tags or attributes
Specifically, don't use thead, tfoot, cols, or colspan or rowspan. You are best sticking with the rudimentary table tags tr, td, and table and the attributes width, border, and style. - Set the width implicitly for every column (td)
Some email clients (Lotus Notes, for example) don't push the width of table columns open automatically to the widest content like web browsers do and this can result in strange looking columns. - Store images on the web and don't delete them
You will need to use full-path URLs for your images so that they will render in the client. And remember that customers will open email messages months after you've sent them, so if you delete the images, the newsletter will be broken.
Keep HTML Newsletters as Simple as Possible
While it is tempting to create HTML newsletters that are as fancy as your web page designs, but the rendering issues can make your newsletter unreadable. The simpler you create your newsletters, the more people will be able to read them and use them.
