Designing the HTML version of your email message can be difficult, as there are many different combinations of email clients and operating systems, each with its own way of rendering HTML. And there’s really no way to be sure which client your readers will use to view your messages.
If your reader has a Hotmail address, it’s generally safe to assume that they’ll be reading 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, when designing your email campaigns it’s important 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 since studies show that up to 75% of email readers use Outlook, you just can’t ignore its rendering flaws.
Unfortunately, Outlook 2007 doesn’t support floats, which are used extensively in CSS to position objects. Therefore, it is based on using a table-based layout 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 disabled, meaning 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 each element’s style must be defined individually. Instead of defining your style sheet inside your head like this:
or even something like this:
you would define each element individually, like so:
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
. filling
. table layout
. aligned text
. text decoration
. text script
. text transformation
Those properties are supported on both Mac and PC in:
. AOL
. Surroundings
. gmail
. live mail
. outlook 2003
. outlook 2007
. thunder bird
. yahoo
Properties to avoid include:
. background image
. background position
. background repeat
. edge-collapse
. edge spacing
. down
. title side
. Sure
. shorten
. cursor
. address
. display
. empty cells
. float
. font family
. height
. left
. list style image
. list style position
. list-style-type
. margin
. opacity
. overflow
. position
. Correct
. upper part
. vertical alignment
. visibility
. blank space
. width
. space between words
. z-index
And now, 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 handheld 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 its text version within the html version of your message.
*** Do you want to have these tips at hand?