If you’re looking for a way to spruce up your boring, old, static, text-only email signature into something more exciting and interactive, here’s how. Not only will it attract more attention to your signature and making it look more impressive; it will also liven up the mundane task of sending emails.

Before we start, let me lay out the things you will need:

• A text editor capable of editing HTML. I suggest TextWrangler.
• Signature Profiler
• Some basic knowledge of HTML.
• An online file-sharing service like DivShare or Box.net to store your avatar.
• To be running Mac OS X 10.4.x and higher.
• To be using Mail on Mac OS X.

This entire tutorial will transform your email signature from this:

to this:

If you’re still excited, then read on. But be warned, depending on your level of geekiness, this process may or may not be easy for you. [Disclaimer: this tutorial is actually an improved version of this one]

First step – Making a HTML signature

You have to understand that in order to insert HTML in your email signature and make it interactive, it’s actually two different procedures. The first is to change it into HTML, the second is by using Signature Profiler and adding the interactive stuff: iTunes status, random quote, Skype button.

Let’s focus on the HTML part first. You’ll need to open up TextWrangler and create your HTML signature. There are some limitations to adding HTML – for example, GMail does not recognize body or style tags and all CSS must be embedded. Head here to read more about CSS in email.

If you have no idea where to start, use this example HTML file as a base to mess around with. If you want, you could tweak it to fit your style. You should fill in your name and social sites where the fields indicate. Also, you’ll need to upload your avatar to Divshare or Box.net, get the direct image link and insert it in the image tags. The size of the image varies and depends a lot on the style of your signature and how many lines of text you will have. Like I said, you will need to play around and customize it yourself.

If you notice, there’s a specific line of text after the second break, {itunes.display.info} is used later to retrieve your iTunes status.

To see how your signature will look like, save it (to the desktop or anywhere else convenient) and drag it into Safari. Once you’re happy with the results, click on the File menu and Save as ‘webarchive’ onto your desktop. Name it “HTML sig”. We’ll return to it later.

Step two – Show your currently playing song

Now that you have your HTML signature all set, you’re ready to add the interactive stuff like iTunes status and Skype buttons.

Download and install the Signature Profiler plugin for Mail and restart Mail. It should now be added into your Mail preferences.

Here’s what SigPro can do:

• Add iTunes currently playing song, artist and album
• Add a Tail signature
• Add a random text qoute
• Add your Skype Status and buttons to call you
• Lots more advanced stuff like calling scripts

If you’re planning to show your iTunes status, then you’ll need to create signatures for them. Personally, I’ve only created two new ones: one to show the song iTunes in playing, and another when it is paused, stopped or not running. To do this, you’ll need to go to the Signature tab in Mail preferences. Create a new signature and call it “iTunes playing”. Right click in the signature field and you’ll notice that SigPro has added their Replacements into the menu.

Add the items {itunes.playing.song}, {itunes.playing.artist} and {itunes.playing.album} into the signature field from the right-click menu. Now all you need to do is to customize it. Here’s what I would write: I’m listening to {itunes.display.song} by {itunes.display.artist} from their album {itunes.display.album}.

Keep in mind that these are just text, so you can adjust the font attributes. You’ll need to select the curly brackets as well when changing the size and colour of the fonts, if not you’ll lose the formatting.

Now, make another signature for iTunes’ paused state. It doesn’t need to have any fields in it, just a short message will suffice.

After you’ve done that, go to SigPro’s tab in Mail preferences and hit the ‘iTunes & Quotes’ tab. For each iTunes state, select the appropriate signature. Now test it out! Play iTunes and see if the signature changes (it will change right there in Mail preferences).

Step three – Swapping your text signature for the interactive one

If you already have a plain text-only signature set in Mail, good. If not, set one up and associate it with an account (by dragging the signature from the middle column into the appropriate email account in the left column). Quit Mail.

After you’ve done that, go to ~/Library/Mail/Signatures/ and you will find all of your signatures in webarchive format. Assuming that you only have one email account set up in Mail, you will have three signatures: your regular signature, “iTunes Playing” and “iTunes Paused” signatures. To find out which is the one you want to change, double-click them to open in Safari until you find them.

Once you’ve located it, copy its file name. It should look something like this “F61C8250-DE9F-4B33-A17D-2F5FF6E3B5B9″ (without the webarchive extension). Rename the “HTML sig” file on your desktop with this file name. Drag the new signature file from the desktop into the ‘Signatures’ folder and replace the older signature file.

Open Mail and your signature is now HTML and interactive.

A few things to remember: The avatar doesn’t load in Mail’s preference but it will load when composing a new mail. Also, any changes made in the HTML signature will be hard to repair. For instance, if you accidentally delete the avatar logo from the signature, you will have to start from scratch again. Keep a copy of the ‘webarchive’ files so that you can restore your signature in case of a disaster.

You can also add other stuff (like the Skype button) into your signature by right-clicking and selecting fields from the SigPro Replacement menu. If you want more control over its formatting, then I suggest that you add the fields by editing the HTML signature in TextWrangler.

If you’re into this kind of thing but don’t use Mac, then I would recommend that you check out Saikat’s article on creating multiple singature in Gmail. Retaggr is also an easy way to add a funky signature to your emails, David mentioned it earlier in his post about how to create online business cards.

Please ask if you have any questions about this tutorial or if you somehow screwed up and need help. What are the other methods you use to interactify/interactize your email signature? Let us know in the comments.

Tagged: avatar • email • email signature • iTunes • status message • text editors