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.
75 Comments
Quote
Just curious, what would happen if I tried to send a Gmail message from a computer without the Better Gmail extension? Is the extension only required to save the signature or does it need to be installed to actually send the message with the signature?
Quote
Derek, you failed to mention that with a fresh installation of the Better Gmail extension that you need to check off “Signature Float” in the add-on preferences. The “Allow HTML in Signature” option in Gmail’s settings won’t show up until this is enabled first.
Quote
What happens if I create a signature in Firefox with the GMail extension and then move back to my beloved Safari? Let me guess… no go.
I wish there was an alternative…
Quote
Good write up by the way; failed to mention that in my last comment.
It just adds another reason onto the already tall pile of why I should move to Firefox.
Quote
I have been using this method for about a year.
http://allforces.com/2006/04/14/css-signatures/
Quote
It’s not perfect. From my own testing, sending mail from Gmail in a different browser displays the HTML bits. I was using Safari though (not WebKit so no support for rich text). Anyone else have results?
Not true. I have see the HTML signature with and without the floating signature checked.
You have to use a POP client in order to have the signature correct?
Quote
Great idea! But I’m not so into using css/html in email. The main reason is that some client doesn’t let you use html and pictures. So all the work that you did is gone and hopefully they don’t know it (usability). The second reason is that it makes the email bigger and add unneccesary stuff.
If the client is stupid enough, which I doubt (just throwing it out there), it might consider it spam. I know, Very unlikely.
Anyways, nice article!
Quote
“Not true. I have see the HTML signature with and without the floating signature checked.”
Could be an isolated case for me then. I’m honestly not seeing it if “Signature Float” is not checked off in the extension’s preferences.
Quote
Same for me, Sam. I was about to IM Derek and ask him if he knew why it wasn’t showing up (if there was a problem with Better Gmail or something), and I tried checking off Signature Float and it showed up.
Quote
Great post, I just wish we didn’t have to use tables for the HTML.
Quote
You’re not limited to tables. It’s just that in the sample above, aligning elements vertically is easer done with a
table.Quote
This is awesome — thanks a ton.
Quote
check out blogsigs.com.
Quote
Great idea. I’ve been looking for a way to use HTML in my sig for GMail for quite some time now. And anyways. I don’t think it’s worth using FF just so I could have HTML in my signature. I’ll just wait until someone makes something up for Opera. Or, if this thing had a GM script, those work with Opera.
Quote
Derek,
Cool stuff - cheers.
Quote
Very nice work mate, cheers!
Quote
I’m not finding an option for “Add HTML to Signatures”
I’m also not finding an option for floating anything.
I do have the persistent searches and the message bubbles…
someone mentioned “add-on” preferences/settings…where are these?
Quote
As long as it’s not stupid bouncing bunnies, or filling the background with a multi-colored image making the text impossible to read (unless highlighted), like thoughtless Incredimail-users… I don’t mind HTML-mail.
Quote
Ok, I found it. When talking about Greasemonkey scripts, one doesn’t think to look in the “extention” options….
Quote
How do i get a quote put on the second line after the address format you have chosen? I tried everything from tr to br being inserted but it shows up with weird alignment.
Quote
This doesnt work for me - the script is working ok but when you go to ‘compose email’ the signature is still in ‘code’ mode
any help appreciated!
Quote
Ben, is rich text mode enabled when you’re editing your email?
Quote
thanks Derek - works now
Quote
I have to have the floating option checked in order to have the options show up in gmail’s settings.
Quote
Derek-
Derek here. I did indeed have to check the box to enable ‘Signature Float’ in order to display the option to have an HTML signature. This was a new installation. (Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1) Gecko/20061010 Firefox/2.0)
Furthermore, this feature isn’t working. I didn’t put my signature in a table, but I thought that didn’t matter. Is it necessary?
Here is a screenshot of what I am seeing:
http://th3gh05t.com/tmp/not-working.jpg
Thanks for your help!
D
Quote
Im having the same problem
Quote
Greetings. This plugin is actually just a collection of greasemonkey scripts. The greasemonkey script that provides the HTML signature (as well as signature floating) is called Gmail Signature Float. You can get it here: http://userscripts.org/scripts/show/3067
A version for Opera is being worked on - check the above page for an announcement once it’s ready.
Quote
Hey there, this is a cool idea, but no matter what I do, I cannot seem to get this to work. I have checked ’sig float’ in better gmail so I could get the html signature option, which I’ve checked. I’ve also made sure that gmail uses ‘utf-8′ instead of the default.
I’ve sent test emails to myself at gmail as well as yahoo, and I’ve even tried at yahoo to use the tables signature. I ALWAYS get code!
Am I missing something simple here?
Thanks
Quote
well wow, miraculously it looks like it’s working now…I guess it fixed itself?
thanks!!!!!!!!!!
Quote
Question…I’ve tried this and it works great, but where do I have to have my image in order for it to show. I’m pulling my hair out on this, and I’m sure it’s something very simple. I have my company’s logo image sitting inside the My Documents folder, and when I try to map the image to show in my signature it won’t show.
Any thoughts?
Thanks!
Quote
You want to host your image online - either on your own servers or a free image host like Imageshack.
Quote
I’m having this very same problem. And mine won’t miraculously fix itself!
Why Google can’t just add a damn HTML sig option is beyond me.
Quote
Having the same probem where I ALWAYS get code too. mmmh should we just be waiting until Gmail offers HTML sigs on their own. Gosh great idea, wish it was foolproof.
Quote
For all the people having problems - my fix……
Turn off the dashes (an option above the ‘use HTML’ one in Gmail settings). The dashes seem to confuse things.
Quote
This is great plugin ,great advise also tnx for sharing.
Quote
seeing as how google has a limit of 1000 characters (my sig is an elaborate table created in MS Word - thus has a lot of formating mumbo jumbo which puts me over the limit), is there a way to link to an html file? basically, instead of displaying an image, display an actual html “page”? please excuse my newness.
Quote
Please don’t encourage users to post HTML Email. It’s dangerous, takes up resources, and is not accessible.
Quote
I tried using the same table given as an example above, tried clearing dashes, floating the signature… But it doesn’t matter what I do - my signature is still showing up as HTML code. How can I fix this? Thanks!
Quote
Great post, but I’m getting an error and it only shows the html code. I turned off all the other options and I’m still getting it. I think I may be conflicting with another add-on. Anyone have any ideas? Thanks!
Quote
Hello
I am Lucy, I have found your website while searching for some info at Google. Your site has helped me in a big way.
Bye
Quote
Everyone that is still seeing code after all the fixes, be sure to logout and log back in. That solved it for me
Quote
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?
Quote
It was the logout issue.
Quote
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
Quote
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?
Quote
Great, I have been looking everywhere for something like this .. thanks!
Quote
i’ve installed better gmail, checked the “signature settings”, and I still can’t see the “allow html in signature” option?
anybody?
Quote
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/
Incoming Links
Leave a Reply