the codingmerc llc

application programming expert for hire

Rich Text HTML Signature for Apple Mail

on Mac and iPhone is something I wanted to have for a long time. I knew the rich text signature feature somewhat exists on Mail for OSX Lion but I does not on the regular client for iPhone. There is an update for this procedure to get Rich Text HTML Signature for Apple Mail on Mountain Lion.

The image shows what my current signature looks like in Apple Mail. The following step-by-step description is like a small tutorial on how I managed to integrate it.

Signature Design

Let’s start with some basic concepts as ground rules for designing a modern and cool signature.

Very compatible and ressource effective, thus
Use <table> tags instead of <div> with CSS for layout because the support for CSS is different for most mail clients.
Do not link to external ressources
Do not attach additional signature ressource files to every mail
Use inline image information
The signature should still look good even if the mail client does not show images

To convert image files to inline image data we can use base64 encoding. On Mac OSX you can copy base64 encoded image information to the clipboard like this:

openssl base64 -in image.png | tr -d '\n' | pbcopy

then you can insert the image in your HTML code like this:

<div style="background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAA...RK5CYII='); "></div>

One advantage of this method is, that you do not need to attach the image to the email and you do not need to link to the image on a remote server. The disadvantage though is that the mail client very likely does not display an image if he does not support inline image data. Outlook for Windows for example does not display images this way.

Use your favorite HTML editor to create the signature markup. You can start from scratch or have a look at my Example Signature HTML File.
Check your result in at least 2-3 Browsers like Internet Explorer, Firefox, Chrome, Safari to make sure it at least looks similar in those. The optional next step would be to minify the HTML markup so the resulting file is reduced by all unnecessary characters to free some file size. This is what the minified example file would look like. You can use your favorite method for minification. I can recommend the Google HTML compressor.
Save your final markup file at a convenient location and follow the steps below to load it in Apple Mail.

Apple Mail

Rich text signatures only apply to rich text emails. To create and attach html signatures to your outgoing mail, switch you default mail format in Mail.appMail > Preferences > Composing > Message FormatIn the drop down menu select Rich Text.
Now switch to Signatures and create a signature. The content does not really matter as it is going to be replaced by our custom signature. This will only create the necessary file if you followed step 1.
Quit Apple Mail(!)
Locate the signature file on you hard disk. The file can be found at~/Library/Mail/V2/MailData/Signatures/
and is usually a file named something like this D879F2D5-CCA1-4BCA-AA5F-5EEB54995957.webarchive but always ending in .webarchive. Beware that this file is only created if you executed step 1. If you can not find the file double check you mail format settings.
Open you own signature markup file from your convenient location in Safari and save it as .webarchive overwriting the dummy signature file. Make sure to select webarchive as file format.
Restart Apple Mail and check signature settings. You can select the new signature for a specific or all outgoing mail addresses in case you use multiple.

iPhone

The basic mail client on iOS does not yet(?) support HTML mail signatures. If you happen to have a jailbroken iPhone you can use SIGnify or Mail Enhancer to add the missing functionality. Do not use the .webarchive ressource thou. You can directly copy and paste the markup from you own signature HTML file. 07/08/2012