Creating E-mail Newsletters

January 6th, 2009

Limit your tools

HTML newsletters can be very easy to build. To do this you’ll need to reduce your daily web toolset to a select few.

You’ll have tables, images, spans, paragraphs, div’s, links, hr’s, and br’s at your disposal.

All CSS will have to be inline and limited to the following attributes: height, width, line-height, font (and variants like font-size/font-family), color, text-align, border (and its variants), and list-style (and its variants) if needed.

Do not use CSS padding, margin or the table attribute cellpadding. These 3 attributes will drastically reduce the level of compatibility with webmail clients.

Prep for the newsletter

The first step of creating the e-mail newsletter is to place all of your required images in a publicly accessible location online. Keep in mind, some e-mail clients disable images by default so use them only when absolutely necessary.

The second and reoccurring step, set the padding and margin to “0” on each element that has default values to these attributes. 


<body style="padding: 0; margin: 0">
These are the following elements that have default padding and margin values: body, headers (h1-h6), paragraphs, and lists (ul and ol). Make sure to set each of these attributes to “0” if/when you use them in your e-mail newsletter.

Begin development of the e-mail newsletter

Your e-mail newsletter will be built with tables. There will most likely be nested tables as well. For every table you create set cellpadding, cellspacing, and border attributes to “0.” You will also have to redefine the font styling for each table. This is necessary because tables do not inherit the font properties of their parent containers.



<table cellpadding="0" cellspacing="0" border="0" style="font: 12px Helvetica, Arial, sans-serif">

If your e-mail newsletter is multi-columned, create a containing table with an equal number of cells as the newsletter design has columns. This example depicts a two column newsletter.

1
2
3
4
5
6

<table cellpadding="0" cellspacing="0" border="0" width="600">
  <tr>
    <td width="400"> <!-- main content block --> </td>
    <td width="200"> <!-- right column block --></td>
  </tr>
</table>

Need Padding?

That we can’t use padding in CSS or cellpadding in HTML, we’ll have to fake it. I’ve found the best way to create left and right padding is with additional table cells. Create the table cell, set the width of the cell to the amount of padding required, add a nonbreaking space (&nbsp;) to the cell. The nonbreaking space will ensure that the table cell displays.

To produce top and bottom padding I’ve found it cleanest to use a line break (br) and define the line-height.



<br style="line-height: 10px" />

Table rows can yield the same result, but this is just cleaner.

No background-color…

The CSS attribute background and its variants aren’t completely supported in e-mail clients. Instead, use the bgcolor table and table cell attribute. This will yield the same results as CSS’s background-color.

Don’t forget!

It’s best practice to start your e-mail newsletter with a “view online version” link. An “unsubscribe” link is required. This can be presented as a link or instructions.

As stated previously, some e-mail clients disable images by default. Most of these e-mail clients will display images automatically if the sender is in the recipients address book. Add a sentance reminding the reader to add the sending e-mail address to their address book.

Thats it

Those are the rules I follow to create e-mail newsletters that are supported almost everywhere. Here is an example to show all of the development concepts applied in a single newsletter. Check it out!

The e-mail newsletters I create a properly supported on the following platforms:
  • AOL Web
  • Comcast
  • Earthlink
  • Gmail
  • Mail.com
  • MSN Hotmail
  • Windows Live Hotmail
  • Yahoo! Mail
  • AOL 9
  • Outlook 2003
  • Outlook 2007
  • Outlook Express 6
  • Outlook XP
  • Thunderbird
  • Apple Mail

Hope it helped!

Posted by dane Filed in XHTML/CSS

Leave a Reply