How to create an HTML email signature and footer
20 April 2022
Email signature templates are an extension of your business brand, being just as important as any other marketing material. 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 lot of patience to get it right. Common issues like signatures displaying incorrectly or not all are common when manually building HTML email signatures.
What is an HTML email signature?
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.
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 email 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’re restricting what you can do with your email signature.
How to create HTML email signature templates
Before you start coding an HTML email signature, 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 it into HTML. Your designer might create an outstanding signature template, but that doesn’t mean you’ll be able to replicate it in 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.
Why doesn’t my email signature align with my email body text?
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. They also ensure that your design will align with an email’s body text.
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’re also scalable, making it easy to add additional content. These tables should then use appropriate padding to create space between the various signature elements.
How to convert an email signature to HTML
Once you start building your design into a fully-fledged HTML email signature, it’s 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 doesn’t 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.
Any signature content will end up appearing at the bottom of any message body due to native email system limitations.
Creating 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 of composition.
1. Contact details
When building an HTML email signature from scratch, there’s 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.
2. Logo
The next element is the logo, which is the main aesthetic aspect of the signature. This is a critical element when coding an HTML email signature. After all, your logo reflects your company’s brand identity but is consumed the quickest.
Recipients will glance at it once and then move on if it renders correctly. However, if your HTML code isn’t up to scratch and the image breaks, the impression you’ll leave a recipient is a negative one.
3. 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 added with care. You should only ever use the most up-to-date versions available.
4. Promotional banners
Your work email channel is constant. This is why your HTML 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.
5. Email disclaimers
Email disclaimers can jar with the text of an email. 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 a company registration number in the UK. Therefore ensure the font size for your disclaimer doesn’t overwhelm the main signature.
Managing HTML email signatures with third-party solutions
In the end, designing and creating HTML email signatures can be a time-consuming 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.
Learn more about Exclaimer and get yourself an interactive product tour today.
