Create a flashy HTML signature in Apple Mail

by Milind Alvares on January 1, 2009

Apple Mail can be a very simple application to get you started, but once you get comfortable using it, you need to bring in the power. I’ve discussed a lot of Mail related tips and plugins here on SA (take a look at the related posts in the post footer), and here’s my latest addition to Mail tips. Add a spiffy HTML/CSS signature to your outgoing emails that will definitely cause some sort of unrest on the receiving end. 

siggy

Before I go further, I would like to give full credit to All Forces.com, from where this is based off.

Prepping Mail

Mail supports multiple signatures. These can be assigned to any number of email accounts you have set up. You can automatically assign a particular signature to an account, or choose them from a drop down list while composing your email. To create a signature, which you must do to make this work, go to Preferences » Signatures » and click the + button.

mail-signatures

You can now type in your plaintext signature, and even drag and drop a picture in it (a handwritten signature perhaps). Of course, if you want to go the HTML way, leave that default signature alone, and quit Mail. 

Getting your hands dirty

The next part is composing your signature in your favourite HTML editor. If you don’t know how to code in HTML, you can download this sample code (right click » save link as), and edit your details in between the tags. I’ve added helpful comments in the sample so you can understand what bits you need to edit to get your signature to your liking.

coda-editing

The rules for composing all of this are simple:

  1. All the CSS has to be inline. You cannot attach a stylesheet, nor can you define styles and call them in your tags.
  2. The image has to be an externally hosted image. You cannot attach an image every time you send an email. 
  3. No using <body> <head> and other such tags. Use only tags like <div>, <br> and <a>. 

Once you are done editing, save the file as a ‘something.html’ file on your desktop. Then open the file in Safari (drag it to the Safari icon) and then save it as a ‘.webarchive’ file. 

Navigate to YourHomeFolder » Library » Mail » Signatures, and replace the existing ‘.webarchive’ file with the ‘.webarchive’ file you’ve just created. Make sure you copy over the exact name over to ‘.webarchive’, or Mail will not recognise the file.

saving-siggy

Now, launch Mail, go over to the signature preferences again. Drag that signature from the middle pane to any of your accounts which you want to use this signature with. You can also set the default signature for each account from the settings. Once done, you can compose a new mail, and the signature will be there all pretty!

compose-mail

It didn’t work?

  1. You didn’t assign the signature to any email account. Open Prefs » Signatures and drag the signature from the middle pane to any of the email accounts in the left pane. 
  2. You didn’t copy over the webarchive file properly. The resulting file name in your signatures folder should have the same cryptic filename as the one that was there before. Not ‘something.webarchive’
  3. If you try to use TextEdit to edit an existing HTML file, it automatically renders the page. You need to check ‘Ignore rich text in HTML’ in the TextEdit preferences before trying to open HTML files. 
  4. Hit me up in the comments and we’ll take a look at it!

If you have any problems implementing this, or have something to add to it, let us know all about it.

Reader Comments

Email Signatures: Using Yours as a Marketing Tool to Help You Get More Business « Internet Marketing Tips
March 19, 2009 at 6:26 am
Daily Digest for December 2nd | Mike Hayes
December 3, 2009 at 1:28 am
Nota – A clever way to learn the Piano « Smoking Apples
December 22, 2009 at 7:02 pm

Reader Comments

yash January 1, 2009 at 10:01 pm yashrg.co.in

really cool tip. I would totally digg this (if someone submits it.)

   

yash January 2, 2009 at 12:55 am yashrg.co.in

I have a question tho. How do I save the signature with devnagri fonts? Using dreamweaver, I get the message, “you may want to change to UTF-8 or an encoding that supports special characters in this document.

   

Vanni January 2, 2009 at 1:03 am

I think your tip should have the path: Navigate to YourHomeFolder » Library » Mail » Signatures. Also you need to add some info on what we should do if we have a number .webarchive files…. which one do we replace? For example i have ten sigs . If I want to add an eleventh how do i know which .webarchive ??

   

Milind Alvares January 2, 2009 at 1:07 am goobimama.blogspot.com

My mistake. Corrected.

As for creating the 11th signature, it will be the most recently modified .webarchive in the folder (arrange the files by Date Modified). I thought of adding it in the tutorial, but didn’t know how to include it without bringing in the word clutter.

@yash: Hmm. No idea. That unicode stuff always scares me. Will check up on it though, since you like devnagri so much.

   

