Creating complex HTML email signatures in Microsoft Outlook 2011 for Mac

  • Twitter
  • Facebook
  • StumbleUpon
  • Reddit
  • Digg
  • Del.icio.us
  • E-mail
Posted April 30, 2011 by Brian Yuen Short URL: http://bcw.im/32fb Creating complex HTML email signatures in Microsoft Outlook 2011 for Mac

Microsoft released it's latest office suite in September of 2010, which in my opinion is a huge leap forward in terms of usability and responsiveness from earlier versions available for the Mac.  Included in the office suite is Outlook 2011, a step up from the monstrosity known as Entourage, which was a watered down attempt at bringing Outlook to the Mac since OS9.

With so many features and knickknacks under the hood, there has to be an easy way to make a HTML email signature with an image right? WRONG!  Once again, Microsoft has made it extremely difficult to include complex email signatures, especially those that include remote images.

But fear not! Today, we're going to walk you through how to create these complex HTML signatures, and also include a remote image.  This isn't the first "how-to" that explains how to achieve this, but not many go over including a remote image that doesn't come in the inbox looking like there's an attachment associated with it.

First, here's what you'll need:

We'll also assume that:

Step 1
Decide what sort of information you want to display on your signature.  For this demonstration, we'll use first/last name, email, telephone, company name and logo.

