The Art of Designing and Marking Up Email Signatures
Although the creation of feature-rich email signatures seems like a relatively straightforward programming task, in actuality it’s something of a black art. Here, I’ll share some secrets involving the design and structuring of robust email signatures that render well on PCs, tablets, and smart phones.
Design and Layout Considerations
Smart phones: Prior to smart phones, email signatures worked well with a horizontal aspect The goal was to allow them to be seen fully when an email message was viewed in the preview pane on a desktop. Now, though, email signatures need to be narrower, and more vertical in orientation – smart phones offer a limited viewing area and an overly wide email signature can lead to a messy layout
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 email signature in Outlook. The bottom graphic illustrates the rendering of this email 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 <br>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 <br>s, thus opening up the line spacing more than intended.
HTML Email Signature Coding
The following graphic shows an example of a feature-rich email signature:
If you like, you can grab the HTML markup for this signature. I’m not going to go through the markup line by line, but rather will touch on some of the things that are not so obvious, yet 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 image below shows a clean and a pixelated version of a logo. In both versions, at the top is Vega Consulting’s full logo, shown actual size; and beneath it is a snippet of the logo shown at a zoom of 1000%.
There are three aspects to achieving an optimal 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, 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. Make sure you input values into the height and width attributes in your img tag:
<img src="http://www.digitechbranding.com/images/VegaConsulting.gif" 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 email signatures for use in Microsoft Outlook you may not be able to accomplish spacing of this nature:
Tel: (414) 473-6812 Mobile: (414) 988-3211 Fax: (414) 473-6819
You’re more 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-breaking spaces (for example, ) to achieve the spacing you want. Microsoft Word, Outlook’s editor, will strip out all but the first of these s (note: the use of   won’t help). You’ll be left with just one, and hence your signature will render with a single space between text entries.
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 in emails.
The simplest solution, and one you’ve undoubtedly come across, is to use a pipe (|) to create the desired separation:
Tel: (414) 473-6812 | Mobile: (414) 988-3211 | Fax: (414) 473-6819
From a design standpoint, the pipe is generally acceptable to most graphic designers and marketing people. I usually set the font color to a light gray for these pipes.
Avoid white fonts: Perhaps you were thinking of simply coloring the separator pipes white, thus having them “disappear”? 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 email messages being sent to spam folders as a result of this character triggering the alert for a Russian character set. As a result, I’ve learned to be very prudent about the use of any special characters in email signatures I design.
Spacing between lines: Fine-tuning line spacing is not possible in Gmail due to rendering issues. 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 see in Gmail.
The primary approach I use, and I minimize it as much as possible, is:
<span style="line-height: 5px; font-size: 5px;"> <br></span>Gmail will always render a full <br> when it encounters this markup. Most other email clients will process the line-height and font-size properties 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 <br>. A 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 smart phones will display those lines of text as overlapping, one partially on top of another.
Horizontal and vertical spacing: 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 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 markup level to help. First is to minimize the number of images you use. Your logo, and some social media icons, are more than likely essential. But 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">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 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 URLs in hyperlinks: Some of the smart phone platforms require a full URL — always including the “www” — in order for a link to properly open the page in the browser when clicked.
Don’t use TinyURLs: The use of TinyURLs 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 markup, it’s the only way of ensuring that your styling will work.
Comments on this article are closed. Have a question about Email Signatures? Why not ask it on our forums?
