The Email Signature Handbook
Toggle navigation
  1. The Email Signature Handbook
  2. Hints & Tips
  3. Design
  4. How to Create an HTML Email Signature

How to Create an HTML Email Signature

Exclaimer

By Exclaimer

See how to create an HTML email signature

Email signature templates are an extension of your business brand, being just as important as any other marketing materials. They are essentially digital business card with your contact details, logos, social media, display banners, email disclaimers, and so on.

Creating a professionally branded email signature for the 21st century requires the use of HTML code. However, it’s important to note that creating email signatures using HTML code manually is complex. It requires a great deal of patience to get right. Common issues such as signatures displaying incorrectly or not all are common when manually building HTML email signatures.

What is HTML?

HTML (Hypertext Markup Language) is code that defines the structure of a professional email signature. HTML code for email signatures uses “markup” for text, images, and other content to display in an email client. This is similar to how it works on web pages. The email client then renders this structure into a readable format.

Sample HTML code for an email signature

Some common HTML elements include:

  • <head>
  • <title>
  • <body>
  • <header>
  • <footer>
  • <img>

These are commonly known as “tags” and are used in pairs. For every tag you use, a corresponding closing tag using a forward slash must be used for the signature to render correctly. For example, <head> would be the opening tag and </head> the closing one. This creates containers for your HTML signature content.

Why use HTML code in email signatures?

Rendered HTML is simply more reliable than just using an image. If you decide to use an image-based email signature, your emails will be marked as spam. Email clients work on the basis that there needs to be more text than imagery in a message.

This is a key criteria that spam filters check for to ensure that an email is legitimate. Even if your email isn’t blocked, the recipient will likely see either a box with a red ‘x’ or no signature at all.

Another factor to consider is that you'll only be able to use one web link. You won't be able to make the rest of your signature clickable. In essence, you are restricting what you can do with your email signature.

Creating HTML email signature templates

Sample HTML code for an email signature

Before your start coding HTML for email signatures, you need to have a design in mind. This often requires the use of a graphic designer who can build a Photoshop file.

However, the more complex the design is, the more difficult it will be to translate into HTML. Your designer might create an outstanding signature template, but that doesn’t mean you’ll be able to replicate it into HTML.

If you have no experience using HTML code, resist the urge to create your email signature in Microsoft Word or Google Sheets. Word processing programs can't read HTML, so will format the signature in a certain way. Then, an email client will interpret the layout differently and display it incorrectly.

Using HTML tables

Using tables in an HTML email signature

To design an effective email signature template, you need to use HTML tables. Tables are a great way to build and control the signature design. You use rows, columns, and padding to give the HTML signature template a professional feel. You then don't have to worry about contact details appearing squashed or your company logo appearing in the wrong spot.

Tables allow you to create all manner of signature layouts depending on your design requirements. They are also scalable, making it easy to add additional content. These tables should then use appropriate padding to create space between the various signature elements.

Translating a design into HTML

Once you start building your design into a fully-fledged HTML email signature, it is important to bear in mind the following:

  • To deliver images including a company logo, you have to host them online. However. they won’t be displayed automatically. You can add your logo as a simple attachment, but this will increase the message size and still be potentially removed by certain email clients.
  • Different email clients interpret HTML differently. HTML in email signatures does not work in the same way as it does on web pages.
  • Every time a message is replied to, the sender’s email client takes the whole email apart and rebuilds it into a new HTML structure.
  • Your HTML guru will have to do lots of testing, and you’ll definitely need to involve your IT department.
HTML code in email signatures can act in different ways

Then, you have to deal with the native issues of the email system you’re using. For example, it’s common knowledge that the disclaimer function in Microsoft 365 (formerly Office 365) and Microsoft Exchange was not designed with high-quality HTML in mind. The clue is in the name: as far as Microsoft is concerned, this function is to be used for a plain-text legal disclaimer only.

