How to create a professional HTML email signature

A customized email signature is one of those details, often overlooked, that add professionalism to corporate communication while strengthening a company’s credibility.

Oftentimes, employees send emails without thinking about the bottom part of their message. Alternatively, they might add badly formatted signatures with missing data, code errors, or attaching extremely heavy logos. All of this contributes to form an unprofessional corporate image in the eyes of the recipient.

It is therefore important to create and use a personalized and professional email signature, one that is especially created and that suggests the professionalism and expertise of a company.

In doing so, however, it is necessary to keep in mind some good practices that concern both the information entered, as well as HTML markup and design.

What information should a business email signature include?

A professional email signature is like a digital business card; it tells people who they are dealing with.

In its most basic form, a professional email signature includes personal information such as name, role, phone number, email address, etc.

But it can also become a real communication and marketing channel when it includes, for example, the company logo, promotional banners, or links to the company’s social networks.

A well-constructed email signature is therefore much more than just the sender’s contact information. It showcases the whole company in a nutshell, so you need to carefully choose the information to enter. Here’s a few essential:

• NAME AND SURNAME
  Over 30% of signatures do not include the sender’s name, which negatively reflects on the image of the company. Many only report the sender’s first name, which can look unprofessional as well. It is therefore good practice to always enter the full name of the sender — unless the person receiving the message is an acquaintance or an external collaborator we are familiar with.
• ROLE
  Adding the role of the sender will help recipients to better understand who they are talking to, the structure of the company, and the way it operates.
• COMPANY LOGO
  It is important to include the logo (or simple name) of the company not only to help recipients orient themselves in understanding the message, but to highlight the professionalism and value of your brand.
• TELEPHONE NUMBER
  It is always good to enter a telephone number, whether landline or mobile, including the international prefix, to affirm the real existence and seriousness of the company.
• EMAIL ADDRESS
  Adding an email address to your signature isn’t useless, as you might think. In fact, not all email clients show the sender’s email address in full. Repeating the email address in the signature can help the recipient find their way in moments, especially within a long email conversation.
• WEBSITE
  Adding a link to the company’s website is a great way to get additional online traffic, especially considering the number of emails you send every day.
• CONNECTIONS TO SOCIAL MEDIA
  Inserting the links of the company’s main social networks is a good marketing move to promote various contents to audiences that might be potentially interested in them.
• PROMOTIONAL BANNERS
  Including banners to promote products, services, and events is a good way to reach the right people at the right time. The important thing is not to overdo it!

Entering the right information is only one part of the job. These need to be presented correctly, with the right design. To do this, you will need to write a few HTML lines. But if you really don’t want to spend more time on this, there are online tools allowing you to create signatures from templates that you can download and will generate an HTML code automatically.

How to create an HTML email signature

Creating a custom HTML signature is not as difficult as it seems, if you follow some simple good practices that help you avoid any complications caused by various email clients specs. You just need a little knowledge of HTML and CSS, that’s all!

Use the tables!

The first rule for creating an HTML signature is: use tables!
Unlike most IT products, the email rendering systems have lagged a little behind (especially those of Outlook v.2007/2010/2013) and do not always support the latest HTML markup or more complex CSS. It is therefore best to write the code as simple and “vintage” as possible.

With any other HTML file, all the tags present in the signature must necessarily be open and closed, and all the signature code must be enclosed within a <table> tag to which it is good practice to assign a fixed width (generally 500 / 600px). This will create a consistent design on all mail clients, within which you will insert a <tbody> tag followed by the <tr> (row) and <td> (cell) tags.

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td>
        ...
      </td>
    </tr>
  </tbody>	
</table>

Insert the style in line

You just created your container. To add some information, simply insert the content within multiple <p> paragraph tags inserted within one or more and tags <tr> and <td>, adding the style you want to use for the text in line.

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td>
        <p style="margin-top: 0; margin-bottom: 8px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; line-height:1; color: #42017C; text-align:left;">
          <b>Jane Doe</b>
        </p>
	 
        <p style="margin-top: 0; margin-bottom: 16px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height:1; color: #000000; text-align:left;">
	  Project manager
	</p>
      </td>
    </tr>
  </tbody>
</table>

To avoid issues and unpleasant results, just enter the writing style directly in line, avoiding the use of too “modern” CSS properties. Try to be consistent by sticking to a certain visual and structural coherence. While this makes coding quite repetitive and tedious, it will save you from the possible and probable removals of “non essential” codes often done by mail rendering systems.

For the same reason, it is always better to use generic fonts (eg. Arial, Helvetica, sans-serif) installed on all computers, instead of more particular fonts, such as those found on Google Fonts. These are not present on computers by default and require to be included in our code, with the risk of the inclusion being ignored by a number of rendering systems.

Images, the great dilemma

Although images are very useful for enriching the content of our emails and, in the case of a company signature, very useful for strengthening the brand identity, that between images and emails has always been a love-hate relationship.

It’s certainly possible to insert images into email messages. However, these are not treated by various clients and servers in the same way: some are more likely to download them, others won’t. This discontinuity makes the use of images in signatures not always easy and, oftentimes, counterproductive.

In the case of a company logo, therefore a relatively small and simple image, we can get around the issue by adequately preparing the image to the desired size and then encoding it in Base64 through one of the many tools available online.

By doing so, you will obtain an HTML string (often very long). Copy and paste it directly into the src of an img tag, to which you will assign, always online, the style we want.

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td>
        <img style="width: 159px; height: 32px; border:0; outline:none; text-decoration:none;" width="159" height="32" border="0" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ8AAAAgCAYAAAAMh6pAAAAABGdBTUEAALG ... YII=">
      </td>
    </tr>		
  </tbody>
</table>

By following these few and simple best practices, you will be able to create effective and professional HTML signatures for your corporate emails.

Test an HTML signature

Once we have created our HTML signature, it is good practice to test your code before sending any emails, to avoid unpleasant inconveniences.

You could start by sending an email from a test account, analyzing its performance on the most popular email clients. This is not always possible and could be very time-consuming. In addition, you could use an online tool such as Signature Preview, developed by the Qboxmail team. In addition to analyzing the validity of our code, Signature Preview will also show you a preview of the signature, so as to have a clearer idea of how it looks and where changes need to be done.

Signature Preview is a totally free tool that will greatly simplify the testing and debugging activity. Try it here: https://www.qboxmail.com/toolbox/signature-preview/

How to use a corporate email signature

Ideally, a corporate signature should be used by all employees of the company, across all levels of the organization, so as to strengthen the consistency of the corporate identity.

However, some might overlook the perks of a consistent corporate signature. Others might lack the technical skills or the time required to set up such a signature for their email messages.

The efforts made to create a personalized email signature, which gives greater professionalism and credibility to the company brand, therefore risk being thwarted by human factor. But luckily, there are company email management systems, such as the one developed by Qboxmail, whose purpose and advantage is precisely to centralize the management of company emails, including the management of email signatures.

From the Qboxmail control panel, you will be able to add a signature template to all accounts within a domain with just one click. Individual users only have to modify their contact details, if necessary.

A personalized, well thought-out email signature is a useful tool to strengthen the image of professionalism and seriousness of a company. Such a tool becomes even more powerful when associated with advanced business email management systems such as Qboxmail services. If you are a web agency or a reseller and want to try a new simple and fast way to centrally sign your customers’ emails, sign up for the free 30-day trial of Qboxmail.