Steve519 January 2, 2009 at 1:43 am platformnation.com

Thanks so much for your help. That worked perfectly:

http://img.skitch.com/20090101-q3uguq2jbq6m529p6w4hhh47bq.jpg

I do have a question though, any idea how to make it look better on the iPhone? this is what it looks like

http://img.skitch.com/20090101-pan8717pse6f8ef9d2nafixx5x.jpg

its the dotted line that goes through my twitter name that I want to adjust, any way to make it appear under everything else on the iPhone?

   

Milind Alvares January 2, 2009 at 1:54 am goobimama.blogspot.com

Hmm. I didn’t think of iPhone optimisation. I’ve been working on it a bit, and I’ve updated my sample code.

In the first tag itself (div), I changed ‘height’ to ‘min-height’, and I added a ‘min-width: 530px’ to the style. This has effectively solved the issue. It still doesn’t look as pretty as on the desktop, but there’s no garbled or line cutting.

http://smokingapples.com/wp-content/uploads/2009/01/photo-7.jpg

If you have any problems, let me know.

   

Steve519 January 2, 2009 at 2:26 am platformnation.com

ah, that works. Thanks Milind!

   

Benjamin January 2, 2009 at 2:48 am

Excellent guide Miland. My contacts won’t know what hit them! Now to figure out how to edit all that code….

   

Vanni January 2, 2009 at 4:54 am

Thank-you very much… i have now figured out the process…. i now have two fully html compliant sigs.

Cheers and Happy New Year

   

Nathaniel January 2, 2009 at 8:25 pm

Really cool article. I won’t be showing this to my friends though. Don’t want them to have a cool sig as me!

   

Samuel January 2, 2009 at 11:41 pm web.me.com/somhairle

That’s so cool thanks for that!

At the moment however I’m confined to using the same image dimensions as from your example (64x49). How can I make the image area bigger without messing up the layout? I’ve looked through the html code and can’t see what I should change.

Anyway, thanks!

   

Milind Alvares January 3, 2009 at 12:13 am goobimama.blogspot.com

You need to increase the “min-height” of the main [div] tag. You will also need to increase the line-height to even out the spacing between the text lines to make room for the taller image. If you need any more assistance with his send us an email using our contact form so we can solve this issue properly.

   

Chris Giammona January 4, 2009 at 11:17 am

Thanks, this worked very well. The only issue that I am finding is that many people do not have their email clients set to download pictures automatically and thus do not see the logo until they allow the download.

Chris

   

Stu January 9, 2009 at 8:21 am

Milind,

Could a base64 image be embedded so as not to require a download from an external server?

   

Chris January 28, 2009 at 9:49 pm chrisgibbons.net

Weird… I have not signature folder under mail>>>Lib.. etc

Just get a file Mailaccounts.plist

Any ideas?

   

Milind Alvares January 28, 2009 at 9:55 pm goobimama.blogspot.com

Did you create a signature first in Mail? If you don’t create one it won’t make that folder.

   

Chris January 28, 2009 at 10:20 pm chrisgibbons.net

Yep… it’s strange because the only file in the “MAIL” folder is mailaccounts.plist.
Nothing else.

I have 3 signatures set up… have i broke it?

   

Milind Alvares January 28, 2009 at 10:56 pm goobimama.blogspot.com

I have a feeling you are going through the Library folder of your main system. You need to navigate to Macintosh HD » Users » Your home folder » Library » etc. Notice in the screenshot accompanying that text, the path bar shows where I am.

You seem to be going to Mac HD » Library » Mail » Etc. As even in my case, it shows that same plist file.

David February 12, 2009 at 6:19 pm

This loks great in Mail… but

Doesn’t format correctly in outlook at all!

WHile i use mail, many people is send to will use outlook!

It’s not a million miles away, just the padding and spacing is not quite right….

Anyone know how to fix this???

   

Milind Alvares February 12, 2009 at 7:00 pm goobimama.blogspot.com

@David: Will try it out in Outlook and see if I can work out a fix for it.

   

@Milind Alvares February 12, 2009 at 7:03 pm

Wow! I never expected that response! Fantastic!

Let me know if you need my help testing!

   

George February 15, 2009 at 9:33 pm magekfilmworks.com

How do I download the Sample code. I right click on it and nothing happened. Im using Safari.

   

Milind Alvares February 15, 2009 at 9:51 pm goobimama.blogspot.com

