HTML Signature Dos and Don’ts

You're about to put together an HTML signature, and want to know what you should and shouldn't do. We've structured this Do's and Don'ts section around the content of your signature, and its formatting.

Content

Name, Title, and Company
  • Name: Displaying your full name in your signature creates a win-win situation. You save time by no longer having to sign each email, and more importantly, you help your recipient by grouping all of your data together, making it easier for them to add you to their address book and share your data to refer you.
  • Title and Company: Including it makes it easier for your recipient to find you in their email client. If they forget your name but remember the name of your company, you have just provided an additional search parameter.
Physical Address
This is not important for all users. If you hold meetings in your offices, this is very useful to have. Some people choose to include more than one address, if they have a different address for their showroom and billing information.
 
Phone Numbers
Your phone numbers should be listed in the international format. An international format always begins with a "+" sign. Also, if you expect visitors from abroad, and your local dialing methods are very different from the international method, you should consider having a local and international number. We know this happens for Argentina, so we put an example for a Buenos Aires cell phone number:
  • Cel: + 54 9 (11) XXXX - XXXX
  • Cel (local): 0 + 11 + 15 + XXXX-XXXX
When in doubt, look your number up in howtocallabroad.com.
 
Online Presence
We feel it's best to study your needs and how Social Media fits into your corporate strategy, but if it does, then you should include it in your HTML signature.:
  • Facebook: We do not recommend giving out your profile to everyone. There are many news stories that have shown the danger in adding everyone as a friend. We recommend sharing a Facebook Page instead. If you are an artist, then you can have a Facebook Page where your fans can keep track of you, but they are not privy to your personal profile. This also applies to businesses.
  • LinkedIn: We recommend linking your profile to your personal profile. This increases your value as you will have a growing amount of people in your address book
  • Twitter: Choose which Twitter feed you want to share. Consider having a Twitter handle for your professional needs separate from a "personal" twitter account.
  • Youtube and Vimeo: Unless your business ties in closely with video production, we recommend linking your Youtube or Vimeo accounts to your webpage or blog, so that your audience can find everything in a centralized location.
 
Leveraging images
We split images into 3 categories:
  • Corporate Image: This could be your company's logo, your picture, or a picture of one of your key artworks (for artists). If you represent other brands or artists (i.e. sales agencies), and your products are more important than your company, you may consider using those logos or product images instead. When doing so, make sure you get their approval, and make it clear that you are a representative for those products.
  • Icons: Any social media icons you may have on your signature. We recommend using these because they take less space than writing out the whole link, and are clear visual "click here" cues
  • Promotional Image: This applies to users who want to promote one of their products. Imagine working in a furniture store, and wanting to advertise "sofa month". You could have an image in your signature doing just that. Here's our method to make your signature promo-friendly. First, create a "redirect page" (furniturepromo.html) that take the customer to a different link depending on the promotions you are running, or not running. Next, create an image with a non-specific name (promos.png). And host it on the Internet. It is important to not pass this image as an attachment. Finally, include that image in your signature and link it to the redirect page.

Promotional Image Use

We suggest using a generic name promos.png vs. SofaPromotion.png because you will be less tempted to change the name on your server. All you need to do now is replace the existing image with a new image called promos.png and your signature will always be updated. If a customer opens your email three months from today, the signature in that email will show whatever promotion you are running at that time. This is why we also recommend using a redirect page vs. a link to a promotion specific page.

When your promotion ends, do not delete the promos.png file from your server, or your customer will display an error. Instead, replace it with a tiny square the same color as your background signature color. Your link to the redirect page will still be active, so redirect the customer to your website home page, or even your Vcard for them to download it.

Formatting

Images
This is the most common issue with HTML signatures. We see too many individuals doing their signatures in their email client (Outlook, Apple Mail, Thunderbird), including pictures, and then sending out each emails with an attachment. There is a rationale to this behavior, but the cons outweigh the pros:
  • 100% display guaranteed!: Passing an image as an attachment is the only way to ensure that your recipients will get all of the images in your email signature.
  • Where's the attachment?: This happens to people every day. They receive emails from a vendor or a prospect that contains a real attachment. We consider attachments real when they matter (e.g. a price list, proposal, contract, etc.). There was a time when all you had to do was search through the emails that contained an attachment and you had a handful that popped up, all of which with meaningful attachments. This powerful search function has been rendered useless with the increasing amount of signatures that appear as attachments
  • Cost to your recipient: We often overlook this one, but if your client has a data plan that is not unlimited, then each one of your emails that has a signature attached is in a real way costing your recipient. Adding an image often doubles or triples the weight of the email.
The right way to pass a logo or icons in an attachment is to host the image on a server, and call that image when the email is opened. This is the same way your internet browser works when you open a website. All your browser is doing is calling images from somewhere on the Internet and displaying them for you. This method does not show any attachments, and lightens the load of your emails. The only issue we have seen is that some recipients set their clients to not display images from the Internet. This is really a minor nuisance compared to having all emails come with attachments.
 
Fonts
There are 2 main issues with fonts. The first one is the custom font. For ease of explanation, a custom font is a font that is so specific that it only exists on one kind of operating system, or only on a few computers that installed the font. If your recipient does not have the font installed on their machine, it will convert it to the default font.

The other known issue is when a signature's font is not "hard coded". This happens often when signatures are done on email clients using the same font as the default font. If the font is not hard coded into the signature, your font is more likely to adapt to whatever your recipient's custom font is. Here is an example of how this could work:
  • This is the default font on your system
  • This is the default font on your recipient's system

How many fonts should you have? We recommend limiting your signature to 1 font and font size for your signature. The only times we see the use in a separate font is for the text at the end of your signature (privacy notice, do not print to save the trees, etc.). This differentiates your contact information from the rest of the signature.
 
Links
Anything that is a phone number, email address, or online presence should be set with a link. The only thing to consider is that some email clients (especially people who check their emails from Internet browsers) will not take into consideration the color of your link and will convert it to the automatic blue color. This is why we recommend choosing a main font color that will contrast with the blue.

Also, links can come with the solid underline, the dotted underline, or no underline. Our preferred linking style in emails is the the dotted underline because it visually signals that a link exists in a discreet and elegant manner.

When it comes to Twitter, we leave it up to you to determine whether you want to display your handle. So your 3 options would be:
 
Size
We do not recommend using a signature that is more than 7 lines high. People with big signatures tend to only include them in their original outgoing emails. This makes it very impractical when you're looking for the contact information and all you have are replies from that person. We'd rather you have a signature that's 7 lines high, short, and that you could include in every email.