Here's my new email signature:
Figuring it out was one of the toughest things I've done in awhile. I started the task several times over the last couple years, giving up each time in frustration. But for several reasons, I decided to give it one more try. Here's what I learned:
A. At one point, I had built bigger icons, but these would have been too big. Recently, while revamping the Original Green site, it occurred to me that it would be really cool to build icons using the graphic paradigm of iPhone apps. I found a site that creates iPhone app buttons for free.
B. Begin by composing the signature in your favorite HTML editor. I know almost nothing about HTML, so I need a WYSIWYG HTML editor so I can see what the finished product looks like. I looked around on Google for free editors, thinking they might be simple to use, but didn't find one that was. So I went back to Dreamweaver, which came with my CS4 package from Adobe. I've only tried it a couple times before, and it's daunting because it's made for creating industrial-strength HTML. For some reason, it seems more of a challenge than PhotoShop, Illustrator, and InDesign, all of which I work with regularly and love.
C. But in any case, I plowed through, composing everything in the WYSIWYG window, but with the split screen so I could also see the HTML code on the top half of the screen and hopefully learn something about it.
D. Numerous times during the process, I did "Preview in Safari" so I could tell what it'll look like in use. I occasionally previewed in Firefox, IE, and Netscape, too, just to make sure it wasn't coming out too crazy in those browsers.
E. You've gotta get rid of all the header HTML in the HTML window for it to work properly. This is the stuff that DreamWeaver puts in by default... but if it's there, the signature won't work. Just select it and hit the Delete key.
F. You've gotta have all your images hosted somewhere for this to work... but not just anywhere. I really wish Zenfolio would work, but for some reason, it doesn't. Nor does MobileMe. After hours of Googling, I finally found a site that works: www.imageshack.us. I have no clue why their hosting works and the others don't, but that's the way it is. And it's free.
G. Once you get them into the document, make sure NOT to do shortened URLs. That would be nice, so you could see how many hits you got on the links, but some email services consider link shorteners a sure sign of spam, and won't deliver your mail. Some places, like a hotel I was in recently, won't even send your email out. So use the straight-up link.
H. Build the structure of your signature using tables, so that stuff goes where you were expecting. Tables make the content far more predictable than just putting it into text, which seems to be one of the more unreliable things in the world of HTML, because everyone's computer can read it differently from everyone else's. But if you put a graphic in a center-justified table cell that's 216 pixels wide, that's where it stays.
I. Here's a crazy part that I wasted a couple hours on... DreamWeaver CS5 is set up to Insert Images that are on your hard drive, so you navigate to them, click on them, and in they go. But this system only works, as noted above, when the images are hosted online somewhere since you're not building a website (DreamWeaver's normal task) but rather, an email signature. So how to get it to find those hosted images? I tried everything I could think of, and then spent a couple hours Googling, but came up empty. The problem is that you can key in the URL no problem, but that doesn't light up the "Choose" button, which remains grayed out. So finally, just before going to bed in the wee hours, I tried something completely irrational. I clicked on one of the files on my computer in the browser window at the top of the Insert Images dialog box, which lit up the Choose button. But before clicking it, I keyed in the URL. Now, click Choose. It works!!! Dreamweaver completely ignores whatever file you've clicked on in the browser window and instead uses your remotely hosted graphic. Completely counter-intuitive, but it works.
J. Once you build it the way you want it, you've gotta get it into Mail. That requires another step or two that are counter-intuitive... so we're not home free yet.
K. In Mail, open Preferences and click on the Signatures icon.
L. Create a new signature by clicking on the plus icon (you can just leave the signature blank for now).
M. Quit Mail.
N. Navigate to your Home Folder > Library > Mail > Signatures. Sort the files by date modified. The names will be complete gobbledygook, but there will be one that has just been created. That's your target... leave the finder window open so you can see its file name while you're doing the next steps.
O. In Safari, open the HTML file that you created.
P. In Safari, go to File > Save As. Then, navigate back to Your Home Folder > Library > Mail > Signatures. You want to overwrite the signature that you just created in Mail.
Q. Click on the new one that you just created, double-checking that it's the right one in the Finder window. Make sure that the format is set to “Web Archive,” and hit Save.
R. Re-open Mail. Here's the last counter-intuitive part: if you look at the signature in the Preferences > Signatures window, all the graphics will be missing... but it all should work fine when you actually use that signature in an email. Go figure. But it works!