Email Signatures Design Feature Email SignaturesEmail Signatures Email Signatures Design Feature

CREATING, INSTALLING & USING HTML EMAIL SIGNATURES - TECHNICAL CONSIDERATIONS     DESIGN GALLERY


A Whitepaper by Rex Weston : Latest Revision - September 2013
(Written for and originally published in SitePoint)

There are three approaches typically taken to creating an email signature:
  1. Create it in Microsoft Word, and then copy it from there.
  2. Create it directly in your email program's signature editor.
  3. Create it from scratch using HTML coding.
If you're looking for a full-featured email signature, it's only the third approach that's likely to yield a robust, standardized, and understandable result.

Having worked at this full-time for 14 years, I've got a good sense of the limitations, problems and solutions pertaining to HTML email signatures. There are four aspects to deploying an email signature program, all of which are of considerable importance - these are:
  1. Design / layout.
  2. The use of graphics and the HTML coding.
  3. Installation of the signature and the configuration of your email program.
  4. Educating end-users regarding the performance of the email signature.
This article is organized around these four topics. Within each, I'll share the most important considerations as well as obscure tips and tricks that can easily solve vexing problems. Ideally you will have:
  • Decent understanding of HTML programming;
  • Basic ability to manipulate graphics;
  • Access to a server that you can post to.
Finally, before diving in, it is important to note that this is a moving target. Things change, often without you knowing it. What works today may not work tomorrow. What was once a brilliant idea may be transformed into a fatal flaw by a single decision by Microsoft, Google, or Apple. It keeps things interesting!

Email Signature Design & Layout in the Age of Smartphones     Design Whitepaper     Design Gallery
Prior to smartphones, email signatures wanted to be horizontal. The goal was to allow them to be seen fully even when an email message wasn't opened on a computer, but instead was viewed in the preview pane. It was safe to assume that we had at least 650 pixels in width to work with. Now, and undoubtedly into the future, email signatures want to be vertical - smartphones offer limited viewing area and an overly wide email signature can lead to any of the three following problems:
  1. Message recipients have to scroll left and right to read the body of an email.
  2. The email signature is scaled down to fit the window, and as a result the font size of the email's body is also scaled down, making the message difficult or impossible to read.
  3. The text in the email signature wraps in unpredictable ways, messing up the signature's layout.
The degree to which you must compromise in terms of layout and design can be significant. Having been doing this for 14 years, I will state unequivocally, "Always compromise towards robust performance!" No matter how nice your visual aesthetics may be, if you or your users are left with a nagging doubt about their email signature every time the SEND button is clicked, then you've failed as a designer.

Email Signature HTML Coding Request

HTML Email Signature Coding
Please note that the coding techniques that follow are the result of extensive experimentation and long-term testing. While you may feel as if you can see ways of modifying or improving them, the chances are good that your ideas have already been tested and rejected for one reason or another.

Image Pixelization: While some logos are more susceptible to pixelization than others, it's always best to display a clean, unpixelized, logo. The graphic below shows a clean and a pixilated version of a logo - the top is the full logo shown actual size and beneath it is a snippet of the logo shown at a 1000% zoom.
HTML Email Signatures - Pixelation
There are three aspects to achieving a good display. First, start with a good high resolution copy of your logo, and then scale it down to the exact size you want to use in your email signature. The final size will vary depending upon your logo and your signature design. As a rule-of-thumb I'd expect a horizontally oriented logo, such as the Vega Consulting logo shown above, to be 150 to 250 pixels in width. For a square, round, or vertically oriented logo, I'd expect the height to be from 70 to 90 pixels. Make sure you create a scaled down version of your logo that looks clean and sharp.

Next, you'll want to display your logo at 100% - do not allow the logo to be shown at any other size - it will always look bad if you do. Simply use the height and width settings in your image reference to do this:

<img src="http://www.digitechbranding.com/images/VegaConsulting.gif" width="214" height="46">

Finally, I recommend that you always use GIF or PNG graphics.

Spacing Between Text: As hard as it is to believe, if you're designing email signatures for use in Microsoft Outlook you may not be able to accomplish this:

Tel: (414) 473-6812      Mobile: (414) 988-3211      Fax: (414) 473-6819

You're likely to end up with:

Tel: (414) 473-6812 Mobile: (414) 988-3211 Fax: (414) 473-6819

The natural programming inclination is to simply string together a series of non-breakable spaces - &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; - to achieve the spacing you want. Micorsoft Word, Outlook's editor, will strip out all but the first of these &nbsp's (note: the use of &#160 won't help). You'll be left with just one, and hence your signature will render as:

Tel: (414) 473-6812 Mobile: (414) 988-3211 Fax: (414) 473-6819

One solution is to insert a white or transparent spacer graphic in between the text you wish to separate. This will work fine, but carries two potential drawbacks - some potential increase in your SPAM score and more graphics showing up as attachments when that happens (and it will at times).

The solution I prefer is to use a pipe (vertical line symbol) to create the desired separation:

Tel: (414) 473-6812 | Mobile: (414) 988-3211 | Fax: (414) 473-6819

This has proven reliable and from a design standpoint seems to be generally acceptable to most graphic designers and marketing people. I usually set the font color to a light gray for these pipes:

Tel: (414) 473-6812 | Mobile: (414) 988-3211 | Fax: (414) 473-6819

Avoid White Fonts: The above discussion of creating visual separation may lead you to the idea of simply making the separator pipes render in white, thus disappearing visually. That works, but setting font colors to white (or even something else that's super light) can be a SPAM trigger. It's not a risk worth taking.

Avoid Special Characters: I've experimented with the use of &#9632; to create solid squares as separators between text. Although this works nicely, I've encountered many instances of email messages being sent to SPAM folders as a result of this character triggering a "Russian Character Set." As a result, I've learned to be very prudent about my use of any special characters in email signatures I design.

Email Signature HTML Coding Request

Spacing Between Lines: The best approach I've found is to make frequent use of table rows and then to set the top and bottom padding as needed:

<tr>
<td valign="top" style="padding-left: 0px; padding-top: 9px; padding-bottom: 9px; padding-right: 0px;">
some content...
</td>
</tr>

This approach to controlling line spacing works quite reliably.

Note of Caution: I do not recommend using a reduced line-height parameter to tighten up the spacing between actual lines of text that will appear in the signature - some smartphones will display those lines of text as overlapping, one partially on top of another.

Horizontal & Vertical Spacing - Another Strategy: Another approach to spacing is padding images with white space. You can create precise and reliable spacing around images - left, right, top or bottom - simply by padding the image with white space. You should never hesitate to use this technique if it can help you.

Images as Attachments: No one wants their email signature to result in attachments. Unless you're willing to skip the inclusion of your logo graphic, precluding attachments 100% of the time cannot be achieved.

There are, however, two things that you can do at the HTML programming level to help. First is to minimize the number of graphics you use. Your logo, and social media icons probably have to be graphics. In most cases, there shouldn't be any other graphics included in an email signature.

Secondly, there's an old, undocumented, attribute - NOSEND - that works in some cases to prevent images appearing as attachments. I've used this since 1999, and during the few occasions where I've removed it I've had increased reports from my clients of images being attached. I've never found any downside to it, and so continue to use it in every image reference as follows:

<img src="http://www.digitechbranding.com/SocialMedia/Twitter-21x17.gif" nosend="1" border="0" width="21" height="17" alt="Twitter">

Note: For a deeper explanation of "images as attachments" please refer to these two FAQ's:
Sometimes my signature appears as an attachment
I'm confused by how images work, and don't work, in signatures.

Don't Use Image Mapping: Image mapping used to be a great way of incorporating multiple hyperlinks in a single graphic in an email signature. It works well with everything I'm aware of except for Outlook 2010. If you will have users installing signatures into Outlook 2010, image mapping built into their email signature will not work. (It can seem like it works, but it doesn't - don't be fooled!)

Use full URL's in Hyperlinks: Some of the smartphone platforms require the full URL, always including the www, in order for a link to properly open the page in the browser when clicked.

Don't use TinyURL's or goo.gl's: The use of TinyURL's (including Google's goo.gl's and bitly links) can increase the likelihood of your email winding up in a SPAM folder.

Font Sizing: For the best reliability across devices and email programs, use point size (PT) rather than pixels (PX) to set your font sizes.

CSS Styling: All CSS styling must be done inline. While this seems inefficient and creates rather messy looking code, it's the only way of ensuring that your styling will work.

Compacting Your Code: White space & carriage returns that you may use to write clean HTML code that can be easy to interpret can have an adverse effect on your rendered HTML email signature. I suggest working with clean code while creating and debugging your signature, but then compacting it by stripping excess white space and carriage returns prior to putting it into use.

HTML Email Signatures - Clean Code

HTML Email Signatures - Compacted Code

Conclusion - HTML Email Signature Coding: Reliably testing email signatures is very difficult and time consuming. The hidden and unexpected traps are many, and they often don't expose themselves easily or quickly. Starting from a solid base of knowledge & experience helps significantly in arriving at a good result in an efficient manner. If you'll follow the advice presented here, and work from the sample code provided, you'll be well on your way to creating a reliable, high-performing, email signature.

Email Signature HTML Coding Request

Email Signature Installation Approaches
How you install your email signatures can play an important role in how they perform. We provide detailed installation instructions for almost all major email programs from this page:

http://www.digitechbranding.com/pages/Signature-Installation-Instructions.html

In this section of this article I will just point out some of the less obvious issues that you may want or need to consider.

Two ways of installing into Outlook 2007 / 2010: The approach I take for almost all email signature installations is to:
  1. Create the signature as HTML;
  2. Click it open in a browser window;
  3. Press Ctrl-A to select all;
  4. Press Ctrl-C to copy;
  5. Navigate to the signature creation dialog in your email program and PASTE the signature into the edit window.
When you install an email signature into Outlook 2007 or 2010 using this approach, Outlook will treat the signature as if you created it using its built-in editing functions. This is good, and the most important aspect of this is that the images in your signature will be embedded in your outgoing messages, minimizing their likelihood of being blocked. They will simply show up as expected in most cases, and won't be converted to attachments very often.

There's a second approach to installing a signature into Outlook 2007 or 2010 that will yield a very different result. This approach is as follows:
  1. Create your signature as HTML (the file extension must be HTM, not HTML)
  2. Save that file to the folder that contains your signatures - something like: local computer / owner / app data / roaming / Microsoft / signatures /
  3. Set this signature as your default via the regular email signature dialog function in Outlook.
This approach bypasses the use of Outlook's email signature creation function. The result is that images are not embedded in outgoing emails. Rather, they are served from the server location where you have stored and are referencing them. The result is that they will be subject to image-blocking and will have an increased likelihood of showing up as attachments.

It's very important that you understand the difference in these two approaches, and use the one that gives the desired results. I almost always recommend the first approach, with the exception of the occasional customer who uses a document management system to store and file all sent email messages (outside of Outlook) and thus needs to get away from the embedded images. (Note: With sent email saved within Outlook's Sent Items folder, the embedded images are not included in every email message - the images are stored once and Outlook references them from within each email message using a content ID.)

No Signature Editing in the Signature Dialog Box Itself: Most of the code in an HTML email signature is hidden from view - formatting, hyperlinks, etc. Using the copy-paste installation strategy I recommend, the end-user will not see the hidden formatting - they get a WYSIWYG view. Overseeing thousands of signature installations by end-users over the years, I've learned that the likelihood of users damaging the hidden formatting is quite high if they begin editing the signature in the edit window - they touch the DELETE key one too many times, and boom - something breaks. Often they don't know it, and maybe a year later they're saying, "Someone just told me that the link to our website doesn't work in my signature."

My suggestion is that you prompt users to enter any specific text that they desire into to edit window before pasting in the HTML signature. So, if you're going to let them choose between "Sincerely," "Kind regards," or "Yours truly," have them type that in before pasting in their HTML signature. If they leave everything alone after pasting, you can be assured of a good result.

Windows Display Settings: If you have users of Windows 7 (or perhaps other versions as well) who've got their "display settings" set at 125% or 150%, you have a problem. For whatever reason, Microsoft has decided to not only show you the inflated graphics sizes, but also to send them to email recipients in their inflated condition. The following graphic illustrates what happens to an email signature - the original version of the logo is not perfect because it is already enlarged from its actual size. As an email thread goes back and forth, the logos down the thread get further inflated with each exchange.

HTML Email Signatures - Windows Display Settings
What's especially problematic about this is that it doesn't just affect the user, but also affects the recipient in exactly the same way. The remedy is to have users change their display setting to 100% and reinstall their signature from scratch. Then they must leave their display at 100%.

Skype Plug-in Reformatting Phone Numbers: If you have a user with Skype's plug-in installed, you may experience a reformatting of the email signature as shown below - the version on the left is the expected version, the one on the right is how it looks after being modified by Skype.
HTML Email Signatures - Skype Reformatting
"Signature Is Too Large" Error: Some email programs, especially some webmail (including Outlook Web Apps), have a size limit for the HTML that makes up an email signature. In most cases it's possible to tighten up your HTML code to accommodate these limitations. Easy first steps are to use short file names for graphics, short (or no) ALT TAGS, and so forth. TinyURL's may become necessary at this point. I've also converted long confidentiality statements into graphics on some occasions to make the HTML smaller. There's usually a way of working within these constraints.

Browser-Based Copy & Paste Installation Problems: Using the copy & paste installation approach that I recommend, there's a potential for a problem related to the actual browser's ability to transmit the full HTML to the clipboard. For example, I've discovered (in the past) that Google Chrome will not transmit all of the required coordinates to activate an image map.

Although problems with this seem to be very rare, from a trouble-shooting perspective it's a good thing to take a look at if nothing else is making sense. Sometimes just reinstalling after opening the signature in a different browser is all that's needed.

Conclusion - Email Signature Installation Approaches: The installation of your email signature plays a vital role in its performance. Although they are truly easy to install, problems are not unheard of. When problems do arise, they can usually be resolved quite easily provided you know what to look for.

Email Signature HTML Coding Request

Email Signature Use Issues
Once you've got people up and running with their new email signatures you're likely to face a brief adoption / learning curve. These issues are all really quite simple, and are basically educational in nature. Following are the things you're most likely to hear or encounter.

"Sometimes My Signature's Just Not There" This usually pertains to an Outlook user who has their signature set up to appear for replies. Typically what happens is that everything is working for the user as expected until they go to reply to a PLAIN TEXT message. Outlook cannot then apply the HTML version of the email signature, and as a result, the user thinks that there's something wrong. It doesn't take much for users to learn to recognize plain text email and to understand why their full HTML signature won't appear in those cases.

Another confusing situation can occur when a user has multiple email accounts configured. They may have the signature set as a default for one account, say Julie.Wilson@business.com but for a second account, JulieW-1977@tampa-rr.com they don't have it set up. Most of Julie's email at work is to her business address, and so she gets used to seeing her signature appear when she replies to an email. However, when she happens to reply to an email that's come to her personal account the email signature doesn't show up. Because she gives little or no thought to which of her email accounts is actually in use, she thinks her email signature is not working correctly.

"My Signature's Just All Messed Up" This complaint is usually accompanied by a forwarded message that's come from an iPhone, or one that's formatted as plain text. The user sees their signature after being processed by an email program or device that's not well configured to send it. The result is, as the user states, "messed up." Typically the user needs to gain an understanding that the signature probably looked and worked correctly as the recipient was reading the message, but that when the recipient clicked REPLY, their email program couldn't properly process the formatting and messed the signature up at this point. In my experience, users quickly get comfortable with this.

"The Links in My Signature Don't Work" Links in email never work while composing. Have the user compose an email message using their signature, send it to themselves, and try clicking the links while they're in "reading" mode. They'll see that the links do indeed work, and they'll never worry about this again.

"My Logo's Missing from One Occurrence of My Signature in this Email Thread" Outlook 2003 has some sort of a bug that causes the second occurrence of a graphic to disappear. If the same graphic is referenced ten times, occurrence one will appear, occurrence two will be shown as a red X, and occurrences three through ten will appear. When it comes to signature graphics, this often means that the second occurrence of a person's signature in a thread has one or more missing graphics.

Conclusion - Email Signature Use Issues: With the introduction of your new email signatures you'll need to deal with a brief learning curve by your users. This typically lasts no more than two or three weeks, and usually entails answering a few standard questions. All users really need is to understand is that their signatures are working as designed. Once they're comfortable with this they tend to be entirely content, and usually quite pleased, with using a high-performing HTML email signature.
About the Author: Rex Weston, President & Founder of DigiTechBRANDING, has provided hundreds of companies with state-of-the-art business email signatures and automated email signature solutions over the past 14 years. He can be reached in his Wisconsin office at (920) 648-5408 or by email at rex@digitechbranding.com.