Designing the HTML version of your email can be difficult, as there are many different combinations of email client and operating system, and they have their own way of rendering HTML. And there’s really no way to be sure which client your readers will use to view your posts.

If your reader has a Hotmail address, it is generally safe to assume that they will read your message through the Hotmail web client. But what about your readers with private email addresses? Will they use Microsoft Outlook? Will it be Outlook 2000, Outlook 2003 or Outlook 2007? Or maybe you are using Lotus Notes? What if you had forwarded your TLD email to a Yahoo account? Are you using a Mac or a PC?

Since you don’t really know the answers to any of these questions, when designing your email campaigns it is important that you always design for maximum accessibility.

Cascading Style Sheets (CSS) offer the ability to make your email messages extremely graphic and attractive. Unfortunately, there is still limited r CSS support with many email clients and on various platforms. One of the biggest CSS offenders is Outlook 2007; And since studies show that up to 75% of email readers use Outlook, you just can’t ignore its rendering flaws.

Unfortunately, Outlook 2007 does not have support for floating elements, which is widely used in CSS to place objects. Therefore, it relies on using a table-based layout when designing its email campaigns. Think about web design circa 2000. If you’re a new designer and you’ve never worked with tables before, you can get tons of practical information from the W3C.

While Outlook 2007 supports the property, I don’t recommend that you use it to attach your stylesheet. At least 50% of your readers will have their images disabled, which means that linked items will not be linked, and this includes your external stylesheet. Also, Gmail, Live Mail, and Hotmail don’t support linked items, so it’s a good idea not to use them anyway. Instead, define all of your styles within your message and never rely on an external style sheet for your email messages.

Where, within the message, you must define your styles is another story altogether. Live Mail searches for the stylesheet with, Hotmail searches for the stylesheet just below the label. Outlook 2003, Outlook 2007, AOL, Yahoo, Entourage, and Thunderbird will accept either location, but Gmail does not accept either location.

The best option is to use inline style tags. Inline styling simply means that the style of each element must be defined individually. Instead of defining your stylesheet inside your head like this:

<link rel="STYLESHEET" type="text/css" href="https://www.mysite.com/style.css">

or even something like this:

</p> <style type="text/css" media="screen"> <p><!-- p {"urn:schemas-microsoft-com:office:smarttags" />georgia, serif; font-size: x-small;} hr {color: #ff9900; height: 1px } a:hover {color: #ff0000; text-decoration: none} --></p> </style> <p>

I would define each element individually, like this:

</p> <p x-small color:> <p>This is your paragraph text.</p> <p>

When you define these elements, keep in mind that not all CSS properties are cross-compliant for all email clients. If you want to present a consistent message to all of your readers no matter how they are reading your mail, limit yourself to these CSS properties:

. background color

. border

. colour

. font size

. Font style

. font variant

. font weight

. letter spacing

. line height

. filling

. table design

. aligned text

. text decoration

. text script

. text transformation

Those properties are compatible with Mac and PC on:

. AOL

. Entourage

. Gmail

. Live Mail

. Outlook 2003

. Outlook 2007

. Thunderbird

. Yahoo!

Properties to avoid include:

. background image

. bottom position

. background repeat

. border collapse

. edge spacing

. bottom

. legend side

. Sure

. shorten

. cursor

. address

. monitor

. empty cells

. float

. Font family

. height

. left

. list-style-image

. position-style-list

. list style type

. margin

. opacity

. Overflow

. position

. Right

. top

. vertical alignment

. visibility

. blank space

. width

. word spacing

. z-index

And now for more bad news: Lotus Notes and Eudora have terrible CSS support and even many of the widely accepted CSS properties may not display correctly. And with more and more readers accessing email on PDAs and other portable devices, you can never be 100% sure how or where your message will be read. Therefore, I suggest that you always use Multipart-Mime messaging and always include a link to your text version within the html version of your message.

*** Do you want to have these tips handy?