Creating an HTML signature file for just about anything

There are tutorials all over the internet about creating HTML signature files for your email that work in different types of email programs. Gmail is one of the hardest to make comply to this small desire. I've put my travels in the world of creating HTML signature files all in one place so you don't have to wade through everything to get the info you need.

So I’ve recently had the opportunity to create a plethora of (pinatas?) e-mail siggy files :) And not just a nice little siggy file to place with your Outlook or Mac Mail program, but in ALL KINDS of things. Even for Gmail.

I had to piece together the “how-to”s from a bunch of different sources throughout the web, but I’m here to share how I did it, and how I managed to make it work for all kinds of different mail-reading-and-sending programs.

Like I said, I found direction through several different online tutorials, so it’s really hard to choose just one that stands out from the rest. It was a mish-mash of info that I put together, so it’s really hard to attribute things to just one place. I’m sure if you’re attempted signature files before, you’ll recognize some portion of a tutorial you may have used for this – so I’m not trying to rip anyone off here. I just want all of this information in one place.

So there were two things that struck me about everything I found. One was that if you know HTML and basic CSS at all, this is going to be cake for you, because it turns out all of the email applications (the ones I’ve worked with in this thing anyway) take HTML and CSS just hunky-dory. The second was that the methods of applying the signature content are vast and wide. So it’s good that you can pretty much write the file for one thing (why can’t designing for website be so easy?), but you’ll have to figure out how to implement it depending on what you’re using. I’m going to cover the Big Three: Mac Mail, Outlook and Gmail.

Yeah, I said Gmail. Now, by default, Gmail strips HTML from the signatures. But don’t let that stop you. :) So, let’s crack the knuckles and the neck, give your shoulders a stretch and let’s do this thing.

ZiggyStep 1: Create Your Pretty, Pretty Siggy.

Truly, this is the easy part. (Aw hell, the whole thing’s actually pretty easy. So whatever.) Mine is a fairly elaborate bit o’ code, because I truly messed with mine to hell and back. But you can make it as simple as you like. This is the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="sig" style="text-align:left; font:12px 'Rockwell Std', 'American Typewriter', Verdana, Helvetica, Arial, sans-serif; width:315px; height:166px; padding-top:40px; background-image:url('http://brassblogs.com/sigfiles/signatureBG.jpg');">

    <p style="line-height:14px; font-size:14px; margin:0 0 0 105px; color:#331608;">Shelly Cole</p>
    <p style="line-height:14px; margin:0 0 0 132px; color:#461E0B;">Brass Blogs Web Design, LLC</p>
    <p style="line-height:14px; margin:0 0 0 142px; color:#5A270E;">PO Box 46</p>
    <p style="line-height:14px; margin:0 0 0 144px; color:#6C2F11;">Weatogue CT 06089</p>
    <p style="line-height:14px; margin:0 0 0 147px; color:#7E3614;">P: 860.294.9830</p>
    <p style="line-height:14px; margin:0 0 0 142px; color:#8E5634;">F: 860.606.8024</p>
    <a href="http://brassblogs.com" style="color:#9E7654; text-decoration:none;">
    <p style="line-height:14px; margin:0 0 0 151px;">brassblogs.com</a></p>

    <div id="social">
        <a href="http://www.linkedin.com/in/brassblogs"><img style="border:0; margin:0 0 0 155px; float:left;" src="http://brassblogs.com/sigfiles/linkedin.gif" alt="LinkedIn" /></a>
        <a href="http://facebook.com/brassblogs"><img style="border:0; margin:0; float:left;" src="http://brassblogs.com/sigfiles/facebook.gif" alt="Facebook" /></a>
        <a href="http://twitter.com/brassblogs"><img style="border:0; margin:0; float:left;" src="http://brassblogs.com/sigfiles/twitter.gif" alt="Twitter" /></a>
    </div>
</div>

So what’s with all the inline styling, right? Well, as it turns out, some email applications will strip out the CSS that’s outside the elements. It just simply won’t apply it. But they all recognize inline styling. So we have to traverse back to the early days of the internet – but thank God we don’t have to use FONT or anything. It’s also a good thing that this is just a little bitty piece o’ code – not like an entire website. So a bit of inline styling ain’t gonna kill you.