Yep. Right click on the text “Sample code” which is currently a link. Then select “Download linked file” and it should go to your downloads folder. Here’s the link file anyway: http://smokingapples.com/siggyhelp.html

   

George February 15, 2009 at 11:18 pm magekfilmworks.com

No Success creating the siggy. It just shows all of the code in the email. Maybe I edited it wrong.

   

George February 15, 2009 at 11:20 pm magekfilmworks.com

Can you tell me what text or HTML editor you used Milind.

George

   

Milind Alvares February 15, 2009 at 11:45 pm goobimama.blogspot.com

I used Coda to edit the HTML but you can use TextEdit. Like I mentioned, you need to make sure TextEdit doesn’t render your code.

Oh, and try and follow the guide step by step. Just read through it again.

If you want more help with this send us an email using our contact form and we’ll get you sorted out.

   

noreenmachine March 10, 2009 at 4:13 am

Hey. Used the code, works great. However, I thought the point of using code for an e-sig is to not give the ability to the user to change colours, add text, make things bigger, etc. We are trying to standardize and brand ourselves. So…. is there a way for users not to be able to monkey with their signatures when they are composing?

Thanks.

   

Alex March 11, 2009 at 7:21 pm verystudio.net

Hi. I have setup a new signature for a client using your method above, everything works fine, but I’d like to be able to change the image they have in their signature from time to time. I uploaded a new image over the top of the original but my Mail program still sees the old image, however if i email anybody else who has not seen the old image with the new signature (and image) they see the new image. I have googled clearing mail cache but to no avail, there is no cache in my Library/Caches/Mail folder…

Any ideas?

   

vanni March 11, 2009 at 8:29 pm

are the old and new images named differently or do they have the same name?

Perhaps the images are cached in the receivers system?

   

Alex March 11, 2009 at 8:43 pm verystudio.net

we basically replaced the image on the server with a file of the same name so they don’t have to change the code in the signature to update the image

i think you’re right about the cache’ing but we can’t clear the cache from within Mail, any ideas?

   

Milind Alvares March 11, 2009 at 11:47 pm goobimama.blogspot.com

Has to be a caching issue. I’ve found that Mail shows my signature even when my internet is not connected. I guess the only option is to change the link of the image.

   

Alex March 12, 2009 at 12:47 am verystudio.net

I have just discovered that other people who we send the email too see the updated image - having previously sent them the email signature with the old image in. I can’t work this out for the life of me, changing the link will be a bit to technical for the client who I have developed the signatures for. the idea was that all they had to do was upload an image via ftp and voila their signature image is changed…oh well back to the drawing board.

   

Masayo Anderson March 21, 2009 at 10:39 am worldlink-tel.com

@Alex

Your clients can just upload a new file with the same name. Some recipients will see the new file (old one not cached). Some recipients will see the old file (old one cached). Some recipients will never see any file without extra work because their email program doesn’t display external images. Some recipients will never see any file because they view email messages in plain text instead of html!

My point is that the recipient has the last say in how messages are viewed. A good thing in my opinion. The same goes for web pages, especially font size.

   

blanny March 25, 2009 at 11:53 pm

Aaaargh! What am I doing wrong? I’m certain I’ve followed the instructions to the letter but the image I’ve used won’t display although all the text does? I have hosted the image on a remote server. Sorry guys…

   

Milind Alvares March 26, 2009 at 4:05 am goobimama.blogspot.com

If you could send me your code to my-first-name@smokingapples.com I could take a look at what’s going wrong. :)

Milind Alvares March 27, 2009 at 11:18 pm goobimama.blogspot.com

Attention: Guys. While we do get emails sent to my-first-name@smokingapples.com, I was actually being clever in hiding my actual email ID from spammers. my-first-name is actually milind :)

   

amy hoffmann April 8, 2009 at 8:31 am

Hi Milind
I thought I had it! I scanned my sig, saved it as a picture, pasted it into my email signature spot in the third column and when i write an email it shows up but when the email arrives in a person’s mailbox the signature isn’t there…I sent it to myself and a couple of friends, and of course my mom, nobody is getting it. Any advice?
Thanks!
Amy

   

Jim April 9, 2009 at 9:45 pm fbz.geocaches.org

Hi,
Followed the instructions but a small box with a question mark ? shows in the signature where the images should be. Not sure why, as the image shows just fine if I open the Web archive file directly in the browser. strange…

   

Tony April 16, 2009 at 7:04 pm

I was able to make a successful signature, but when I reply to a message the image in my signature is missing and replaced with a “?”

   

