How to Create HTML Email Signatures for Microsoft Outlook 2011 On a Mac

How to Create HTML Email Signatures for Microsoft Outlook 2011 On a Mac

Having a HTML signature in your emails is a great way to look professional, unique and to promote yourself but creating one isn’t so straightforward. You have to design your signature layout, write up the HTML codes and know how to install it into your preferred email program. In this tutorial, I’ll go over some HTML tips for writing up the HTML codes and give instructions on how to install the email signature into Microsoft Outlook 2011 on a Mac.

There are 2 sections in this tutorial:
Section 1: HTML Tips For Coding Your Email Signature
Section 2: Installing your HTML signature into Outlook 2011 on your Mac

If you have basic HTML skills and know how to work with a web server, you will learn how to write up your HTML codes correctly by following Section 1. If you don’t know anything about HTML coding or just don’t have the time to deal with it, you may consider hiring MYDESIGNPAD to do it for you. Please visit www.mydesignpad.com/htmlsignature for more info. Go straight to Section 2 if you already have your HTML email signature file created and just need installation help.

••• SECTION 1: HTML SIGNATURE CREATION •••

Step 1.1: Design Consideration

Today, emails are viewed on desktop computers, laptops and on tablets and smart phones. It is best to keep the width of your HTML email signature as narrow as possible for the best result. Most modern mobile devices have a default width of 640 pixels so it is best to keep your design under that to ensure that the layout doesn’t break on smaller screens. From experience, designs that have a width of 320 pixels and under are the most consistent. NOTE: If your signature design for Outlook 2011 have a width larger than 320 pixels, you will have to manually adjust the width of your signature each time you compose a new email.

View sample signatures that I have created for others.

Step 1.2: Signature Information

MYDESIGNPAD Signature design 2012

Decide what and how much info you want to display on your signature. For this demonstration, I’ll be using my own HTML email signature design with a picture link to my website, name, title, email and some other text links. Feel free to use my design as a template. To see the HTML codes, find “View Source” in your browser menu.

Step 1.3: Writing the HTML Codes

Here are some basic but important notes to keep in mind as you design your signature. One major obstacle in designing HTML e-mail templates is that there are so many different e-mail clients out there (most if not all can’t handle CSS and HTML like our internet browsers can) so you have to keep your design and codes as simple and straight forward as possible.

  • Use tables for basic layout. The CSS float property is not supported in Gmail or Outlook, making CSS layouts impractical.
  • Use inline CSS. The style tag is not supported in Gmail, and support for CSS selectors is spotty.
  • Use only basic CSS properties. E-mail clients tend to be very picky about which CSS properties they support. Campaign Monitor has a great summary of CSS support in e-mail to use for reference.
  • Use absolute URLs. Relative paths won’t work for an e-mail signature. So all your links need to be absolute URLs.
  • Link to images. I personally dislike e-mail signature images as attachments (it makes it easy to mistaken that image as a legitimate attachment). Because of this, I recommend linking to your images by placing them on a web server rather than including them as attachments. See Step 4 for more info.
  • Exclude HTML, HEAD, and BODY tags. When we get ready to save your HTML signature into Mail, make sure that only the relevant HTML is included in your document.

Step 1.4: Saving and Uploading your images to a web server

Since we want the email signature to load quickly, make sure to optimize your image with Adobe Photoshop by doing a “Save for Web.” Upload your images to your web server and copy the public path. The public path (absolute URL) should look something like this: “http://www.yourdomain.com/images/logo.gif” Copy image link and insert it into the appropriate img tags of your HTML file.

Step 1.5: Save File and Preview

Once you have your email signature coded, save the HTML file to your Desktop and call it “signature.html” Locate file and open it with Safari or Firefox (not tested with other browsers).

••• SECTION 2: HTML SIGNATURE INSTALLATION •••

Step 2.1: Copy Signature Design

With your “signature.html” file opened on Safari or Firefox, press Command+A on your keyboard to “Select All.” Then press Command+C to copy design.

