Email CSS cheatsheet

I was using a cheatsheet I made to add some subtle styling to emails – mostly, email signatures. Since it’s a bit outdated, I took the Campaign Monitor CSS Guide and I made a list of CSS styles you can use today. The last update was on 22 april 2010.

The basic rules are:

Have all the styles inline.
Have a graceful text-only fallback: think always how the text will appear without any CSS or markup.

Safe CSS properties

Full support by: Outlook 2003-2010, Windows Mail, Apple Mail, Entourage 2004-2008, Thunderbird 2, Yahoo! Mail, Yahoo Classic, Google Mail, MobileMe, iPhone, Android, Palm.
Note: items market with * are supported by almost all clients with the specified exception (boundary “safe”).

background-color
border
color
clear — *Outlook 2007/2010
display — *Outlook 2007/2010
float — *Outlook 2007/2010, Android
font
font-family
font-style
font-variant
font-size
font-weight
letter-spacing
line-height
margin — *Hotmail
padding
table-layout
text-align
text-decoration
text-indent
text-transform
width — *Outlook 2007/2010
word-spacing — *Outlook 2007/2010

Enhance-only CSS properties

Styles unsupported by many clients but that could allow a look enhancement when used on the enabled clients without modifying the layout.

background-image
border-radius, -webkit-border-radius, -moz-border-radius (add all of them)
opacity
text-shadow

How to make CSS email signatures in Apple Mail

Each client might or might not allow you to add email signatures styled with HTML and CSS. On Apple Mail you can, but you need to follow a few steps.

Create your signature in a single HTML file without body and head.
Open the HTML in Safari and save it as a Web Archive (File -> Save as… -> Format: Web Archive).
In Apple Mail: Mail -> Preferences -> Signatures and create a new one clicking on “+”.
Close Apple Mail.
Open the folder: ~/Library/Mail/Signatures (it’s under your account).
Locate the .webarchive file you just created (it’s probably the one with the latest modification date).
Replace the .webarchive file with your .webarchive exported signature.
Open Apple Mail and test the signature.

The road to a good signature

There’s a strong opinion that emails should be “text only”. I disagree, but still I think that when you add some styling to your emails you should think very well before doing it and also you should consider what happens when it’s going to be displayed as text-only. To check this you can just send an email to yourself in Apple Mail and then open it using View -> Message -> RAW Source.
Consider also that I’m not talking about newsletters: for those you should use a tool like MailChimp.

Designing a good email signature is even harder, because it shouldn’t be intrusive but it should still convey in some ways the personality of the author or the company.
While it seems obvious, the important part of the email is the body, not the signature. Yet, you often see email with signatures going from 2x to 10x the length of the email content (and no, the legal disclaimer isn’t enforceable, drop it!).

Also, different signatures needs to convey different contents:

A business signature requires name, surname, company name, a link to the company website, maybe the role and the phone number. A great idea would be a link to the author’s profile on the company website, where you could add all the details that you need to without creating huge signatures (and it’s also more flexible).
A personal signature probably doesn’t have any requirement, but it’s nice if it contains at least the name and maybe some kind of characterisation of the person.

Some tips:

Keep the font size on par with the body, or smaller. Think three times before increasing the font size: it could become ugly really fast.
Images shouldn’t be embedded, use CSS but remember that not every client will see them.
The ideal number of lines should be around 2, with a good balance for business signatures around 5. More than that should be always avoided.
The signature should be noticeable, so I can find it immediately when I need it, and I can ignore it when I’m just reading the text, but not too much, since it’s not the important part of the email.
You can use characters in the signature to improve it without adding images, but remember that non-ASCII ones could be visualised in strange ways, so check them before use.

Examples

I’m sure there are a lot of ways to create stunning signatures within those CSS limits. This is a small and simple showcase of what you can do to express your unique identity.