Brand
Marketing
Solutions

How to create a professional HTML email signature

Maurizio Mambrini
24/01/2021

Using a personalized email signature is one of those details, often underestimated, that add professionalism and strengthen the credibility of a company.

Very often the importance of creating and using professional email signatures is not perceived, by not inserting anything at the bottom of the messages or, worse, by adding badly formatted signatures, with missing data, code errors or extremely heavy attached images. All this contributes to giving, in the eyes of the recipient, an unprofessional image of the company.

It is therefore important to create and use a personalized and professional email signature, specially created that reveals the professionalism and competence of the company.

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

What information should a business email signature have

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, including, 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, so you need to carefully choose the information to enter:

Entering the right information is only part of the job, however, it needs to be presented correctly with the right design and to do this you need to write a few lines of HTML. If you really don’t want to waste too much time, you can always use one of the many tools available online that allow you to create signatures from pre-set templates, then downloading the generated HTML code.

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 us solve any complications caused by various email clients, you just need a little knowledge of HTML and CSS and that’s it!

Use the tables!

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

As 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), to create a consistent design on all mail clients, inside which we 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

Once the container has been created, to add the 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 problems and unwanted results, it is good to enter the style you want to give to the content directly in line, avoiding the use of too “modern” CSS properties and trying to maintain a certain visual and structural coherence.
While this makes coding quite repetitive and tedious, it will save us from the possible and probable removals of non “essential” code 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 Font, which are not present on computers by default. require to be included in our code, with the risk of the inclusion being ignored by rendering systems.

Imagine, 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, the one between images and emails has always been a love-hate relationship.

Although it is possible to insert images into email messages, in fact, these are not treated by various clients and servers in the same way: some are more likely to download them, others less, which makes the use of images not always easy and, sometimes, counterproductive.

However, in the case of a company logo in an email signature, therefore a relatively small and simple image, we can get around 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, we will obtain a string (often very long) to be inserted directly into the src of an img tag, to which we 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 we could thus create effective and professional HTML signatures for our corporate emails.

Test an HTML signature

Once we have created our HTML signature, before starting to send messages, it is good to test our code to avoid unpleasant inconveniences and fools.

To do this we can start sending emails from a test account, analyzing the result in the most popular email clients (which is not always possible and very time-consuming), or use an online tool such as Signature Preview developed by the team of Qboxmail, which in addition to analyzing the validity of our code, will also show us a preview of the signature, so as to have a clearer idea of any changes to be made.

A totally free tool, which will greatly simplify the testing and debugging activity, which can be reached at https://www.qboxmail.com/toolbox/signature-preview/

How to use a corporate email signature

Ideally, a corporate signature should be used by all the various components of the company, so as to strengthen the consistency of communication and corporate identity.

However, the various business players do not always have the sensitivity to understand the importance of a consistent corporate signature, just as not everyone has 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 the human factor, but fortunately 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.

In fact, from the Qboxmail control panel it will be possible to add the template created for our HTML signature to all accounts of a domain with just one simple click, then leaving individual users the possibility to modify their contact details.

A personalized, well thought-out and written email signature is a useful tool to strengthen the image of professionalism and seriousness of a company, a tool that 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.

We use cookies to provide you a better browsing experience, by continuing you accept their use. For more information visit the Privacy policy page.

Accept