Do you want to create a professional HTML email signature that is compatible with Outlook, Apple Mail, Gmail, and many other email applications? You’ve come to the right place! In this guide, you’ll learn how to create a beautiful email signature that looks great and is super functional.
Before we begin, you should know that manually creating an email signature can sometimes be a time-consuming and tedious task. We always recommend using an email signature generator as that is the quickest and easiest way to end up with an amazing email signature. However, if you want to create an email signature on your own, keep reading!
1. Download an Email Signature Template
The best way to create an HTML email signature is to start with a template and then modify it to suit your needs.
Selecting the Right Email Signature Template
When browsing through our templates, it’s important to consider a few things:
- Look at the layout of the template – It’s relatively easy to change things like images, colors, fonts, etc. However, it’s often more difficult to change the positioning of elements. When selecting a suitable email signature template, you should always check whether the layout looks (roughly) correct. This means checking the position of the images, social icons, text, spacing, and borders.
- Horizontal or vertical layout – Having a mobile-compatible email signature is critical in this day and age. Vertical layouts work better for mobile devices. However, if you don’t have too much information in your email signature and can keep it narrower than around 400 pixels, you might be able to get away with using a horizontal layout.
- Overall layout size – Even though editing things that contribute to the overall size of the layout is relatively easy, it’s just easier if you use a template that already has the correct font, font size, border widths, spacing, etc. The closer the chosen template is to your final email signature, the less you will have to edit.
Components of the Downloaded Template File
Here are the components of the downloaded email signature template ZIP file:
- template.html – This is the main file we will be using to create your HTML email signature in this guide. It contains the minified HTML code required for your email signature to display correctly.
- instructions.txt – This is a text file that has some information about the downloaded template inside it.
2. Install Some Programs and Set up a Few Things
You’ll need a couple of applications to be able to create your email signature correctly. Even if you have some alternative applications, for the sake of consistency, we recommend that you use the following applications, since they match up with the steps in this guide.
Formatting varies slightly across browsers for email signatures so we’ll stick with Chrome.
Sublime Text Editor
It makes editing code easy through a variety of shortcuts and formatting.
Show File Extensions
Most files on a computer have extensions in the file name, but they are turned off in Windows by default. Your computer links the file types to different applications on your computer. For example, opening a file called file.html may open it in Internet Explorer, Chrome, Sublime Text editor, or maybe Notepad. We’ll need to be able to see the file extension for a variety of reasons.
Simply open File Explorer > View > Tick “File name extensions”
3. A Necessary Introduction to HTML
The goal of this section is to get you familiar with HTML, CSS, all the different terminology, and also HTML tables. With this knowledge, you’ll be able to create an email signature in just a few minutes!
We’re not assuming any prior knowledge here so there’s a fair bit to cover, but this guide is fairly concise! The best way to start writing/editing HTML code is to go slowly and carefully. Mistakes are proportional to assumptions!
Feel free to look over this HTML Reference if you aren’t sure about how a specific tag works or what it does.
- Tag – the component name that is inside the angle brackets (<>). For example, this is the table tag: <table>
- Element – the content within the opening and closing tags, including the tags themselves. For example, <span>This is some text</span>
- Attribute – the attribute is inside the tag brackets (<>). For example, this is the border attribute inside the table element: <table border=”0″>
- Attribute Value – the value assigned to the attribute. For example, the border attribute value in this case is set to zero: <table border=”0″>
- Parent Element– the outer element which contains the current element.
- Child Element – the inner element which is a direct descendant of the current element.
- Sibling Elements– any elements that have the same parent element as the current element.
- CSS Property – the first part (before the colon) of the attribute value inside the style attribute. For example, the property in this case is padding-bottom: <td style=”padding-bottom: 4px;”>
- CSS Property Value – the second part (after the colon) of the attribute value inside the style attribute. For example, the property value in this case is 4px: <td style=”padding-bottom: 4px;”>
HTML Structure – A Tree-Like Composition
In the context of HTML email signatures, all tags come in pairs, except for <img>, <!DOCTYPE>, <meta>, <style> and <br> tags. You can think of tags as containers that can hold more tags inside them. This means that (excluding the tags just mentioned) for every tag you come across, there must be a corresponding closing tag in the email signature.
Closing tags can be identified because they have an additional forward slash (not backslash!) after the opening angle bracket. So <td> is an opening tag, and </td> is the closing tag. Any code inside these tags can be thought of as inside the container. In the case of table elements, the code is translated into literal two-dimensional boxes, so the analogy works quite well.
Tags can also have attributes attached to them that alter the behavior of the tag in some way. When making your HTML email signature, we’ll be adding attributes to control the signature style and compatibility with the many email clients.
In the context of email signatures (not all HTML), tag attributes are always written after the tag name in the opening tag, always have an attribute name, followed by equals and then by double quotation marks, with some information between the quotation marks.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <span style="font-family:Verdana, Geneva, sans-serif;font-size:12.0px;"> This is a sentence which will be shown using the Verdana size 12 font. </span> </body> </html>
In the above example code, you can see the tree-like structure of HTML, where tags are nested inside other tags. You will also notice that some tags have attributes and values, while others don’t.
HTML Tables – The Basis of an Email Signature Layout
Firstly, it’s important to understand that around 95% of the HTML code in an email signature is related to tables. So, when you create an HTML email signature, you’re mostly going to be dealing with <table>, <tbody>, <tr>, and <td> elements. These are the “core scaffolding” elements required to make a fully functioning email signature.
A brief explanation about HTML table related elements:
- <table> … </table> – This is the table.
- <tbody> … </tbody> – This is the table body and always sits directly inside the table element. Easy!
- <tr> … </tr> – Stands for Table Row.
- <td> … </td> – Stands for Table Data. This is the equivalent of a column and can be used to hold a single image, some text, or even another table – yes, tables can be nested.
You will need to become familiar with some table characteristics in order to know how to arrange the HTML code for your new email signature. Some may seem trivial, but if you find yourself looking at your HTML and things aren’t appearing as you expected, just ask yourself whether all of the points outlined below have been adhered to and it should become clear where you went wrong.
Some guidelines related to HTML table structure:
- Tables are always square or rectangular but they cannot be L shaped.
- Every column inside any particular row has the same height as every other column inside that row.
- Every column inside any particular column has the same width as every other column inside that column.
- Columns must be placed directly inside rows.
- Rows must be placed directly inside the table body.
- The table body must be placed directly inside the table.
<table> <tbody> <tr> <td style="border-collapse: collapse;padding-bottom: 4px;"> <span style="font-family:Verdana, Geneva, sans-serif;font-size:16.0px;font-style:normal;line-height:18px;font-weight:700;color:#444444;display:inline;"> MEGHAN DUNLOP </span> </td> </tr> <tr> <td style="border-collapse: collapse;padding-bottom: 4px;"> <span style="font-family:Verdana, Geneva, sans-serif;font-size:12.0px;font-style:normal;line-height:14px;font-weight:400;color:#444444;display:inline;"> Project Manager </span> </td> </tr> <tr> <td style="border-collapse: collapse;padding-bottom: 14px;"> <span style="font-family:Verdana, Geneva, sans-serif;font-size:12.0px;font-style:normal;line-height:14px;font-weight:700;color:#c65e5e;display:inline;"> Flame Tree Creative </span> </td> </tr> </tbody> </table>
In the above example code, there is a table element, with 3 rows, and each row has a column inside it, and each column has a span inside it. Some of the tags have style elements that determine the styling of the data inside them.
CSS – Styling of Email Signatures
CSS stands for Cascading Style Sheets, and although HTML email signatures don’t use CSS in the traditional sense where styles are defined with classes, they still use CSS properties. If you aren’t sure how a specific CSS property works or what it does, take a look at this CSS Reference.
Since most email clients don’t support the use of <style> tags, this makes it impossible to define and use stylesheets within HTML email signatures. This also means that you cannot use CSS media queries to define styles for various devices and viewport sizes. For example, a simple CSS media query could make all the fonts bigger/smaller when the email signature is viewed on mobile devices. This would be handy to have in the modern world. This leaves only one option when it comes to email signatures and CSS, which is to define styles inline for each relevant element.
CSS styles flow down the HTML tree, which means if you define a style on a <td> element, it will be applied to the child <span> element unless that <span> element has the same CSS property defined on itself, in which case it will use the CSS property value of the <span> element, rather than its parent <td> element.
CSS properties are separated with semi-colons (;). This means you can have multiple CSS properties in the one style attribute as long as you separate them with a semi-colon.
<table style="font-family:Arial,Helvetica,sans-serif;line-height:0px;font-size:1px;padding:0px!important;border-spacing:0px;margin:0px;border-collapse:collapse;"> <tbody> <tr> <td style="border-collapse: collapse; font-family: Verdana, Geneva, sans-serif; font-size: 16px; font-style: normal; line-height: 18px; font-weight: 700; padding-bottom: 4px;"> <span style="font-family:Verdana, Geneva, sans-serif;font-size:16.0px;font-style:normal;line-height:18px;font-weight:700;color:#444444;display:inline;"> MEGHAN DUNLOP </span> </td> </tr> <tr> <td style="border-collapse: collapse; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-style: normal; line-height: 14px; font-weight: 400; padding-bottom: 4px;"> <span style="font-family:Verdana, Geneva, sans-serif;font-size:12.0px;font-style:normal;line-height:14px;font-weight:400;color:#444444;display:inline;"> Project Manager </span> </td> </tr> <tr> <td style="border-collapse: collapse; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-style: normal; line-height: 14px; font-weight: 700; padding-bottom: 14px;"> <span style="font-family:Verdana, Geneva, sans-serif;font-size:12.0px;font-style:normal;line-height:14px;font-weight:700;color:#c65e5e;display:inline;"> Flame Tree Creative </span> </td> </tr> </tbody> </table>
In the above example code, you will notice that some CSS properties (and their values) are repeated in child elements even though the parent has that same property and value defined. You might think that this is over-specified and inefficient, but this is actually done for email application compatibility reasons. That way, your email signature looks good no matter what email application it is viewed on.
4. Tips for Working With HTML Files
To create an email signature, you will need to be comfortable editing HTML, which can be very frustrating at times.
Here are some helpful tips which will make the journey much more bearable.
Keep Both Chrome and Sublime Windows Open
When modifying your signature HTML file, having the ability to quickly see the changes to your email signature is paramount. You can achieve this by having both Sublime and Chrome open at the same time.
Simply position each window next to the other so that you can see both as per the screenshot below. This makes editing HTML code much easier.
Use Chrome’s Inspect Feature
Chrome has a very helpful feature called Inspect. It shows you all the elements of the HTML document (in this case, the email signature) that are rendered. It also shows you which CSS properties are applied to each element.
You can use the Inspect feature to modify and test things directly in Chrome (such as colors, fonts, and even the HTML itself) before making changes to the HTML file.
Important: Any changes you make in Chrome are not saved to the HTML file and will revert back once you refresh the page. Hence, it’s important to remember or write down what changes you’ve tested in Chrome that you want to implement in your HTML file.
To use the Inspect feature, right-click on any part of the email signature (eg. name, job title, an image), and click on Inspect.
This will open the Inspect window where you can click (or hover) on specific elements to see how they interact with everything else.
It’s important to get comfortable using Chrome’s Inspect feature when you create an email signature.
Changing CSS Properties in Chrome
To add/change the CSS properties of any element:
- Right-click on a specific element where you wish to change the CSS properties, and select Inspect.
- Under the Styles section, you will see all the different CSS properties applied to that element, such as “font-size: 12px;” or similar.
- You can either add additional CSS properties (which may override existing ones) by putting them into the element.style part, or you can modify an existing CSS property by just clicking on its value and changing it. To finish editing simply press Enter on your keyboard or click in the whitespace.
Editing HTML in Chrome
To edit HTML in Chrome:
- Right-click on a specific element where you wish to change the HTML, and select Inspect.
- In the main Elements window which shows all the HTML, right-click on the highlighted part (if this is the part you wish to change) and select Edit as HTML.
- You can change the HTML by typing directly into the text area, or you can remove that part of the HTML by selecting all of it and deleting it. Once your changes are done, simply click outside of the edit box.
Use Keyboard Shortcuts
These shortcuts will speed up your workflow significantly:
- CTRL + F (Find) – When creating HTML email signatures, CTRL + F is your friend! No really, it is! Why look for something manually when you can find it by using CTRL + F? Whether you’re inspecting elements in Chrome, or in Sublime looking for a specific line of code, CTRL + F is always available. Use it!
- CTRL + R (Refresh in Chrome) – When you’re confident editing your email signature HTML code, you tend to make changes fairly quickly and it sometimes becomes cumbersome to manually click the refresh button in your browser to reload the changes you’ve made to your HTML file. A quicker way is to just press CTRL + R in Chrome to reload the file.
- CTRL + H (Find and Replace in Sublime) – Sometimes you will need to make the same change in multiple places (eg. fonts/colors), and this is where Sublime’s Find and Replace feature comes in handy. You should always use Replace, rather than Replace All. Replacing one instance at a time reduces the chance of mistakes.
- CTRL + S (Save in Sublime) – Quite obvious, but worth mentioning as it’s sometimes forgotten.
- CTRL + Z (Undo in Sublime) – Sometimes mistakes are made, use undo to take some steps back.
- CTRL + SHIFT + Z (Redo in Sublime) – Want to go forward a few steps? Use redo – it’s super handy!
Don’t Get Caught by Impostrophes!
You’ll notice that some parts of the HTML code uses apostrophes. For example, when specifying a font-family CSS property, sometimes the font value uses single quotation marks which you will need to pay particular attention to.
This is particularly problematic when you copy HTML code from the internet because of how apostrophes are converted between say WordPress and a text editor such as Sublime.
What looks to you like an apostrophe, may actually be an impostrophe. Not sure what an impostrophe is?
Can you see the difference in the apostrophes? If you use the bad ones when dealing with HTML, you will run into issues.
Problems caused by impostrophes are sometimes very hard to troubleshoot.
All Code Serves a Purpose
A general rule when modifying HTML: If you don’t understand why it’s there, don’t touch it.
You may notice that some of the HTML/CSS code that we will be working with may contain weird/duplicate/additional parts that might seem unneeded. However, after spending over a decade testing email signatures, we’ve developed a deep understanding of how email applications render HTML. So you can rest assured that these weird bits of HTML/CSS are definitely needed to make your email signature compatible with as many email applications as possible.
If you’re installing this email signature in Gmail, we recommend leaving the template minified, even while modifying the HTML code. Otherwise, if you’re installing this signature in another email app, feel free to use an online HTML beautifier tool to make the HTML code more readable.
Important: If you beautify the HTML code, do not minify it after you have completed editing the template. Our minification process is very unique (for email client compatibility reasons), and if you minify the HTML code again, it will likely break some parts of your email signature.
Get Familiar With the Workflow
To create an email signature without going completely insane, you will need to get familiar with the workflow for editing HTML files.
Using this workflow will make testing much easier and will ensure you have a better chance of catching any problems as they arise.
5. Getting Started
The next sections detail the procedure that should be followed to create an HTML email signature by modifying your downloaded template. The aim is to give you enough familiarity with email signature customization to quickly produce your own reliable design so you can then easily adjust it for each staff member in your organization.
1. Extract the downloaded email signature template ZIP file – You can either make a new folder or choose an existing area on your computer to extract the template files.
2. Open the template.html file in Google Chrome – You should be able to just double-click to open it in Chrome. If you can’t, then right-click on it and select Open with > Google Chrome. When it’s open, you should be able to see a complete signature including images. Keep the file open in Chrome as that is where you will be checking how your signature looks whenever you make any changes to the HTML code.
3. Open the template.html file in Sublime Text Editor – While Chrome is open, right-click on the file and select Open with > Sublime Text Editor. Another option is to drag and drop the file into Sublime Text Editor.
6. Text (inc colors, fonts, sizes, weights, styles)
7. Images (inc social icons, sizes)
- Free Social Icons Download – If you’re looking to add/change social icons, there is a huge library of free social icons available for you to use.
- Image Formats – Not all image formats are created equal! Learn what image format you should be using in your email signature.
- Avoiding Blurry/Pixelated Images – Learn how to avoid blurry or pixelated images in email signatures.
8. Separators (inc colors, width/height)
- HTML Tables – A good understanding of HTML tables is recommended before modifying an email signature layout.
Although this tutorial is long and very thorough, hopefully you’ve learned how to create an HTML email signature that is professional and functional!
Once you’ve finished creating your email signature, head over to our installation guides for help with installing it to your email application.