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:
- A Mac running OSX
- Microsoft Office 2011 with Outlook
- A web hosting provider to house your image (If you don't have one, I would advise using Dropbox to host your image for the time being. Instructions on how to do that here.)
- A HTML editor (Coda, TextMate, Dreamweaver, or whatever you're comfortable with just as long as it's not MS Word.)
We'll also assume that:
- You have basic HTML know how
- Capable of uploading an image file to a web server, or a Dropbox account as stated above
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"
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
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
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!
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
@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?
Great advice but when people receive my email the image does not show… only the standard text…. am I being a bit daft?
@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/
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?
Anyone want to help me? 
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!
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
Just tried it!
Amazing! Thank you!
BR,
Mohamed
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
AMAZING! This just saved me a million hours of annoying trial and error.
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.
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.
This works for me, but my logo doesn’t load when viewing emails on my BlackBerry. Anybody know how to resolve this?
Thank you!!! Worked like a charm. So excited to experiment with this. Made my day and saved me tons of time. Thanks for sharing!
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?
You don’t need a html editor. Textwriter will be sifficient.
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?
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
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,
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?
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.
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.
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.
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!
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?
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
@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?
@Darrell… likewise, had the code already done and now its working… brilliant and thanks for the tip!
Thank you for taking the time to create these instructions! This is by far the best instruction available for this topic.
