Proper formatting of email signatures

At first glance, email signatures may not seem that important, especially if you compare them with other things going on in your company. But if you delve deeper into this, you will find out that email signatures play a significant role when it comes to marketing, branding or maintaining a good relationship with your customers. What is more, disclaimers added to these email signatures may also prevent you from legal issues. Keep in mind that even the best-written email may not do its job if you are not confident enough about the company you are dealing with, so gaining a client’s trust should be a priority for each employee in your company. Certainly, a fine-looking email signature that contains useful information is a nice try to make a good impression. And if you combine a fine-looking signature with an attractive marketing banner, the results may surpass your expectations.

There are a few requirements every signature should meet. Let’s analyze them one by one. These are:

1. Clean, yet attention-grabbing design
2. Compatibility with mobile devices
3. Necessary personal information that does not overwhelm the recipient
4. Social media support

Less code, more design

Formatting issues

Unlike websites, most of the email signatures do not contain an external CSS file or style section in the HEAD part of the document. Basically, CSS is a layer describing how the HTML code should be presented – using what colors, font sizes/families and more. Even if email signatures contained an external CSS, this would not work, since some email clients ignore CSS completely. The best way to get reliable results is to make sure that you use as little HTML containers as possible and put their CSS rules inside every container (using the style attribute). Do not expect the inner containers will inherit the formatting rules from their patents– simply define these rules directly. For example, when it comes to tables, put your text formatting rules inside the <TD> element and do not even think about inserting the <P> tag inside. First, it is not necessary at all (to make your signature too complex for no reason). Second, some email clients (especially Outlook clients) may “forget” about text formatting you used in the TD element, leaving the content unformatted and displayed in default fonts (e.g. Times New Roman) – so it is definitely not something you want to achieve. The screenshot below shows the signature font changed to Times New Roman after sending a reply.

When composing your signature, keep in mind that even different versions of Outlook or other mail clients may or may not support some basic CSS/HTML attributes. Here is a good place to find out which attributes are recognized.

Another thing is that you should compose your signature manually or with an editor optimized for this purpose – most WYSIWYG editors (especially Outlook and Word) add unofficial CSS and HTML code that makes your signature displayed perfectly for them, leaving it smashed for the rest of the email clients. In other words, copying the signature content from Word is not a good idea – it is a fine document editor but definitely not a tool made for creating email signatures.

Signatures with at least two columns

There are two best approaches to create your signature, depending on the type you have chosen. For layouts that are wider or more advanced, you can achieve the best results with HTML tables. Old good tables allow you to get a reliable and consistent layout on literally any platform. This is because there are no many ways to interpret them, unlike <DIV> containers. Actually, most of the email clients do not handle the float property for HTML containers properly, leaving the entire content broken. Moreover, keep in mind that every email client sticks its oar in the HTML code (when replying or forwarding messages), making the source code as clear as mud.

It is best to avoid these implications at the very beginning. We have seen a number of situations where users wanted their first row of a table to consist of two columns and the second one of two merged columns. In most cases, the cells were not of the desired size. The best solution would be to create two tables one after another, like in the image below.

The last thing we want to mention here is that you should not use tables that are wider than 600 pixels, since it may cause entire email to zoom out on some devices (we will talk about this later).

Signatures with just one column

Another approach can be used if your signature consists of elements appearing one below another. In such a case, it is better to stay with just one container – actually, a paragraph should be enough. This, of course, does not mean that you cannot format specific parts of your signature differently – simply use the <SPAN> tags to do so. And if you want to break the line, always use the <BR> tag instead of creating a new paragraph. To do that, you can simply press Shift+Enter in most WYSIWYG editors (including those used in CodeTwo products). Using such a basic HTML syntax, you can get the best appearance of your email signature, also on mobile devices, completely out of the box and without messing around with media queries. However, if you need to use more than one paragraph, just remember to clearly define margins and paddings of your paragraphs. Otherwise, you may encounter unwanted (reduced/enlarged) gaps between them. Lastly, the only problem may appear if you insert a quite wide image (but don’t worry, we have covered that later in this article).

Support for mobile devices

Let’s dig deeper in terms of support for mobile devices. The era of emails that are read only on desktops is already over. More than half of emails are open on mobile devices – phones and tablets. Most of the email signatures are not optimized for mobile platforms and can actually cause issues with the rendering of an entire email. The key to understanding this problem is knowing that manufacturers of mobile devices are perfectly aware of this kind of issues, yet their solutions to these issues are all different. The same message and signature may be displayed differently depending on the mobile operating system. However, all these solutions are used only in the case that your email content cannot be displayed normally due to some limitations. For example, if your signature is wider than the width of your screen, your mobile phone can hide some part of the signature or zoom out an entire message to display it on its full width. But the real remedy is to design a signature in such a way that the email client does not need to use these additional solutions to display the message properly.

