Cascading Style Sheets and Email Display

Designing the HTML version of your email can be difficult, as there are many different combinations of email clients and operating systems, and they all 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’s generally safe to assume that they’ll 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 forwarded your TLD email to a Yahoo account? And are you using a Mac or a PC?

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

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

Unfortunately, Outlook 2007 does not support floats, which are widely used in CSS to position objects. Therefore, it is based on using a table-based design when designing your email campaigns. Think of web design around the year 2000. If you’re a new designer and have never worked with tables before, you can get tons of useful information from the W3C.

Although Outlook 2007 supports 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 that linked elements will not be linked, and this includes your external style sheet. 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 should define your styles is another story. Live Mail looks for the style sheet with the , Hotmail looks for the style sheet just below the tag. Outlook 2003, Outlook 2007, AOL, Yahoo, Entourage, and Thunderbird will accept any of the locations, but Gmail does not accept any of them.

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 style sheet 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>

you would define each element individually, like so:

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

When you’re defining those elements, keep in mind that not all CSS properties are supported in all email clients. If you want to present a consistent message to all your readers no matter how they’re reading your mail, stick to these CSS properties:

. background color

. edge

. color

. font size

. font style

. font variant

. font weight

. letter spacing

. line height

. stuffed

. table layout

. aligned text

. text decoration

. text script

. text transformation

Those properties are compatible with both Mac and PC in:

. AOL

. Surroundings

. gmail

. live mail

. perspective 2003

. perspective 2007

. thunder bird

. yahoo

Properties to avoid include:

. background image

. background position

. background repeat

. edge-collapse

. edge spacing

. below

. title side

. clear

. shorten

. cursor

. address

. show

. empty cells

. float

. font family

. height

. left

. list style image

. list style position

. list-style-type

. margin

. opacity

. overflow

. position

. good

. above

. vertical alignment

. visibility

. blank space

. broad

. space between words

. 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 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. 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.

*** Do you want to have these tips at hand?