The Art of Designing and Marking Up Email Signatures

Rex Weston

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, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;) to achieve the spacing you want. Microsoft 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 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 &#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 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;">&nbsp;<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?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • John

    This literally covers everything! That ‘-nosend-‘ tag is a ‘godsend’.

    Thought I’d share this guide on social media in email signatures – less about design, more about code, but still very useful.

    http://documentation.exclaimer.com/Why%20You%20Need%20Social%20Media%20In%20Email%20Signatures.pdf

  • Tim

    Please do not use images in email signature. They show up as attachments all the time. And they are extremely annoying.

  • http://writerelated.tumblr.com/ John

    This is a fantastic article. The tips here are excellent. You covered a lot things that I never even thought of. Are there any websites that help you build signatures if you aren’t good at HTML? I am a novice.

    • http://www.digitechbranding.com Rex Weston

      John – we have some free email signatures that you can construct on our site. You can either just use these as needed, or create them and then look at the code to get a sense for how they work. The link is: http://www.digitechbranding.com/pages/free-email-signature.html

      I hope this helps.

  • Scoddie

    Not sure what happened to the nosend attribute in your code example.

    • http://www.digitechbranding.com Rex Weston

      Scoddie – it appears as if SitePoint’s technology has modified the code snippets I included – you are absolutely right – the “nosend” attribute is not shown.

      You may view the HTML for a complete signature, with “nosend” included in all of the image references, at this URL: http://www.digitechbranding.com/pages/email-signature-technical-sample-code.html

      I hope this helps.

      • Tom Museth

        Thanks for pointing this out Scoddie. The nosend attribute is in there now, along with the attribute value.

  • Kenny

    Very nice article about email signatures. For signature i use Brandmymail ( http://www.brandmymail.com ), which has full control over email signature and overall template :)

  • Aankhen

    Ugh, I hate massive, image‐laden signatures like these. Especially that first one with the three‐line ‘Confidentiality Note’ at the bottom joining the party.

  • http://onespirit.wetpaint.com/ AnilG

    Aankhen – I totally agree. There needs to be a world-wide war against wide and tall email signatures, and signatures with images. One of my company’s vendors not only includes their logo but has an advertisement image and various images to tell me about the awards they’ve won as well, along with a long disclaimer. Other vendors have similar problems. One includes a whole list of information about opening hours. On EVERY email.

    To put it mildly, this is inappropriate and contrary to principles of good communication. One of the vendors is a communication company.

    90% – 99% of the content in emails from their staff is email signature spam. I know whether the awards are justified because I experience their performance first hand. When trying to follow an email thread it’s really hard working through the signature spam to find the actual sentences. I even spend time EDITING their signatures out when replying and forwarding so that time poor managers can understand the content before they get impatient and delete it. When submitting to our ticketing system the tickets are equally full of email signature spam and multiple small attached images, obscuring which attachments are actually important.

    They then format this all with tables so that when I try to delete it in Outlook the delete boundaries are unreliable and I often delete useful information as well.

    Email signatures should contain the BARE MINIMUM for a recipient to contact by other means if they don’t want or can’t use email reply. A single small logo is appropriate for identification but should not take up excessive width or height.

    Why should an email signature NEED to be like a WEB PAGE advertising the company and using up real estate and my information time on issues that are not central to the purpose of the communication? Email communication needs every effort to be minimised.

  • Damon

    No email signatures! No greeting line, either! I can see from the “From” field who you are and if I want to contact you I’ll hit Reply! Keep email simple!

  • http://www.itpassion.com Guus

    “Spacing between text” can be achieved in Outlook by placing a one-row table with three cells in the signature… Even in Outlook.

    Cheers,
    Guus

  • http://www.spiraleye.com Timothy

    what about embedded images for small logos / social media icons using base64 inline images? eg

    Does that work in most email clients? I haven’t tested it out, but it works well in html.

    • http://www.digitechbranding.com Rex Weston

      Although the use of Base64 seems very appealing, and does work well, my experience is that it significantly increases the liklihood of your email being flagged as spam. In my opinion it’s not a risk worth taking.

  • Andrea

    Any tips on being able to write your own html code in Entourage? I don’t think they allow it, but maybe someone found a hack.

  • http://taigamemobi.net/ taigamemobi

    Thank you for the advice, I started work and often use email very rewarding.

  • http://www.webdesignoffice.net/ web development company

    I don’t see any thing unusual as this is your site, u must go through what people give their opinion but take action according to your utility and requirement.