Below is the result of the above (a note, I had to edit it a little because my site’s styles are messin’ with it here, but the above stuff is what I actually use when I send out emails….and remember to attach my signature.):

Shelly Cole

Brass Blogs Web Design, LLC

PO Box 46

Weatogue CT 06089

P: 860.294.9830

F: 860.606.8024

brassblogs.com

LinkedInFacebookTwitter

So once you have all of that in place, you’ll want to save the file. Just save it as a regular ol’ HTML file – no biggie. This is where the fun part begins.

Step 2: Determining what email program you’re using (and how to make this work with it).
Now, the “determining” part is up to you. I’m not going to tell you what to use to check your email (or send email) with. That’s all you. Now, like I said, I’m covering the Big Three (and “the Big Three” is being defined as the 3 major email apps I have been asked to make this work for – your definition may not be the same as mine) – but you should know in apps that are not of these three have the same general idea for how to implement this, which is basically three steps:

  • Create a signature file in the email program of your choice;
  • take the signature.html file we just created and overwrite the signature created by the email program;
  • and associate the signature with an email account.

So if you’re not listed here, don’t fret – most likely you’ll easily be able to glean how to do this from at least one of these options.

Outlook/Outlook Express
Okay so for Outlook (or Outlook Express) you have similar methods of pulling this off. So basically, you need to…

  1. Open up your signature fun (created above) in Notepad, or some other PLAIN TEXT EDITOR (as I’ve mentioned a gazillion times on this site, Microsoft Word is NOT a plain text editor!!)
  2. Create a new signature in Outlook by going to “Tools>Options”
  3. Go to the “Mail Format” tab, and click “Signatures” (under “Signatures”)
  4. Put anything you want in it. It doesn’t really matter what – the purpose is to create the actual signature file.
  5. Now go to “My Computer” (to browse) and start making your way to the signature file. The path is something like “C > Documents and Settings > USERNAME > Application Data > Microsoft > Signatures”.
  6. Once you find the new signature file, return to the pretty signature.html file you just made, and “Save As…” the signature file you’ve just located.

The signature should take immediately. If it doesn’t…

  • Check in the “Mail Format” tab, and make sure you have “Compose in this message format” set to “HTML”.
  • Make sure you’ve assigned the signature to an email account.
  • Instead of using the text/html format, try creating the signature file using the Outlook Editor (NOT Microsoft Word!)

Mac Mail
This one is what I use, since I’m on a Mac. However, I’ll probably be updating this post at a later date for Entourage, since Mac Mail just isn’t cutting it for me anymore. (But that’s a whole other can of worms, actually – I have to get it going first!)
edited February 27, 2011 to fix some of these steps

  1. Open Mac Mail, and create a new signature. Doesn’t matter what you put in it, the purpose is to just create the signature file. Now close completely out of Mac Mail.
  2. You need to navigate to the newly-created signature file – via “HOME FOLDER > Library > Mail > Signatures” and find the newly-created (through Mac Mail) signature file – which will end in “.webarchive”. If you only have this one signature, then it should be the only file there. If you have others, then this should be the most recently-created file. Highlight the file name and copy it. Leave this window open for now.
  3. Now open Safari. (Yep, gotta have Safari for this, because just *naming* the file doesn’t work.) Direct Safari to the .html signature. Check it for whatever. If it all looks fine, then “Save As”. Safari will name the file for you, with the .webarchive extension.
  4. That HTML file you just turned into a .webarchive file? Rename it, and paste the filename there. Now move the file into the “Signatures” window, and replace the old with the new. You can close out of this window now.
  5. Return and open Mac Mail. Select “Mail > Preferences”, and then go to the “Signatures” tab.
  6. Feel free to rename the signature. You’ll also notice it renders as plain text within this Window (this is how people who won’t see images in their mail program will see your signature – as plain text), but when you put it in the email, it’ll render fine.
  7. Associate the siggy with an email, and you’re good to go!

