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. […] Here’s another guide called ”Rich HTML email signatures straight from Gmail.”   […]

  2. Bobby says:

    When try to use this utility, and yes I do have the ‘Allow HTML’ box checked, my signature is still only seen as the HTML entered.

    Ideas?

  3. Bobby says:

    It was the logout issue.

  4. […] my Digg gmail signature is complete! I'd had the idea for a while now (since reading about creating HTML signatures in gmail on 5thirtyone) and finally found some time to do it. It actually didn't take that long and […]

  5. […] Rich HTML email signatures straight from Gmail […]

  6. […] (without any additional software). HowTo: Sync. Google Calendar and Gmail contacts to your desktop. HowTo: Use rich HTML email signatures straight from Gmail (req. Better Gmail extension). HowTo: Manage all […]

  7. cathryne says:

    Here’s a script for the Greasemonkey Firefox add-on that allows you to use several HTML signatures in gmail:

    http://userscripts.org/scripts/show/20887

  8. Logan says:

    I believe that this doesn’t work anymore since the Gmail overhaul (or should we call it “underhaul” since there were virtually no cosmetic changes). Can anyone verify?

  9. Takeabreak says:

    Great, I have been looking everywhere for something like this .. thanks!

  10. jk says:

    i’ve installed better gmail, checked the “signature settings”, and I still can’t see the “allow html in signature” option?

    anybody?

  11. Here’s another way to create nice signature for your emails. I’ve created my own custom HTML signatures and then dragged them from the browser window to the email text area and it works fine….a bit of a round about way but it works.

    Here’s a link that shows you a bit:
    http://www.labnol.org/internet/email/add-linkedin-email-signature-html-image-logo/3013/

  12. Ivy says:

    Hi all, it happens something really strange to me using better gmail 2 and firefox.

    1) in better gmail 2 “html signature” flagged
    2) in gmail settings no signature
    3) in “quick links” in left sidebar added my address
    4) created signature in “compose message”

    now…
    a) with this “setup” it doesnt work, worst, i see then in “quick links” 2 signature saved
    b) i have to set up my same signature (html code) in gmail settings to make the signature work, but then i see the “working” html one, and then i see the whole code as a signature…

    what’s happening?
    it doesnt solve if a uninstall and install better gmail 2 again.

    thanks a lot!

  13. Jerome Dane says:

    Check out this Firefox add-on which allows you to easily maintain up to four separate rich HTML signatures for each email address you have set up in your Gmail account.

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

  14. I just switch to gmail and having difficulty making an HTML email signature until I read your article. Thanks for your article!

  15. Leah says:

    omg i just switched to gmail to,
    i googled gmail html code,
    and this was exactly was i was looking for!!
    thanks dude!

  16. f says:

    Is is possible to overcome the “Images are not displayed.
    Display images below” ????