Copying HTML signature in Safari

Step 2.2: Create Placeholder Signature

Open Outlook > Preferences > Signatures. Click the plus button on the lower left to create a new signature. Give it a name. If there’s content in the big right signature window after you’ve clicked the plus icon, delete it. It usually displays your first and last name. In my case, it’s MYDESIGNPAD.

Opening Outlook preferences

Signature Settings

Add signature

Step 2.3: Replace Default Signature

Click anywhere on the big right signature window to have it selected, press Command+V on your keyboard to paste in the signature design that you copied from your browser.

Inserting HTML signature

Step 2.4: Confirm Default Signatures Setting.

Click the “Default Signatures…” button on the lower right. Click to open pop-up window on the right column. Select the signature that you created and press “Ok.” Close window and quit Outlook. Then reopen Outlook. Open up a new compose email window and your new signature should be there.

Confirm default signature

Testing new signature

Summing Up

Feel free to contact me if you run into any problems creating your very own HTML signature. I’ll be pleased to see your creative HTML email signature so please post your link in the comment area. Cheers!

If creating your own HTML signature seems a bit too much work or you just don’t have the time for it, you may consider having MYDESIGNPAD do it for you. Please visit www.mydesignpad.com/htmlsignature for more info. You may also contact me directly if you have any other questions or comments about this service.

Follow responses through the RSS 2.0 feed | October 23rd, 2012 | 106,457 views