Gmail
edited February 27, 2011 to update some information
Gmail is the bad boy of this group. There was an awesomely terrific add-on for Firefox that you could use to pull this off perfectly, but I dunno what happened – one day you could use it, the next it was just gone. (I’m still looking for something that might work to replace this, so if anyone knows of one, please leave a comment!) Edit that – it came back :) The author is asking for donations to keep it alive. It’s worth it – trust me. But as an alternative, here’s a viable workaround that’s pretty darn simple.

  1. You know that .html file we saved in the beginning? Open that up in your browser window. Doesn’t matter what, really, I don’t think, but I absolutely know it works with Firefox.
  2. In a NEW window (not a tabbed window) open up your Gmail.
  3. Click “Compose.”
  4. Go to the browser window that’s displaying your pretty signature. Hit “COMMAND+A” (or “CTRL+A” if you’re on a PC) and everything should highlight in blue.
  5. Click and hold, then drag the signature into the “Compose” message of the window with Gmail open in it.

Yeah, that’s it. Kind of annoying that you have to have two windows open, but it’s better than anything else I’ve found.

Anyway, hope this helps you out!

Comments

  • Chris

    Hi there,

    i ve tried your trick with replacing webarchive file for Mail – but it didn’t show anything . So I simply open html file in firefox and copied everything into signature. A bit easier way.

    Anyway, the problem is that I would like to get images from computer instead of web server. Do you know how should the src=”" attribute looks like. If it is simply file name, mail didnt send the file. ? I am trying to replace image manually in Mail sig editor but it destroys old html formating ( tables)

    And if you have idea how to make advance formating in Entourage – place update post asap. Because this is hardcore

    thanks

    November 18, 2009 at 2:02 am Reply
  • Shelly

    You might be able to copy/paste from Firefox into the signature file, but that does occasionally come with consequences. You need to be absolutely sure you test it in multiple mail programs if you choose this method. The reason you want to “Save As” is because you want to overwrite the file that was created for the signature, and that it’s in the correct place. (If you didn’t see a file there, then you must not have save the initial “Create this signature” – because when you do, a file IS created for you to overwrite.)

    As for the computer – I don’t think you want to save your images on your hard drive. If you do that, only YOU will see them. They must be put on a server so other people have access ot the items to view. If they’re not, all other people are going to see are either plain text, or broken images – you will be the only one who will see th e”prettiness”.

    November 18, 2009 at 8:42 am Reply
  • Chris

    Regarding the images on the hardrive. I would like to embed images in html signature – so everybody see them. It is definetly possible – because when you edit your signare in regular way , and put images – they are being send (as an attachment and . Unfortunately I dont know how to manually modify src attribute so the mail will embed image

    November 19, 2009 at 10:51 pm Reply
  • Shelly

    I see what you’re saying :)

    Yes, you can certainly use the images on your hard drive, and have them sent as an attachment to the email. However, the above was done because my clients didn’t want an attached file sent with the email. This version I describe is so you won’t have an attached file – because it’s my experience that most people don’t want to open up an attachment – thinking it’s something they need to see – and discovering it’s just images for the signature. It’s kind of annoying. That’s why I put up this tutorial, because the majority of my clients who want this do not want it to come through as an attached file (if you upload the images to a server, it draws from that, instead of attaching the images to the email as an extraneous file that someone has to download to their own hard drive to see).

    It’s my understanding that all you have to do is replace the server path with the full path to the file on your hard drive to have it go through as an attached file. I don’t know this for certain, because I’ve never had anyone request such a thing – but I’d imagine that would work.

    I also vaguely recall that Windows will allow you to add “cards” to your emails that come through as attached files as well – so that people can easily add all of your info to their address book – maybe that’s what you’re looking for?

    November 20, 2009 at 9:09 am Reply
  • Beth Marie

    Shelly, I have limited knowledge of html and css. I have created my “pretty siggy” in Adobe Illustrator CS2. I then brought it into Photoshop and used the “Save for web and device” command to create a jpeg. Can you tell me what software I need to create the html in order for me to create a signature file that will work on different email programs? (I’m working on a mac so right now I have just dragged the jpeg into my signature file in macmail) I have the text editor that came loaded on my system (OS 10.4.11). If I can’t use that, can you suggest an easy (maybe free?) program I could use to do this?

    April 19, 2012 at 5:11 pm Reply
  • Shelly

    Hi Beth,

    I just hand-code HTML. That’s pretty much how I’ve done it for..well, always! I’m not really familiar with any HTML editors/creators for you, because the ones that generate stuff for you kinda suck. (In my experience!) The HTML code I provided above should be a good example of what to use – you can edit that as needed. But I really can’t point you to any programs that would do it for you since I just don’t use them., and I’d hate to recommend something just because it exists.

    April 23, 2012 at 10:33 am Reply
  • cath

    Hi
    I have followed the instructions for Outlook but the line breaks in my new signature file seem to be removed when I select that signature in Outlook. (2007, I think)

    Another query I have is when I created the blank signature for overwriting and then navigate to the ‘signatures’ folder there is a new folder containing various formatting/image files for the new blank signature and outside of that folder it has created 3 files: one html, one rich text and one plain text. I guess I overwrite the .htm one but do I delete or leave the other (now redundant?) files.

    Hope someone can help

    Cath

    April 27, 2012 at 6:58 am Reply
    • Shelly

      Hi Cath,

      honestly, I don’t know how to answer your questions. I don’t own Outlook, and I rarely use my PC anymore (basically only to test website designs, and that’s pretty much it). So I don’t know how to answer your questions in regards to Outlook.

      I wrote this tutorial about 3 years ago, and the “Outlook” bit I got nailed down because I was working with a client who *did* use Outlook, and the above were the steps we took to get this to work for him. But again, that was back in 2009, and I’m pretty sure he wasn’t using the most recent version of Outlook.

      Hopefully someone else can answer your questions, but in the meantime, I can only suggest *moving* those files you feel are “extra” and see if it has any effect on your signature. If it doesn’t, it’s probably safe to delete them. if it does, you can just move them back.

      Hope that helps!

      April 27, 2012 at 2:20 pm Reply
  • Ashley Creighton

    This was so helpful Shelly. I used your Gmail advice (the copy/paste part) but instead of pasting into the “compose” window, I just went to my Gmail settings and pasted into the Signature field. Worked like a charm :)

    October 26, 2012 at 3:41 pm Reply
  • michal

    @cath it works! Thanks!

    February 20, 2013 at 8:13 am Reply
  • Wayne Ramshaw

    Can’t seem to get the background image to display. It works when tested in the browser, but as soon as send in a email, no show but everything else is working fine any ideas, I’m using mac mail.

    March 12, 2013 at 4:52 am Reply
    • Shelly

      Hi Wayne,

      Without seeing the code you’re using, I can’t really troubleshoot very well. But what I can guess (from what you’re saying) is that you have the image you want to use as the background saved on your computer. That’s why you can see it on your own computer. It has to be uploaded to a server somewhere online so it can be viewed everywhere else, and you have to have the correct path to the file.

      Again, this is only a guess, but if you want to copy/paste your code here, that would help sort it out better.

      March 12, 2013 at 9:04 am Reply
  • Ole

    If it can help, I posted a tutorial on my blog how to create an email signature using Photoshop…: http://theolefiles.blogspot.it.....firma.html

    March 5, 2014 at 4:09 pm Reply
  • Rob Taylor

    Hi Shelly,
    Sure appreciate your little tutorial and code. It is the first stuff I have tried where the social icons don’t lose their formatting. I have created pulled it up in a couple browsers (everything looks great. However I am having the the exact same problems as Wayne Ramshaw. When I go to copy it, everything lifts but the background image. When I put it in Outlook all is good but no background image. If you could help me out as to where I have gone wrong that would be greatly appreciated. I will include my code here and hopefully it will make sense. Thanks,
    Rob

    April 5, 2014 at 2:36 pm Reply
    • Shelly

      Hi Rob :)

      Honestly, I’m not sure. I wrote this post in 2009, so it’s pretty old, and I have to wonder if some things have changed since then. The only things I can think of off the top of my head are if you’ve uploaded the background image to your own server, and you’re calling it in via a full path? (if you have an image on your local computer, and are linking to the file, that won’t work.) There’s also a couple of “If you’re having problems” resolutions up there in the article – did you try those?

      I wish I could help out more, but I don’t haveOutlook anymore (Mac’s'll do that to ya :) ) but if you’ve tried all that stuff, the only thing I could guess is that this article is now outdated. I *did* do a little searching around, and perhaps this tool might help you? I haven’t tested it myself, but I guess it’s worth a shot!

      April 5, 2014 at 3:20 pm Reply
  • Rob Taylor

    It appears in my previous post that code that I sent you actually converted and you (Shelly) won’t see it.

    April 5, 2014 at 2:38 pm Reply
  • Have your say: