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.
Step 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.):
Brass Blogs Web Design, LLC
PO Box 46
Weatogue CT 06089
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.
Okay so for Outlook (or Outlook Express) you have similar methods of pulling this off. So basically, you need to…
- 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!!)
- Create a new signature in Outlook by going to “Tools>Options”
- Go to the “Mail Format” tab, and click “Signatures” (under “Signatures”)
- Put anything you want in it. It doesn’t really matter what – the purpose is to create the actual signature file.
- 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”.
- 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!)
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
- 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.
- 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.
- 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.
- 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.
- Return and open Mac Mail. Select “Mail > Preferences”, and then go to the “Signatures” tab.
- 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.
- Associate the siggy with an email, and you’re good to go!
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.
- 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.
- In a NEW window (not a tabbed window) open up your Gmail.
- Click “Compose.”
- 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.
- 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!