One of the benefits of using a dedicated email application like Apple Mail or Mozilla Thunderbird is the ability to send emails which included rich HTML signatures. These email signatures are easily recognizeable and often include hyperlinks, images, or a combination of the two. Although Gmail users could easily access their accounts via POP allowing for HTML emails, web-based users are were forced to use plain text signatures. For quite some time, I yearned for the ability to add a little more personality to my emails. Unfortunately, because I managed all my email accounts via Gmail’s web interface, the option was non-existent. That was until I discovered the Better Gmail Firefox extension.
After installing the Firefox-only Better Gmail extension, you’ll discover a handful of configurable options – one of which is the "Allow HTML in Signature" option under Gmail > Settings. Once the option is selected, you now have free reign as far as HTML signatures are concerned.
Getting started with your basic HTML signature
Before embarking on the task of creating an HTML signature appropriate for your own needs, take some time to read through David Greiner’s A Guide to CSS Support in Email. Although the goal for this tutorial is not as robust as a full blown CSS / HTML announcement email, the tables which outline what email clients support what rules is of significant value (well worth bookmarking).
Creating a single line signature + graphic
In order to show how easy it is to create an HTML signature using the web version of Gmail + Better Gmail extension, we’ll create a single line signature which includes 1) an avatar / favicon, 2) your name, 3) contact info, and 4) a URL (website, blog, etc.).
Unfortunately, due to some email client incompatibilities, the best way to create an HTML signature similar to that found in the image above is with the use of an HTML table.
<table style="font-size:11px;color:#555;border-collapse:collapse;"> <tr> <td><img src="http://5thirtyone.com/5.gif" alt="531" /></td> <td>Your Name //</td> <td>123-456-7890 (mobile) //</td> <td><a href="http://your.url.com"> your.url.com</a></td> </tr> </table>
Important: Notice the inline CSS? Inline styling for the form element allows us to resize and customize the color of the font. It is also very important not to neglect the <img alt="" which is displayed by default when a recipients mail client blocks images from emails.
Use your HTML signatures wisely
Keep in mind that most, if not all, free email services will – by default – remove external images from emails. That is why the aforementioned alt="" is important in order for recipients to know what they may be missing. Don’t overload your HTML signatures with too much fluff. Keep it simple and light; your contacts will thank you. [Digg this]
Business Email Solutions
Get the most of your email. Make sure to set up an outlook exchange server at your workplace and enjoy the convenience of outlook email from any computer. Don’t let email hosting troubles slow your business down.
“Is is possible to overcome the “Images are not displayed.
Display images below” ????”
Nope. That’s built into each individual mail client for security reasons.
I have created a google-chrome extension that allows you to create html email signatures for gmail. Its called Autopen. Check it out by clicking on my name.
But some emails I get the images is automaticly displayed… I would like to create a signature containing a small logo of company… Is it possible?
thanks in advance.
Yes, it’s possible, but your recipients will have to click “display images” or some version in order to be able to see the logo in your signature. There’s no way around this.
Just thought I would leave a quick note – as a delighted user of Jerome’s HTML Email signature Addon for Firefox.
It works great and is *much* easier to setup that Greasemonkey.. it must be because it worked for me first time!
http://projex.com/blog/how-to-use-html-images-with-google-gmail-signature
There is a perfect solution to the lack of Rich Text (HTML) signatures in Google Mail:
+ Enable the “Canned Responses” feature by Google Labs.
+ Compose a new message
+ Click Canned Responses > New Canned Response (call it “Signature” or whatever you like)
+ Edit your signature in the composer
+ Click Canned Responses > Save > [Signature Name]
Now you can quickly add your signature to any new e-mail (or reply) by clicking Canned Responses > Insert > [Signature Name]
Ideal! Even allows you to have as many signatures as you like.
This is fab!
New too google apps and this was one thing I was concerned about. The “canned response” is by far the easiest way to deal with a signature. Great – thanks!
with this it looks like you can only play with the fonts but cannot add a graphic. Is that correct?
I vote for canned responses too. Very easy to set up and easy to use. Plus it works on any computer that you send mail from, not just the one where you’ve installed the Firefox add-on.
Thanks jamie.!!! for suggesting canned responses.. cheers!!
Oh seems that firefox add on does not work anymore :O
Great and interesting post!
For Firefox Gmail html signatures you should check us up:
http://www.wisestamp.com
Enjoy
I had looked for a solution in the labs but never thought that “Canned Responses” would do the trick so perfectly. Such a practical solution. Thanks for posting that Jamie!
Hi everybody!
I was using the Canned Responses in Gmail, but the problem is the blue border on the images when you add a link to them.
Wise Stamp worked perfectly for me! It does everything by itself!
Thanks WiseStamp team!!!
João Caserta
Yeah! Wise Stamp is the perfect solution for graphic signature when G-mail is not compatible for HTML code.
Canned Responses fails when I want to added a graphic as my signature. Every times I put in the canned signature it becomes a broken link and doesn’t show the graphic.
By the way if you wanna get rid of the blue border around you graphic you can just get to the code view and add ” border=”0″ ” after you img address.
ex.
Hope that helps.
This post is not true anymore …
Since gmail have change the user interface the signature e-mail is not on the new better gmail… But the attachment icon wort the donwload anyway…
The canned response is the best solution suggested.
For the rest of you that are concerned about a graphic in the email signature, you should be aware that I, nor most of the people I know, will ever see it. I don’t display the graphics on my phone, in outlook nor when accessing mail via the web. Is it really worth the trouble putting it there?