April 17, 2014

Socializing Your Email Signature

Trying to add social networking icons to your email signature – or maybe still trying to get your company logo in?  Unfortunately, it’s not as easy as it should be.  Besides some general tips on signatures, this I hope not too confusing post will give you some guidance on how to add and link images to your email signature files.

General Tips

  • Best to keep the contact text portion simple – no fancy fonts, odd colors, multiple colors.
  • Bold or change the color of text you want to pop out – like your name, email, phone number or whatever.
  • Avoid using italics as that’s harder to read on screen.
  • Don’t use small fonts for contact info as cell phone users won’t be able to read it.  Depending on the font, stick with anywhere from 10-12 points.  Disclaimer info can be smaller (no one really reads that….).  8 point is good for that.
  • We all understand the need for disclaimer language…even the “think green/don’t print” stuff…but skip anything else.
  • If you put a smiley face in your business signature, I’m going to have to hurt you….
  • Resize  images before inserting.  Sure, in some mail apps you can inset a gigantic image and resize it in place but it’s still a gigantic image that you’re attaching to every email.
  • Don’t try to size up a small image – it will just look grainy.
  • Depending on how the mail app handles images, your recipient may see your inserted images as attachments.  And by default, some email apps won’t show images – the recipient has to manually “allow” the images to be displayed.
  • If you’ve created a signature file in one mail app, it may not look as intended in another mail app.  Test it out by sending to some friends that use different mail apps and ask for feedback.  But this usually isn’t much of a problem unless you go overboard with images/formatting.

Webmail Apps (Gmail, Yahoo, etc…)

Each of these has their own signature file creation tools.  I have noticed they’re usually buried in your mail options and that sometimes they only work in certain browsers, so if you’re having trouble creating a signature in Firefox, try using Internet Explorer instead.

In general, there are two ways to add an image.  First (and this works in Yahoo Mail) is by copying it to Windows’ Clipboard and then pasting it in your signature file.  If you want social networking icons, copy them directly from your browser (select the image, right click and find the COPY IMAGE option).

The second and typical way is to provide a link to the image.  First a warning – don’t use a link to someone’s image by copying the link location!  Either upload the image(s) to your web server and specify the path (http://mydomain/images/mailsigimage.jpg) or, for WordPress users, use the media directory (upload the image, then copy the image URL).

You can also use a link from a photo sharing service (Flickr for example) that gives you the option to get the HTML code.  In Flickr, its Grab the HTML/BBCode.

First, upload your resized image.  Then click on it and from the Share links, select the HTML option then pull out the link to the image.  You’ll see something like the code below.  Copy the portion in red -  no “, < – just the portion of the image tag (img scr=)  that starts with http and ends with the image file type (jpg in this case).  That’s the link to your image.

<a href=”http://www.flickr.com/photos/youraccountname/5442880919/” title=”100_0080 by youraccountname, on Flickr”><img src=”http://farm6.static.flickr.com/5013/5442880919_e75a83182c_s.jpg” width=”75″ height=”75″ alt=”100_0080″></a>

Once you’ve got your image in the signature editor, you can use the link tool/icon to hyperlink the image to a website. Select the image then click on the link icon in the signature editor.  Enter the URL and insert.

Promotion Tools

Most social networks have “promotional tools” – little snippets of code that you can insert in a web page.  Here’s LinkedIn’s, for example.  You can only use this code in an email signature if you have the option to view the signature’s HTML code (Advanced Editor..Source Code…it can be called different things) or a way to import an HTML file (one you’ve created for your signature in an HTML editor).

But at the very least the images they provide are sized perfectly for email, so right click the image you like, save it and upload it to Flikr, WordPress or your web server if you need an image link.  Or, right click, copy and paste it in your signature editor if allowed.

Outlook

You can create multiple signature files in Outlook but if you have an earlier (2003 and below) version of Outlook, it’s difficult to do much with them.

For all versions, you must be using Outlook’s HTML email option and Word as your email editor to add images.  If you can’t use Word for some reason (usually because you have different versions of Word and Outlook…) you’re stuck with Rich Text – no images, but you can modify the text color/weight.

Select Tools | Options… from the menu in Outlook.  Then click on the Mail Format tab and find the Signatures button to get started.

For older versions of Outlook, you can insert an image but can’t hyperlink it without using the Advanced Editor and having some knowledge of HTML.  From there, you’ll need to insert the HTML anchor tag around the image.  You can also create your own signature file in any HTML editor and copy and paste the code in the advanced editor.  You’ll need to toy around with the formatting as Outlook may not render things as expected.

If you want to skip the whole hyperlinking image thing, just paste or type a URL or email address into the signature editor.  Outlook will create the link for it

For versions 2007 and above, you can insert an image into Outlook directly and easily hyperlink the image.  So if you have inserted a LinkedIn icon, select it then click on the link icon in the signature editor.  Enter the URL of your LI profile and insert.  Unfortunately, the Advanced Editor has been removed…so you can’t use promotional code snippets….unless you want to go through this convoluted process of importing a custom signature file.

WiseStamp

Frustrating, huh?  Well…there’s some hope on the horizon.  With WiseStamp, you can create a “stamp” that includes all your social networking accounts, blog posts, Tweets…you name it….and stamp it into your email from your web browser.  It’s fairly new and a bit glitchy, but works with all the major webmail services via a browser add on.  Once installed, you create your stamp then insert it in your webmail emails.

Right now only Firefox and Chrome add-ons are available and it “officially” only works with those respective mail apps and major webmail accounts (Google, Yahoo, AOLMail….).  But more browsers and apps are coming soon.  There’s also a way to manually add the code for the stamp and insert that in “unofficial” apps if you have a means to get at your signature editor’s source code.

More…

If I haven’t covered your email app or you want more direction, do a search for email signatures with your app name included.  You’ll find a wealth of how-tos and YouTube videos to help you with the process.  And if you have any specific questions, post here and I’ll do my best to find a solution.

Comments

  1. There’s a few Firefox plugins out there that work well with Gmail, I can’t speak for any other webmail providers.

    IMO, email signatures have gotten a little overboard. Over the past six months I’ve dumped everything and just made a simple landing page with all my links out of WorPpress. If you don’t get WordPress, then check out about.me or flavors.me ;-)

    Simple is good these days!

    • Know what you mean about signatures going overboard…especially if “stationery” is involved… Landing page idea is interesting – plus you’d get visitor stats.