To achieve that, you need to keep your signature as narrow as possible, without using any fixed dimensions unless they are really necessary. Also, consider what is best – to wrap words and keep a good font size (default behavior) or prevent wrapping and allow the message to zoom out (you can add white-space: nowrap CSS property).

When it comes to adding a banner or a wide picture, you may notice that this image can also zoom out the message, just like a wide table. Therefore, consider using max-width: 100% CSS property to scale this image automatically – your mobile email client will keep it as wide as your screen is.

Moreover, some email clients do not allow displaying text smaller than the desired size. It can be bypassed (like in this article for iOS devices) but before you attempt to do so, make sure you really need this. Another common error is that the signature text (especially where the disclaimer is placed) appears overlapped. This is because of wrongly used line-height property – the same values that fit perfectly on your desktop machine are simply not adjusted for mobile devices. Actually, in this particular case, it seems that better is the enemy of the good and our recommendation is to avoid using that property as the default settings are simply doing its job perfectly.

However, the issues mentioned above are applicable to HTML type of messages only, while most of the mobile devices are using Plain Text format instead (so the emails are stamped only with unformatted text). For some of these devices, there is no option to convert the message to HTML. Fortunately, some third-party solutions (like CodeTwo Email Signatures 365 or CodeTwo Exchange Rules Pro) come with this feature built-in so you can take all advantages of HTML signatures even if the email was sent in Plain Text.

A well-served information tastes better

It is obvious that the content you include in the signature must be appropriate – your recipient must not be under the impression that some information about your company is missing. On the other hand, the signature cannot be overwhelming. Eventually, the actual message in your email is far more important than the signature itself.

Considering that, we can assume that each signature should be personalized per each user but, at the same time, it should maintain a common design, so that the recipient knows that emails come from the same company. You have a couple ways to deliver signatures to each person. The easiest and safest way is to use solutions that allow for centralized email management (like CodeTwo Email Signatures 365 or CodeTwo Exchange Rules Pro), where you can use information gathered from Office 365 tenant or your local Active Directory. If you do not have such an environment, it could be a real bottleneck, as there is no source from which you can get users’ details, and the signatures via Group Policy objects does not work on some platforms. So it can be a huge headache.

Aside from that, you need to take into account that some personal details may not be filled in for some users. For example, a person who works remotely may not have its direct number provided. Instead of creating dozens of signatures with/without some of the Active Directory attributes, you can use RT tags available in the CodeTwo software that hide some parts of your signature if the data is missing from AD / Office 365.

Furthermore, to make the design more attractive, use different font sizes and families, as well as different colors. However, you cannot use fonts that are not installed by default – an ugly alternative may be displayed instead. And do not even try using ridiculous font families like Comic Sans or screaming colors. Otherwise, your customers will run away and tell their business partners that your company has worst signatures over the web. An example of a well-designed email signature is shown below.

Last but not least – use only common image formats like JPEG or PNG and either resize them to the desired size before placing them into your signature or scale them down using both HTML and CSS.

Social media brings you closer to your customers

Nowadays, social media platforms are one of best places to improve your image on the web. So why not let your customers know that you have official profiles created there? A good solution would be to put a small icon with the logo of a desired social media platform that links directly to your profile. Of course, you can insert as many social media links as you want into your email signature. Some editors available in the centralized email management tools can make this process far easier than manually combining links with icons. Moreover, they also allow you to utilize users’ data (e.g. stored in Active Directory) to create the necessary links. Therefore, you can not only add a link to the common profile of your company but also to separate users’ accounts on chosen social platforms.

However, when you are hyperlinking your icons to social media platforms, ensure that you are using either PNG or JPG format of the image and that you have applied the border=0 attribute to the image itself. Otherwise you an unwanted blue border may appear around the entire image.

Additionally, it is a good idea to add a clickable banner to your signature that links to your event or activity that can later be shared among your customers. This way you can promote your co important marketing campaigns of your company almost without any effort.

To sum up, now you should know how to design a good email signature and make it look consistent even on mobile platforms, without the need of reading an enormously small text because of zooming out of the message, which can be a real pain. The key is to keep the design as simple as possible and use good old methods instead of fiddling with advanced CSS code that may simply be ignored by email clients. There are basically two types of signatures that are the best to be used: the horizontal one, placed in an HTML table, that is yet not too wide, and the vertical one, which displays details one under another.

When it comes to adding signatures to emails sent to your clients, using the centralized email signature solutions is the best way to do so. This is because these solutions, taking advantage of personal information stored in Active Directory or Office 365, can be used to create individual signatures for each of your users, or even insert personalized social media links. Another important thing to point out is that these solutions can be used to easily create banners informing your recipients about important company events.

Do not hesitate to try out CodeTwo Email Signatures 365 and CodeTwo Exchange Rules Pro for free and make a good use of their WYSIWYG editors to create a consistent and good-looking email signature.