Step 2
Create your signature in your HTML editor of choice (or download the one that's available in the download link below and edit it with your plain text HTML editor).  If applicable, upload your image to the web server taking note of the public path (http://www.yourdomain.com/images/logo.gif) and inserting it into your HTML signature.  Instructions on how to do that here with Dropbox. For the more advanced users, Basic inline CSS is alright to use, as long as it's not used to position items...tables only!

Step 3
Once you have your email signature designed and laid out just as you like, save the file to your Desktop and call it "signature.html" and review it if you wish

Step 4
Open the "signature.html" file that you've just created in Chrome or Firefox (not tested with other browsers)

Step 5
With the browser open and on the foreground and your signature file displayed, press Command + A on your keyboard to "Select All"



Step 6
Open Outlook > Select "Preferences" > and "Signatures"



Step 7
Click the plus button on the lower left to create a new signature. If there’s content in the big right signature window after you've clicked the plus icon, delete it. In my case, it was displaying my first and last name.




Step 8
Press Command + v on your keyboard to paste in your signature that you copied from your browser



Step 9
Set your "Default Signatures" and rejoice!

 

Download the HTML email signature template here.

Here's what other people had to say

Picture of Jack McDonald
Jack McDonald
May 12, 2011 2:26 pm

Brian,

Thanks much. It took me a while, but finally got my new signature for Outlook 2011 working:

http://athleticsmedia.quinnipiac.edu/athletics/jack’s-html-signature.html

Thanks Much for the good advice and help

Picture of Jackie
Jackie
June 16, 2011 11:27 pm

Thanks so much for this. I’ve struggled for a while trying to get a HTML sig to appear in Outlook 2011; this solved it in a snap. Too easy!

Picture of Josh Doughty
Josh Doughty
July 28, 2011 2:39 pm

Thanks for the above, however, it appears that when the email signature is inserted, the hyperlinks, URL’s, Twitter and Facebook icons all lose their click-to-web functionality, is this normal?

Does Outlook 2011 accept HTML signatures with integrated URLS when created in Adobe HTML editors?

Hope you can help, as I don’t want to revert to Apple mail!

Thanks

Picture of Brian Yuen
.(JavaScript must be enabled to view this email address) author
July 28, 2011 3:12 pm

@Josh,
The hyperlinks in the signature should all be working, whether it be email, Twitter, Facebook, etc.  What is happening when the link is clicked?

Picture of James Deen
James Deen
August 11, 2011 12:25 pm

Great advice but when people receive my email the image does not show… only the standard text…. am I being a bit daft?

Picture of Brian Yuen
.(JavaScript must be enabled to view this email address) author
August 11, 2011 12:34 pm

@James
A couple of things:
1. Is the image showing up for you when you send an email to yourself?

2. Some email clients will block remote images as a default for security reasons. Unfortunately we have no control over this, as this is a user setting.  For a more detailed explanation on image blocking email clients, see this article http://www.campaignmonitor.com/blog/post/2559/current-conditions-and-best-pr-1/

Picture of James Gonsman
James Gonsman
August 16, 2011 9:24 am

Thanks Brian.  I have 100+ quotes that I like to use randomly in my signature.  When I initially created the signatures, I was able to arrange them alphabetically to make it easy to select one or another for a particular recipient when the random signature was not quite right.  Now, when I add a new signature (new quote) it is created at the bottom of the list and I am unable to move it or resort the list.  Any thoughts?

Picture of sheri
sheri
August 20, 2011 5:23 pm

Anyone want to help me?  smile
I can upload to an FTP server the FB and Twitter icons but I don’t have an HTML editor or know what to do at that point.  If interested please let me know!

Thanks for the great post!

Picture of Henning Orth
Henning Orth
August 23, 2011 5:01 am

Thanks so much, didn’t know the copy & paste would work like this. Still don’t get why there is no “real” signature-editor in all those mail-clients…

Kudos!
Henning

Picture of Mohamed
Mohamed
October 7, 2011 3:45 am

Just tried it!

Amazing! Thank you!

BR,
Mohamed

Picture of Luciano Di Toto
Luciano Di Toto
October 7, 2011 7:14 pm

i have a deubt, if you have a complex signature with css, the css is embebed in the same html, but if you make copy and pase, y doesn´t paste the css.

i have this problem with mac, because in pc y can “import” a HTML file..

am i clear?  can someone help me?

Best Regards

Luciano

Picture of Laura
Laura
October 12, 2011 11:54 am

AMAZING!  This just saved me a million hours of annoying trial and error.

Picture of Alma
Alma
October 26, 2011 7:33 am

I followed your steps, but the links are not working, nothing happens when I click on the signature…can you help? What I pasted shows up as an image.

Picture of Brian Yuen
.(JavaScript must be enabled to view this email address) author
October 26, 2011 10:35 am

Alma,
Make sure your link looks something like this

<a href="http://yourlink.com">Your Text Link</a

Also, it wouldn’t be bad idea to run your HTML into a validation service like this one to check for any errors.

Picture of Heather
Heather
November 7, 2011 10:39 am

This works for me, but my logo doesn’t load when viewing emails on my BlackBerry. Anybody know how to resolve this?

Picture of Suzanne
Suzanne
November 7, 2011 7:25 pm

Thank you!!! Worked like a charm. So excited to experiment with this. Made my day and saved me tons of time. Thanks for sharing!

Picture of Kristina
Kristina
November 10, 2011 3:21 pm

Do you how to do this on a PC? It works perfectly on a MAC but when i load the HTML to a PC the photos still come in as attachments. Any thoughts?

Picture of Esben
Esben
November 17, 2011 3:28 am

You don’t need a html editor. Textwriter will be sifficient.

Picture of Jayme
Jayme
December 1, 2011 2:56 pm

Thank you for this!

The only thing that didn’t work was my CSS formatting. It seems to get lost in translation when pasting into the Signature field. Is there a way to correct this?

Picture of Brian Yuen
.(JavaScript must be enabled to view this email address) author
December 1, 2011 3:17 pm

Jayme,
Make sure that you’re CSS in inline and not external or internal. Some email clients will strip them out. See this link for the differences http://www.w3schools.com/css/css_howto.asp

Also it wouldn’t hurt to run your HTML through a validator.

http://validator.w3.org/#validate_by_input

Picture of Tom McKay
Tom McKay
January 30, 2012 8:07 am

This seem quite straight forward, problem is on a Mac how to add a Facebook icon in the Outlook 2011 email signature? Any hep there?

Thanks,

Picture of chris
chris
February 11, 2012 9:14 am

I have the signature working fine but I only want it to show up when I compose a new email, not when I reply to an existing thread. Is there a setting for this in Outlook on MAC?

Picture of Bruce
Bruce
February 11, 2012 4:07 pm

There is an easy way to use an signature image with an imbedded hyperlink in Outlook 2011 for Mac. Just add image in Mac Mail preferences, hyperlink it then send a message to yourself with the signature containing the image. Then drag the image into an Outlook signature.

Picture of Mark waugh
Mark waugh
March 17, 2012 1:23 am

That’s good, that’s really good to know about this topics input. Whatever you allocated here about complex HTML email signatures in Microsoft Outlook 2011 for Mac. Thanks mate.

Picture of Gordon Waterman
Gordon Waterman
March 22, 2012 1:52 am

I know that its not easy to Create complex HTML email signatures in Microsoft Outlook 2011 for Mac. I think that it would be great to learn how to do it. I know that many people are interested on learning it.

Picture of Gordon Franklin
Gordon Franklin
March 24, 2012 9:05 pm

Brian,

I was having a lot of trouble trying to make a Signature appear in my Outlook 2011. Good thing I found this post of yours and solved my problem in a blink. Thank you!

Picture of Amy
Amy
March 26, 2012 1:12 pm

Brian- Did you ever figure out how to get rid of your signature when you’re just replying to another email? I have a lengthy signature & don’t want it to show up in replies.

Can anyone else help with this?

Picture of Darrell
Darrell
April 5, 2012 10:58 pm

I had been searching all day for help with setting up a custom html email signature before I ran across your link. I read through it once, followed your directions and in a matter of minutes I had finished. I had the html script already done and uploaded to my server but con’t find a way to get it into the signature area.

Your instructions were simple and to the point. Thanks again

Picture of Whitney
Whitney
April 6, 2012 2:39 am

@Amy,

If you don’t set your signature to show automatically, you can just click on the signature for the first email of any given thread.

Maybe I am just impaired, but when I open the html in a browser, it won’t let me select all. Thoughts?

Picture of Chris
Chris
April 29, 2012 11:47 pm

@Darrell… likewise, had the code already done and now its working… brilliant and thanks for the tip!

Picture of Gretel
Gretel
May 24, 2012 9:30 am

Finally, someone has the right information. Thank you. I’ve been trying to do html signatures without success for a while. This was so simple.

Picture of VIJAY KUMAR
VIJAY KUMAR
June 1, 2012 2:45 am

Dear All,

I am using outlook 2011 and i am unable to receive any excel table in mail body.

please suggest.

Picture of Fred
Fred
June 13, 2012 2:23 pm

To the comment above about using an HTML editor, usually a text editor (like Notepad on PC) is the best bet as HTML is pretty basic and easy to learn and adding a few tags is no problem, also using the text-only editor will ensure the code isn’t overly formatted when you FTP a page to the server. hope this helps

Picture of Mette
Mette
June 29, 2012 5:20 am

The signature works fine for me. Thanks for the tutorial.

BUT I want to change the image in the signature, and I have saved a new image on the web server. (Same name as the first one I used), and I hoped that Outlook would automatically show the new image (We are 40 people who uses this, so I hoped I could avoid making changes on everyones auto signature AGAIN).. But it seems like Outlook is caching the first image, and it will only show this first image, even if I make a brand new signature.
Anyone who knows what to do ?

Picture of Michael Allton
Michael Allton
July 11, 2012 1:07 pm

Thanks so much! This worked perfectly.

Picture of sharath
sharath
July 17, 2012 11:09 pm

@Mette (me too facing the same prbm)

BUT I want to change the image in the signature, and I have saved a new image on the web server. (Same name as the first one I used), and I hoped that Outlook would automatically show the new image (We are 40 people who uses this, so I hoped I could avoid making changes on everyones auto signature AGAIN).. But it seems like Outlook is caching the first image, and it will only show this first image, even if I make a brand new signature.
Anyone who knows what to do ?

Picture of web design bournemouth
web design bournemouth
July 27, 2012 1:38 pm

Thanks Brian, I also thought there would be a simple solution to this and have been looking for it for ages, this has really helped. I’ve read quite a few of your articles this evening and would have to say you really know your stuff.

Picture of Ken Klawans
Ken Klawans
August 2, 2012 1:35 am

Brian-

Struggling with the instructions above for the past few hours and still can’t get it.  One question/clarification.  If I’m going to host the image remotely (i.e. I have it in Dropbox public folder as described above in Step 2), do I still need to drag the image from my editor to my Mail~Preferences~email signature?  I thought instead of pulling the image from my e-mail client, I would just tell it to “fetch” the image from the remote location (Dropbox)?  I guess I’m not following the connection from what I did in Step 2 and the beginning of Step 3.

Thank you!!

What about you?

Name*

Email*

Website

Comment*

Remember my personal information
Notify me of follow-up comments?