Bet many developers felt pain when they were asked to “code an email”, without a clear definition of what needs to be done. Often, this phrase is understood as the creation of an HTML signature for a letter, which in turn can cause confusion. But let’s leave prejudices and try to understand that often the company’s work is a bit more than creating a product, but also its sale, customer search, and more. And here corporate correspondence begins to play the main role in creating the image of the company and the presentation of critical information.

Since many companies are faced with the problem of presenting and executing a signature, it would be great to figure out about some technical (and not) aspects of creating HTML signatures.

Do’s

Make a responsive mobile experience

If you did not revise the design with regard to mobile users, then this should definitely be done asap. A good tone will be the use of the logo horizontally with a width of 300-320 pixels, not forgetting that the rest of the data should also not go beyond the logo.

Remember about different email clients

Remember that different mail clients render HTML differently, moreover, different versions of one client can do it in their own way. Most likely, you will encounter with Outlook in the work, as today it is the most widely spread program for business correspondence. But do not forget that there are also a lot of users of Mac and Linux, which use others, as well as mobile users that crowd the market.

Here will be no unambiguous recommendations, just try to use different programs to understand how your signature might look to another user.

Size of signatures for different tasks and messages

The purpose of the signature is to give the necessary message to the recipient, so it’s worth paying attention to the density of the layout of the branding elements in the letter. Taking a height of about 160-320 pixels in total at the top and bottom of the message, you can provide enough space for a designer to create the main section with a height of 140-180 pixels.

Font size

If you are faced with the choice of “what to use: px or pt?”, then you should choose the second option because you will achieve greater cross-platform experience and a correct font rendering in different programs. Ie, users will see the text in the way you mentioned it, regardless of what client and platform they use.

Automated signature

It’s a debate about whether it’s worth using the automated and HTML signature together. If you intend to use both variants, make sure that these signatures are separated from each other by at least one blank line, this will visually separate the message and give the recipient a hint where the message ends.

Don’ts

Do not avoid graphics

If we are talking about the presentation of the company, then, of course, graphics will be affected as well. There is no point in talking about the importance of this, so let’s stick to recommendations only:

  • Use graphics in your signatures.
  • Do not use high-resolution and big-sized images, remember that the letter can be read from the phone on a trip, so a jpg-file larger than 3mb will be inappropriate. But a png-file of 20-30 kb size will fit perfectly.
  • Do not use links on images, most email clients block them by default.

Logo pixelization

Images with a lot of details are more prone to pixelization than simple ones. Such images will look fuzzy and blurry, so it’s better to use a logo of a fixed size. The best option is to take as a reference a large size image and reduce it to the required size (depending on the needs). After all the above operations, you need to make sure that the logo will be displayed at actual size, do not allow the graphic to be displayed in arbitrary sizes. Ie, you must manually set the height and width of the picture.

White Fonts

If you are thinking to solve the problem of spacing with the help of staining fonts in white, then this idea should be thrown away. In some cases, this may seem like a simple solution and maybe even work but more often it can be perceived as a spam trigger.

Gifs and animation

Adding animated GIF files is a useless activity, most email clients will not play it, besides, such files are considered as dangerous content.

Not a solid image

Do not make a banner from the signature. There are many reasons for this, starting with the trivial problems with formatting and displaying on various devices, ending with the necessity to redesign the entire picture in case of contact data change. A good signature would be good if it carries all the necessary information and this information is easily accessible for copying. Most likely, the recipients will want to save contact information, thus why not make their life easier and create email addresses and phone numbers as links?

Don’t use short links

Frequent use of short links is suspicious for many email clients. Avoid them if you do not want your message to end up in spam.

If you are thinking about finding interesting references for creating signatures for different fields and  activities, then pay attention to these email signature examples.

Summing up

This article is made to help in creating the correct layout and also to simplify the design of the signature specification for e-mail. Each branch or department of the company (be it IT, HR or marketing department) has its own representations of effective signature. But in the end, this work will be done by technical personnel whose main job is to optimize the process and provide the necessary consultations to different groups of users.

Moreover, it is worth remembering that signatures provide important information and also called to support the “corporate component” of the brand, providing more professional communication and experience of interaction. Correctly designed signatures can help to avoid misunderstanding in the business environment.