Any signature content will also end up appearing at the bottom of any message body. This means that when a recipient replies to one of your emails, the signature is not going to appear under your most recent message. Instead, it will appear at the bottom of the entire conversation, under all the replies and forwards in the email chain.

Composing the HTML signature elements

Every HTML email signature includes two types of content – information and imagery. Simpler signatures may be more effective for some companies and departments, but this only increases the need for consistency and composition strategy.

Contact details

When building an HTML email signature from scratch, there is often a temptation to fill it with lots of contact details. The assumption is that with more contact methods available, a recipient is more likely to get in touch.

This isn’t the case. A minimalist approach is more than adequate for most business needs: an email address and phone number will suffice.

Logo

The next element is the logo, which is the main aesthetic aspect of the signature. This is a critical element when coding HTML for an email signature. After all, your logo reflects your company’s brand identity but is consumed the quickest mentally.

Recipients will glance at it once then move on if it renders correctly. However, if your HTML code is not up to scratch and the image breaks, the lasting impression you’ll leave a recipient is a negative one.

Social media icons

Moving beyond the main contact details, you might want to look at adding social media icons. This encourages recipients to ‘Follow’ or ‘Like’ your company on relevant social media platforms.

However, social media icons in HTML email signatures should be deployed with care. You should only ever use the most up-to-date versions available.

Promotional banners

Your work email channel is constant. This is why your email signature is the perfect place for showcasing new content, highlighting special offers, and so on.

An email signature banner typically goes below the contact details so naturally carries weight and credibility. There are no other distractions to an engaged reader, so tone down the intensity of the banner design to land your message more effectively.

Email disclaimers

Email disclaimers can jar with the text of an email. A ‘Thanks for your business’ message can be spoiled by a notice stating, ‘The views expressed herein do not reflect those of Corporation A’.

However, many markets require a company to list its corporate details in every email. Examples include an employer ID number in the U.S. or company registration number in the UK.

Additional elements to consider

Using HTML in email signatures gives you options to include relevant content in every email you send:

  • Company awards and certification logos
  • Calendar links to let recipients easily schedule meetings
  • 1-click feedback surveys to collect customer feedback.

Using the right email signature size

Getting the email signature size right

Both memory requirements and visible size can impair the utility of an HTML email signature. Notice the word ‘utility’, and not ‘quality’; the appearance of the signature may be the same, but it just won’t be opened by most mail clients.

Any quality gained by using a high-resolution image will be lost as it shrinks to fit in the signature. This is why a memory intensive .png is much less useful than a 30KB .jpg

The maximum width of a signature should not exceed 600 pixels in width. Most emails will see the HTML signature at this size, making it well-suited for most email clients.

However, this does not take into account viewing emails on mobile devices. When the template is viewed on iOS for example, text will extend beyond the edge of the signature. This will make it appear to be restricted to the bottom left-hand corner.

We would recommend that an HTML email signature should be around 450 pixels. This ensures all of the required elements of the signature appear, while reducing any scaling issues on mobile devices.

Other issues to consider

  • Restrict background colors to the contact detail section of your signature. Too much color will detract from your overall message.
  • Email signatures are better without video and animations. Making a signature interesting on its own merits is far more effective than using content just for the sake of it.
  • Underwhelming signatures can be as detrimental as using too much content. Make your signature accurately reflect the vibrancy of your brand and what you stand for.
  • Always consider the context and the related business needs to create email signatures that impress any reader, in any situation.

Managing HTML email signatures with third-party solutions

In the end, designing and creating HTML email signatures can be an arduous task. Specialist email signature solutions, however, make creating them a walk in the park.

They eliminate the need to manually build HTML code for email signature templates and simplify the design process. Once set up and integrated into an email system, all changes are managed centrally.

When using a third-party solution, all email signatures are centrally controlled and there is no need to manage complex HTML code. Better still, it ensures that every email gets a professional signature added to it.

How Exclaimer Can Help:

If you're looking for an easy way to design and manage professional email signatures across your whole organization, we're here to help. Find out more or start your free trial today!

Learn More Start your Free Trial