Rich HTML email signatures straight from Gmail

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.).

Simple single line signature with Gmail

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;">
<tbody>
<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>
</tbody>
</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.

Discuss - 103 Comments

  1. Jerome Dane says:

    “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.

  2. f says:

    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.

  3. Jerome Dane says:

    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.

  4. Finkpad says:

    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

  5. Jamie says:

    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.

  6. Michael says:

    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.

  7. tanzy says:

    Thanks jamie.!!! for suggesting canned responses.. cheers!!

  8. tanzy says:

    Oh seems that firefox add on does not work anymore :O

  9. Great and interesting post!
    For Firefox Gmail html signatures you should check us up:
    http://www.wisestamp.com
    Enjoy :)

  10. Hashim says:

    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!

  11. Joao Caserta says:

    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

  12. Krit says:

    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.

  13. Al says:

    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…

  14. wapu says:

    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?

  15. Jerome Dane says:

    For those of you that want it, the updated version of Blank Canvas Gmail Signatures is available at:

    http://blankcanvasweb.com/pages/id_9/n_gmail_signatures/

  16. ankit says:

    i need some help

    whenever i tried to use canned responses, the problem is if i m sending mail to unknown person then sometimes mail first goes to spam!!!!!!
    that is the big trouble
    i dont want my mails to go 1 in spam & from there u have to allow them then after that all mails come directly to inbox….
    need help!!!!!!!!!

    thanks in advance

  17. scorpy says:

    now you can include html or rich text signature directly inside gmail, no need for hacks or third-party scripts. you can visit http://knol.google.com/k/sumit-roy/how-to-create-gmail-html-signature/1n8io3wwlct86/10 for some customizations tips and tricks.

  18. Huevos de oro says:

    check out this site to create dynamic email signatures from rss feeds – http://siggyfeed.com – i found it useful as it displays images from my photo blog