Jennifer April 24, 2009 at 2:40 am

Hello. I am creating a signature for myself in Dreamweaver CS4. I used the code from the template and it worked out great. As far as getting my link and image to work correctly I am having some difficulties. This is my problem- I just started using CSS so I am a NOOB for sure! I get everything to work in my email except the image does not show up it has a box with a “?” and my link does nothing either. I have put the image on the server I use for the website-is that right? Can someone plz help me out. Much appreciated. THANK YOU!

*Jennifer

   

Jim April 24, 2009 at 6:36 pm mytechmusings.com

I, too experienced the “?” mark but after sending a few test e-mails I realized the image in the signature WAS being parsed correctly and added as expected.

   

Milind Alvares April 24, 2009 at 8:04 pm soggysh.it

@everyone with difficulties: Make sure you include the full url to the image. Eg., “http://sa.com/images/image1.jpg” instead of just “image1.jpg” or something like that. It will look fine while previewing in your local browser or Dreamweaver, but won’t show up while in Mail. Same goes for link urls.

Best,

Milind

Jennifer April 24, 2009 at 10:53 pm

Awesome! Just looks INCREDIBLE! Thank you so much Milind Alvares for taking time to show me the right way of creating my signature. Also, thank you Jim for the tip. Great Tutorial! I will always remember this one and only grow from it. Great working with you!

Always designing the world,

*Jennifer Joost*

   

Colin May 20, 2009 at 4:13 am

What can I do if the image I want to use is not externally hosted?

   

Milind Alvares May 20, 2009 at 11:44 am soggysh.it

I don’t think there’s anything you can do. You will have to manually dump in the image every time you compose the email. Perhaps I’m wrong (but I don’t think I am).

   

Jennifer May 20, 2009 at 8:20 pm pictographics.net/index.html

I did not have an external host or did I?

What I did with my signature is posted it on photobucket and attached a link to that photo.
ex:

~Much Love~

*Jennifer Joost*

   

Jennifer May 20, 2009 at 8:22 pm pictographics.net/index.html

So my code did not show up- email me at thinkpositive11@gmail.com

   

Milind Alvares May 21, 2009 at 12:05 am soggysh.it

Photobucket is an external source, so yes, you did in fact use an external host. (Code showed up in my mailbox just fine. :) )

NativePaul May 26, 2009 at 6:46 pm nativenoise.co.za

This seems to work across most platforms but there is still a major issue with Outlook (or Windows Mail).

The image displays as a square with an x in it. The reader has to click the info bar to download the image and see the signature properly… in my experience, most people won’t bother, so Outlook users won’t see your signature without changing their image download settings.

   

Tur May 31, 2009 at 2:04 am exagro-aloe.com

Awesome !! Thanks very much for that . look very good and easy..

My best .

Tur

   

Caketaker June 19, 2009 at 4:16 am

Thanks for this - it solved a big mystery for me 90%. However, I’m trying to use a signature that I created in Dreamweaver with various images and the images aren’t showing up. I think I followed the instructions to a “T” but nothing works. When I preview the webarchive file in my browser, everything is there. When I try to pop the signature into an email I get only text and background. Any ideas?

   

Milind Alvares June 19, 2009 at 4:20 am soggysh.it

You need to host your image on an external server, otherwise it won’t work. Notice how the image link is inserted in the demo siggy.html file.

   

RJ June 19, 2009 at 8:33 pm conchunity.org

hi, and thanks for this. i have been using the signature for a few months, and then all of a sudden the image stopped appearing, even though the whole signature is working in firefox/safari browsers correctly. the image is hosted on imageshack and it’s still there too. any thoughts about why the siggie isn’t working in apple mail, but it’s working in the browser? thanks!

   

Ed Cruz July 4, 2009 at 12:20 pm cruzdesign.com

Thanks for the info. Got it the first time. The instructions were easy to follow and it was great to have the code to build from.

There was only one thing that I found confusing, in the Getting Your Hands Dirty, after the 3 rules, the second sentence reads ‘Then open the file in Safari (drag it to the Safari icon) and then save it as a ‘.webarchive’ file.’ It wasn’t clear to me where the icon is. It’s easier to just do a ‘Save As’ in Safari and select ‘Web Archive’ from the drop down menu.

It might also be helpful to provide the reduced code for those who just want to have an image appear and make it link to their website.

   

Leave a Comment

Previous post:

Next post: