Creating, Installing & Using Signatures Technical Considerations By Rex Weston

Transcription

1 Creating, Installing & Using Signatures Technical Considerations By Rex Weston There are three approaches typically taken to creating an signature: 1. Create it in Microsoft Word, and then copy it from there. 2. Create it directly in your program s signature editor. 3. Create it from scratch using HTML coding. If you re looking for a full-featured 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 13 years, I ve got a good sense of the limitations, problems and solutions pertaining to HTML signatures. There are four aspects to deploying an 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 program. 4. Educating end-users regarding the performance of the 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! Signature Design & Layout Smartphones: Prior to smartphones, signatures wanted to be horizontal. The goal was to allow them to be seen fully even when an 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, signatures want to be vertical smartphones offer limited viewing area and an overly wide 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 The signature is scaled down to fit the window, and as a result the font size of the s body is also scaled down, making the message difficult or impossible to read. 3. The text in the signature wraps in unpredictable ways, messing up the signature s layout.

2 Gmail Line Spacing: Gmail renders all line breaks as full carriage returns. The graphics below illustrate the issue: The top graphic illustrates the intended design - the actual rendering of this signature in Outlook. The bottom graphic illustrates the rendering of this signature in Gmail. You ll notice that the top block of text my name down through the phone numbers - remains intact in Gmail. This was formatted using straight s to create the carriage returns. More refined spacing techniques were then applied to adjust the gap down to the various hyperlinks and then again down to the IFT12 tagline. Gmail ignored these refined techniques and simply inserted full s, thus opening up the line spacing more than intended. There s no right answer as to how to deal with this issue. However, in arriving at your ideal compromise solution, it s important that you understand the problem and design your signature in accordance with what degree of misalignment you can accept in Gmail. Signature Design & Layout Conclusion: The degree to which you must compromise in terms of layout and design is sometimes mind boggling. Having been doing this for 13 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 signature every time the SEND button is clicked, then you ve failed as a designer.

3 HTML Signature Coding Appendix 1 contains sample code for the following signature: Please note that although this code may look a little bizarre in places, it is the result of extensive experimentation and long-term testing. While you may be able to instantly see ways of modifying or improving it, the chances are good that these have already been tested and rejected for one reason or another. I m not going to go through this code line-by-line, but rather will touch on some of the things that are not so obvious, but are critical to understand. 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. 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 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.

4 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=" width="214" height="46"> Finally, I recommend that you always use GIF graphics. Spacing Between Text: As hard as it is to believe, if you re designing signatures for use in Microsoft Outlook you may not be able to accomplish this: Tel: (414) Mobile: (414) Fax: (414) You re likely to end up with: Tel: (414) Mobile: (414) Fax: (414) The natural programming inclination is to simply string together a series of non-breakable spaces - - 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) Mobile: (414) Fax: (414) 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) Mobile: (414) Fax: (414) 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) Mobile: (414) Fax: (414) 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 to create solid squares as separators between text. Although this works nicely, I ve encountered many instances of 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 signatures I design.

5 Spacing Between Lines: As discussed under the Design & Layout section, fine-tuning line spacing is not possible due to rendering issues with Gmail. If you choose to ignore Gmail entirely, you can dial this parameter in pretty well. However, the more fine-tuning work you do on your line spacing, the worse result you are likely to have in Gmail. The primary approach I use, and I minimize it as much as possible, is: <span style="line-height: 5px; font-size: 5px;"> </span> Gmail will always render a full when it encounters this. Most other clients will process the line-height and font-size to provide a reduced height line break. It s a good strategy when used sparingly only in cases where you just can t live with a straight. 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 Some Good News: You have one secret weapon available to you in the spacing battle 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 plan on using this technique without fail whenever it may help you. Images as Attachments: No one wants their 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 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=" nosend="1" border="0" width="21" height="17" alt="twitter"> Don t Use Image Mapping: Image mapping used to be a great way of incorporating multiple hyperlinks in a single graphic in an signature. It works well with everything I m aware of except for Outlook If you will have users installing signatures into Outlook 2010, image mapping built into their 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: The use of TinyURL s can increase the likelihood of your winding up in a SPAM folder.

6 Font Sizing: For the best reliability across devices and 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. Conclusion - HTML Signature Coding: Reliably testing 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, signature. Signature Installation Approaches How you install your signatures can play an important role in how they perform. We provide detailed installation instructions for almost all major programs from this page: 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 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 program and PASTE the signature into the edit window. When you install an 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 signature dialog function in Outlook. This approach bypasses the use of Outlook s signature creation function. The result is that images are not embedded in outgoing s. 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.

7 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 messages (outside of Outlook) and thus needs to get away from the embedded images. (Note: With sent saved within Outlook s Sent Items folder, the embedded images are not included in every message the images are stored once and Outlook references them from within each message using a content ID.) No Signature Editing in the Signature Dialog Box Itself: Most of the code in an HTML 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 recipients in their inflated condition. The following graphic illustrates what happens to an signature the original version of the logo is not perfect because it is already enlarged from its actual size. As an thread goes back and forth, the logos down the thread get further inflated with each exchange. 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%.

8 Skype Plug-in Reformatting Phone Numbers: If you have a user with Skype s plug-in installed, you may experience a reformatting of the 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. Signature Is Too Large Error: Some programs, especially some webmail, have a size limit for the HTML that makes up an 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 - Signature Installation Approaches: The installation of your 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. Signature Use Issues Once you ve got people up and running with their new 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 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 and to understand why their full HTML signature won t appear in those cases. Another confusing situation can occur when a user has multiple 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 at work is to her

9 business address, and so she gets used to seeing her signature appear when she replies to an . However, when she happens to reply to an that s come to her personal account the signature doesn t show up. Because she gives little or no thought to which of her accounts is actually in use, she thinks her 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 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 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 never work while composing. Have the user compose an 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 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 - Signature Use Issues: With the introduction of your new 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 signature. About the Author: Rex Weston is the founder and president of DigiTechBRANDING and StationeryCentral.com, Inc. He s spent the last 13 years working specifically in the area of branding, working with hundreds of companies to provide state-of-the-art signature solutions. He can be reached in his Wisconsin office at (920) or by at rex@digitechbranding.com

10 Appendix 1 Sample HTML Code <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td valign="top" bgcolor="#ffffff" style="padding-left: 0px; font-size: 8pt;"> <span style="text-align: left; color: #000000; font-family: 'Arial', sans-serif; font-size: 9pt; font-weight: bold">rex Weston</span> <span style="text-align: left; margin-top: 0px; margin-bottom: 0px; color: #000000; font-family: 'Arial', sans-serif; fontweight: normal; font-size: 8pt;">Software Designer </span> <a href=" src=" 148x38.gif" nosend="1" border="0" width="148" height="38" alt="vital Design" title="vital Design, LLC"></a> <span style="text-align: left; color: #000000; font-family: Arial; font-size: 8pt; font-style: normal; font-weight: normal;"> 155 Fleet Street <font size="1" color="#b9b9b9"> </font> Second Floor <font size="1" color="#b9b9b9"> </font> Portsmouth, NH tel (920) <font size="1" color="#b9b9b9"> </font> mobile (920) fax (920) </span> <span style="line-height: 5px; font-size: 5px;"> </span> </td> </tr> <tr> <td> <span style="text-align: left; margin-top: 0px; color: #F77A1E; font-size: 8pt; font-weight: bold; font-family: 'Calibri', sans-serif;"> <a style="text-decoration: none; color: #F77A1E" href=" color="#f77a1e">website</font></a> <font size="1" color="#f77a1e"> </font> <a style="text-decoration: none; color: #F77A1E" href=" color="#f77a1e">newsletter</font></a> <font size="1" color="#f77a1e"> </font> <a style="text-decoration: none; color: #F77A1E" href=" RexWeston.vcf"><font color="#f77a1e">vcard</font></a> <font size="1" color="#f77a1e"> </font> <a style="text-decoration: none; color: #F77A1E" href=" &spn= , &sll= , &sspn= , &hnear=155+Fleet+St,+Portsmouth,+Rockingham,+New+Hampshire+03801&t =m&z=16"><font color="#f77a1e">map</font></a> <font size="1" color="#f77a1e"> </font> <a style="text-decoration: none; color: #F77A1E" href="mailto:rexweston@yahoo.com"><font color="#f77a1e"> </font></a> </span> </td> </tr> <tr> <td> <span style="line-height: 12px; font-size: 12px;"> </span> <span style="text-align: left; margin-top: 0px; color: #000000; font-size: 8pt; font-weight: normal; font-family: 'Arial', sans-serif;">

11 <a href=" src=" left-bw.gif" nosend="1" border="0" width="21" height="17" alt="twitter"></a> <a href=" src=" left-bw.gif" nosend="1" border="0" width="21" height="17" alt="blog"></a> <a href=" src=" 21x17-left-BW.gif" nosend="1" border="0" width="21" height="17" alt="facebook"></a> <a href=" src=" nosend="1" border="0" width="21" height="17" alt="linkedin"></a> <a href=" src=" nosend="1" border="0" width="21" height="17" alt="foursquare"></a> <a href=" src=" nosend="1" border="0" width="21" height="17" alt="pinterest"></a> </span> </td> </tr> <tr> <td style="padding-left: 0px;"> <span style="color: #8A8A8A; font-family: 'Calibri', sans-serif; font-size: 8pt; font-weight: regular;"> <b>confidentiality Note:</b> This and any attachments are confidential and may be protected by legal privilege. If you are not the intended recipient, be aware that any disclosure, copying, distribution or use of this or any attachment is prohibited. If you have received this in error, please notify us immediately by returning it to the sender and delete this copy from your system. Thank you for your cooperation. </span> </td> </tr> </tbody> </table> </body> <style> a {color: #F77A1E;} </style> </html>