Cascading Style Sheets and Email Display

Designing the HTML version of your email message can be difficult since there are so many different email client and operating system combinations out there – and they have their own way of rendering HTML. And there really is no way to be positively sure which client your readers will be using to view your messages.

If your reader has a Hotmail address, it’s generally safe to assume that he will be reading your message through the Hotmail web client. But what about your readers with private email addresses? Will they be using Microsoft Outlook? Will it be Outlook 2000, Outlook 2003 or Outlook 2007? Or maybe he’s using Lotus Notes? What if he had his TLD email forwarded to a Yahoo account? And is he 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’s important that you always design for the most accessibility.

Cascading Style Sheets (CSS) offers the ability to make your email messages extremely graphic and enticing. Unfortunately, there is still limited support of r CSS with many email clients and across 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 has no support for floating elements, which is widely used in CSS for positioning objects. So it’s based to use a table-based layout when designing your email campaigns. Think web design circa the year 2000. If you’re a new designer and have never dealt with tables before, you can get tons of how-to information from the W3C.

While Outlook 2007 does support the property, I don’t recommend that you use it to attach your style sheet. At least 50% of your readers will have their images turned off, which means any linked elements will not be linked – and this includes your external style sheet. Besides, Gmail, Live Mail and Hotmail don’t support linked elements, 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 should define your styles is another story altogether. Live Mail looks for the style sheet with the , Hotmail looks for the style sheet right below the tag. Outlook 2003, Outlook 2007, AOL, Yahoo, Entourage and Thunderbird will accept either placement, but Gmail doesn’t accept any of them.

The best option is to use in-line style tags. In-line style simply means that the style for each element must be defined individually. Instead of defining your style sheet within your head like this:

<link rel="STYLESHEET" type="text/css" href="http://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>

you would define each element individually, like this:

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

When you’re defining those elements, keep in mind that not all CSS properties are supported across the board on 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

. color

. font-size

. font-style

. font-variant

. font-weight

. letter-spacing

. line-height

. padding

. table-layout

. text-align

. text-decoration

. text-indent

. text-transform

Those properties are supported on both Macs and PCs in:

. AOL

. Entourage

. Gmail

. Live Mail

. Outlook 2003

. Outlook 2007

. Thunderbird

. Yahoo

Properties to avoid include:

. background-image

. background-position

. background-repeat

. border-collapse

. border-spacing

. bottom

. caption-side

. clear

. clip

. cursor

. direction

. display

. empty-cells

. float

. font-family

. height

. left

. list-style-image

. list-style-position

. list-style-type

. margin

. opacity

. overflow

. position

. right

. top

. vertical-align

. visibility

. white-space

. width

. word-spacing

. z-index

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

*** Want to keep these tips handy?

Source by Karen Scharf