How to setup an HTML signature on OSX Mail and iPhone Mail app.

The other day I’ve been asked to setup the new signature for a brand I’m working with. I thought it was an easy and fast thing to do, but there’s a lot of little issues to make it work on different email client and your iPhone. It took me many hours, but finally I managed how to solve it!

The following guide to some people will sounds like “The Capitan Obvious Guide to HTML Signature” but for some other people it will be helpful to finally have a fancy “stamp” on your Mail app on OSX, and iPhone too.

What you’ll get is a signature with working links to your website, address via Google Maps, clickable phone number, image and info.

How it looks on Mail app on OS X
How it looks on Mail app on your iPhone.
Everything is all set up to create a new contact with all the info pre compiled.

So, download the template here. You’ll find two files, txt and hmtl. I’ll go with the instructions for the txt version, if you’re familiar with HTML you want to use the html file to do your edits and jump directly to point 5, after you dragged the edited HTML in Firefox and copied all the signature.

To all the other people, double click the txt file and do a Command+A to select all the code, now Command+C to copy it.

Using Firefox browser, visit: http://scratchpad.io— a pretty cool HTML/CSS real time editor. You can use Chrome as well, but I noticed some little errors in the iPhone signature, so go with Firefox — download here — DON’T use Safari, it will not work (hey Apple, come on!).

In Scratchpad, delete all the contents on the left side of the screen, so the right side it totally empty and white.

Now do a Command+V to paste all the code we copied in the txt file. And here’s our template, pretty basic with a little image/logo and the basic info of you and your company.

Now let’s see how to make it personal and add it to your Mail app:

  1. On the left side of the page you have all the code that compose the signature. In the green text I wrote in ALL CAPS the elements of the code that you want your signature to link. The grey text is what you’ll actually see in the signature. Whenever you edit the the code, on the right side you’ll see the changes in real time.

Watch out that some of the code is “hidden”, just scroll left/right at the bottom of the page to reveal it.

Do all your edits, change fonts (use a web safe font, is better), spacing, line height, color (don’t use total black #000 otherwise seems like links will become blue on iPhone), if you want the links underlined delete the text-decoration: none; parameter.

2. Upload your image/logo using any image host service, like Imgur. Click Upload Images and select your image (keep it pretty small) once you uploaded it, on the right side you’ll have Share this Image, click More and copy the Direct Link (the one with .jpg extension). I’m not a big fan of images in a signature, but I added it in the template since some of you might want it.

3. Go back to our link on Scratchpad, look at line 5 where we have img src=” ” and paste your new image link between the “”. Bam! Here’s your new image. You can make it bigger and smaller by playing with the Width and Height parameters, you can also change the alignment changing valign=”top” to center or bottom.

4. Now that you edited your new beautiful signature, click anywhere on the right side of the page and select all the contents by doing Command+A and Command+C to copy them.

5. Now let’s go to our Mail app and in the top navigation bar click Mail -> Preferences, a pop up will open and press Signature.

6. On the first panel on the left, select your account. Then click the + below the middle panel and give a name to your signature.

7. Click on the third/right panel, delete all the contents (if any), click Return two times (I like doing this just to directly have some more space at the end of your email body) and paste your new signature with Command+V.

8. You should see your new fancy signature formatted exactly as you designed it in Scratchpad. You’ll have a “?” in the image, don’t panic.

9. Close the Signature panel and click to send a new message. You’ll see on the right side of the email the dropdown menu where to select your signatures, select the new one and, boom! Your signature, with your image.

10. Now, contain your enthusiasm before sending email to all your friends, we have to setup this signature on our iPhone. Right?

Setting up the new HTML signature on your iPhone

1. Send yourself an email with the new signature we created. No message, nothing, it will be easier later.

2. Grab your iPhone and open the email you just sent using the iOS Mail app.

3. Press and hold your finger on your signature (possibly on your name/surname or any white space in it, not on the links) to pop up the little iOS menu, and click Select All and then Copy.

4. Close the Mail app and open your iPhone Settings, scroll down to “Mail, Contacts, Calendar” scroll down again to find Signature and click it.

5. Now scroll to the account where you want to associate the signature (or maybe you want to have the same for all your accounts), delete all the contents and hold your finger to pop up again the system menu. Click Paste and…wtf!? Don’t panic.

6. Grab your phone and shake it like dancing salsa music. Yea, seriously, shake it. It should pop up a message “Undo Change Attributes”, click Undo.

7. Magic.

8. Close Settings and enjoy your new fancy signature!

If you have any questions, if you have anything to add to this guide, or if you’re interested in working with me, please get in touch through my website http://filippomursia.com

Ciao!

p.s. Hey Apple, what about a “import signature” feature? …