Create rich Gmail signatures in Firefox with Blank Canvas

February 10th, 2009 •
Tags: Blank Canvas, e-mail, email, Firefox extensions, gmail, gmail signatures, signatures

Blank Canvas is a FireFox extension which allows you to create HTML signatures for automatic inclusion in your outgoing mail from Gmail. Gmail has offered signatures for some time, but they are plain text only. This means no images, no links, and no layout. You simply enter some characters, spaces, and line breaks, and the recipient sees those in your message. This is a little inflexible for web nuts like you and I. We want to be remembered. We want attention! Blank Canvas gives us all that in a slick package.

Once you have installed the extension, it places three or four (depending on your options) controls to the right of the “From” field in Gmail when composing a message. The first is a dropdown menu which allows you to select one of four different signatures. If you have multiple sending accounts setup in Gmail, you have four signature slots for each one. In other words, the signature I have named “Default” can be different when I am sending from my primary account versus sending from the account provided by my employer. This is very handy. For most of my accounts, I am posting my personal contact information as well as the raddevon.com logo linked to the site. For my work account, I have my name, work e-mail account, and work phone number. Once I change sending accounts, these signatures are automatically swapped.

The second button displayed activates the editor. The editor is where the action happens. The top box allows the user to enter the HTML to generate the desired signature. The bottom pane displays the preview. There is also a link above the editing box that sends the user to a page with some basic tips about building a signature.

The third button reinserts the signature in case there are problems. It is only visible once activated using the fourth button—Options. The options are minimal. You may choose whether to insert the signature above or below quoted text when sending a reply, provide alternative names for your four signatures, and display the “Reinsert” button.

The extension works wonderfully. I have noticed two quirks with my e-mail signatures, and I’m almost certain they are limitations within Gmail itself. First, the preview will show alternate link colors when your signature is styled as such with CSS. However, these are reverted back to default colors when the e-mail is actually sent. Second, I had included a Skype link to allow recipients to click my Skype username and call me directly. That link appears to be nerfed by Gmail when it reaches its recipient. I imagine Gmail limits the protocols of any links in e-mail to a list of “safe” protocols. Evidently, “skype:” is not among them.

If you’re not already an HTML guru, there are a few concepts you will want to keep in mind:

1. Line breaks in HTML are not as simple as pressing the “Enter” key. HTML ignores any white space beyond the first press of the space bar. Line breaks must be invoked by placing a <br /> in the desired location.
2. Images use this tag: <img src="http://path.to/image.jpg" />. Of course, you will have to insert your own path based on the image’s location. It can’t be on your hard drive. Otherwise, anyone without access to that drive (which describes most of your desired recipients) will not see it. Try a free image hosting service like ImageShack if you aren’t sure where to put your image.
3. Hyperlinks are made with <a href="http://path.to/page.html"> </a>. You may notice this tag has two sides. Anything between is linked to the path referenced by the “href” attribute. This can be plain text to link a word or words, or it can be an image tag to link that image.
4. If you want to use CSS in your signature, you can use it inline by adding a “style” attribute to whichever element you want to affect. If it’s an image, that would look something like this: <img src="http://path.to/image.jpg" style="insert CSS here" />. If you want to style a block of text, you can enclose it in a <div></div> tag with a style attribute like this: <div style="insert CSS here">Text to style</div>. There are other ways to add CSS as well, but this is the simplest.

This should get you going. Now, get out there and create a killer signature to make a big impression on your recipients. Plug your blog, give people a way to contact you, and pimp your expertise. Ready, set, GO!