Saturday, 15 October 2011

Creating CSS Formatted HTML Email Signatures

As part of a client's Brand Development Startup Package, I create HTML email signatures. It's a tricky little job; way trickier than you would ever guess by just looking at the signature in your mail application. Designing an HTML email signature that displays the same on all of the key email applications is challenging, because they each have their own way of handling (or stripping out) CSS coding. Some even handle it differently depending on the version (especially Outlook Express).

A client recently asked what I mean by HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) - "don't you just type it". I figure it is easier to explain with screenshots:

Screen Shot 1: My email signature as seen in Mac Mail
Screen Shot 2: My email signature in CSS formatted HTML
Made just a little more complicated than website html, by the fact that you have to double up with CSS, in the head section and inline, whilst realising that certain features of CSS are completely ignored by some Mail applications (eg. floats, margins).

For my fellow designers, you may find this blog "A Guide To CSS Support In Email" by Campaign Monitor, a very helpful insight into how the different mail applications handle CSS in email signatures.

Also, according to MarketingSherpa Email Marketing Benchmark Report, only 33% of email applications have the default preferences set to show images in emails. That means 67% of recipients still don't automatically see images in the emails that they receive....

Outlook Express: How To Unblock Images
  • Open Outlook Express 
  • From the Tools menu, select Options. 
  • Click the Security tab. 
  • Uncheck the "Block images and other external content in HTML e-mail." checkbox. 
  • Press the OK button.
(Note: Microsoft states that blocking images is a security measure to prevent spammers from using web beacons from validating your email address. If you don't know what web beacons are, here is a quick summary: they're specially coded images that are embedded into emails to validate an e-mail address.)

Now installing the signatures .... well, that's another story!