42 comments »

  1. October 23rd, 2012

    Ava says:

    good job!

  2. January 2nd, 2013

    Kiki says:

    Thanks – very nice steps. I’m wondering if you’ve ever had any difficulty sending HTML signatures from an Exchange account? I can successfully send a signature from Gmail (through Outlook) and it works fine, but getting it to work from my work email (which uses Exchange), it does not send the images properly (when I open the email in Gmail, Hotmail, etc.) — happen to have any insight or clues about that or know of any solutions?

  3. January 14th, 2013

    Mark says:

    Nice guide – only comment would be to add,

    “Once the signature is selected (it will go blue), press “Command + C” to copy it.” to section 2.1.

    Thanks! :)

  4. February 16th, 2013

    Megan says:

    Ive done all these steps and i cannot get my signature to show up every time i sent an email?

  5. February 26th, 2013

    Excellent thanks. MS have changed the way it works, so its more tricky but your tutorial helped alot.

  6. February 26th, 2013

    Tim Cai says:

    Thanks a lot for the info. May you be kind enough to share with us how MS have changed and in what version and operating system you are talking about? Thanks in advance.

  7. February 27th, 2013

    Georgia says:

    Good Morning – I’ve created the HTML using Dreamweaver and have saved all of the image files on my public dropbox folder, copied the dropbox public link, etc. and the signature shows up fine when I test it… however, when I copy/paste the email and send a test email, the icons do not go to the appropriate social media page?

    http://dl.dropbox.com/u/95652721/signature.html

  8. March 20th, 2013

    Excellent idea, thanks. I`ll use it for my sig.

  9. April 9th, 2013

    james says:

    thank you. on my PC i can have one signature for new e-mails and another for reply / forwarded mails. is that possible on outlook for mac please?

  10. April 9th, 2013

    Tim Cai says:

    James, on Apple Mail, multiple signatures may be assigned to each email account. When composing a new message or for a reply, there is an option to select which signature you want to use if there is more than one available. On Outlook for Mac, I am not sure. If I find out, I’ll be sure to post about it here. If you figure it out before me, please help me and others by posting your answer here. Thanks!

  11. April 9th, 2013

    james says:

    thank you. ok, same as apple mail. as long as you have created more than one signature you can chose which one to use once you are in the body of the compose area.

  12. April 16th, 2013

    Great tutorial Tim! I’m getting ready to install the signatures in Outlook for Windows on my client’s computers. How close is the instructions above to installing on a windows machine?
    Thanks in advance!

  13. April 16th, 2013

    Tim Cai says:

    Here are instructions to install signature into Outlook 2010 on a PC. http://mydesignpad.com/how-to-install-html-email-signature-for-microsoft-outlook-2010-windows/

  14. April 24th, 2013

    Justyna says:

    Hi!
    Thanks for sharing!!
    Everything works fine when email is sent to a regular email users..hotmail, yahoo,gmail etc..but people that use exchange email system at work will still see the image/logo as an attachment. Any ideas how to solve this Problem?
    Any hep much appreciated:0

  15. May 30th, 2013

    Sowmya RK says:

    I have designed a signature using html. The tool is dreamweaver. the signature is working fine but it is marking as junk mail i outlook .Please anyone help me

  16. May 30th, 2013

    Sowmya says:

    Please anyone help me for solving this. It has became crucial for me.How to disable the mails to be moved to junk mail.I have used this steps only for designing html signature but it is moving to junk box. please anyone help me

  17. May 30th, 2013

    Sowmya RK says:

    Hi Tim pls help me in this

  18. May 31st, 2013

    Tim Cai says:

    Let me look into this further for you. I’ll get back to you soon by commenting here.

  19. May 31st, 2013

    Sowmya says:

    Thank you Tim. I have fallowed your steps and used your source code only.It is working pretty but only thing it is moving to junk mail box.

  20. May 31st, 2013

    Tim Cai says:

    It is going to your recipient’s junk mail box? Have you ever send to that email address before? Does the recipient have your email address in their address book? Where are your images hosted and how big are the images?

  21. May 31st, 2013

    Sowmya says:

    Yes it is going to recipient’s junk mail box.Yes i have sent before with old signature.Now it is going to junk mail box.Yes they have my address in their address book.Am storing the images over here. %userprofile%\Application Data\Microsoft\Signatures. where my signature files stores.Am using it in outlook so.100x100px logo and small icons for social media.

  22. June 4th, 2013

    Akira says:

    thank you very much for your tips.

  23. August 8th, 2013

    Shubha says:

    Very good instructions!!

    I was struggling with Mac Outlook 2011. I managed to get it right in one go.

    Thanks a ton.
    Shubha

  24. September 3rd, 2013

    ninja says:

    Worked great for me, thanks!

  25. September 19th, 2013

    Anselm says:

    Is it possible to link a vcf card without opening a browser?

  26. September 19th, 2013

    Tim Cai says:

    As far as I know, you cannot link to a vcf without opening a broswer. As the vcf card needs to be downloaded in order for it to sync into your address book, it have to open up a web browser for the download process.

  27. October 25th, 2013

    Bridget says:

    I can’t seem to get my FB & Twitter buttons to come across….at all. Is this something to do with Outlook?

  28. November 7th, 2013

    Frank says:

    I Can´t create hyperlink on the image, Pls anyone help me

  29. November 8th, 2013

    Stacy says:

    I am having trouble with the font changing when it is sent and then replied… any ideas? I have tried everything, and nothing is working. Help!

  30. January 15th, 2014

    I am having an issue with my outlook email signature. I created an html files and hosted the images on my ftp site. When I send a email out to test it. Outlook blocks all of my images leaving a black box where I had made a background color. I get emails from some people that I dont have to download the images to see. I know that they are using a html style signature. What are they doing that Im not? Do you have any wisdon you could pass on?

  31. January 26th, 2014

    Superbly clear instructions Tim – you are a legend!

  32. January 30th, 2014

    Sally says:

    Can you tell me how to do this using microsoft outlook 2013 windows?
    Thank you!

  33. February 3rd, 2014

    Tim Cai says:

    Sally, the tutorial post for Outlook 2013 for Windows is in the making. Please check back soon.

  34. March 18th, 2014

    Lee Hazell says:

    Hi, this is really helpful but I am having trouble to get my HTML mailer to work across all platforms. When i email my signature out to a mobile phone it all jumbles up, fonts go massive and the logo jumps all over the place!

    I built the signature in Dreamweaver and have basic skill. Please help me!?

    Thanks!

  35. March 26th, 2014

    Isa says:

    Hi I have a gif animated signature which through Word have transformed in html – works!
    However after copy past (all) into sig Outlook 2011 for Mac the animation and links dont work

    Tried it a few times
    Would you know what could be wrong?
    Thanks

  36. March 28th, 2014

    and where can i edit the html of my signature?
    i’m on a mac and don’t know where the htmlsignature is stored

    thx

  37. March 28th, 2014

    Thiago S says:

    Thanks for the great tutorial! Solved all my e-mails signatures problems.

    ;)

  38. April 9th, 2014

    Dunks says:

    Hi Tim,

    The signature is not appearing when I click share via email from a Microsoft Document. Any solutions to this problem?

  39. April 9th, 2014

    Hello just wanted to give you a quick heads up and let you know a few of the pictures aren’t loading properly.
    I’m not sure why but I think its a linking issue.
    I’ve tried it in two different web browsers
    and both show the same outcome.

  40. April 16th, 2014

    Maik says:

    Do you have any solutions, when outlook is changing the sizes of the fonts sometimes by it self? I wrote a perfect html-code for the signature, defined all system-fonts and sizes, but outlook is so crazy and changed it! Has it something to do with some standard formats in outlook?

    With mac all works fine, but in outlook…

    Thanks

  41. May 8th, 2014

    Miriam says:

    Hi,
    I also made the signature like you did and it worked as well, but only on my mac/outlook. When I send a mail out, the signature brokes. Sometimes direct at the clients mail-program, sometimes, when they send me an answer …

    Does anybody figured out how to fix this?
    I’ve heard about putting an html file on the mac system, but I don’t know where, which folder?!
    For windows, there is a folder for that …

    Looking forward to hear from you :)

  42. July 8th, 2014

    Sowmya says:

    I have used your code. It is useful. Thank you so much for that . I have some doubt that when I set appointmentthe signature wont appear, can you please help me

Leave a comment * Required fields.


About

  • "Sure someone else could have created a greater logo redesign for EME Lighting but I was sold on Tim’s diligence & reliability plus I love our new logo! It is fresh, symbolic of who we are while staying in line with our brand intention."

    - Bill Lee
    CEO of EME Lighting
  • "Tim is a trustworthy and effective designer. He redesigned the entire visual identity system for my company & I am extremely pleased with it. As the CEO of a company with over 3000 employees, I would recommend Timmy to anyone looking to have some serious design work done."

    - Tony Ou
    CEO of Senqiu Lighting
  • "Tim effectively designed my website and newsletter. What impressed me the most was his ability to create the images, style and design I was looking for. I highly recommend him if you are looking for someone reliable, flexible and talented."

    - Christine M.
    Owner of Acupuncturebody
  • "Tim has a great personality that makes him a pleasure to work with. He is focused, hard working & always has an attention to details. He has great curiosity and constantly strives to learn & develop himself taking his work to the next level"

    - Slava S.
    Director of Creative Services at STV
  • "Tim conceptualized original ideas & executed the design brilliantly. He always made sure the highest technical & design standards were met. I could always count on him to translate the client vision into reality."

    - Linda G.
    VP Biz Dev. at Real Estate Arts
  • "Tim is a highly talented designer. He has excellent technology skills, amazing dedication & terrific interpersonal abilities."

    - Michael S.
    AD at Real Estate Arts
  • "Timmy is a very talented designer, he is passionate and reliable, his work is always creative & on time. He’s a good person with lots of energy, which makes him a pleasure to work with."

    - Jess L.
    AD at Sudler & Hennessey
  • "Timmy got a great system for helping you figure out what you want, need & putting those ideas down into a tangible product. He has done 3 sites for me already & anyone I have recommended him to has called me back to thank me."

    - Vahram S.
    Owner of Brooklyn Body