Part 1: Introduction
You don’t really need to do the tasks in any particular order but we think it’s easiest in the order shown below. Click on the links below in order to go to that part of the guide. We’re adding to the guide regularly. Feel free to drop us a line if you need help with anything in particular, we’d be happy to lend a hand!
- Part 1: Introduction – These prerequisites are required in order to create a HTML email signature.
- Part 2: The HTML Layout – Relatively difficult and deceptively time consuming. Guides you through rearranging HTML so you can quickly make changes to the example signatures.
- Part 3: Customize Text and Font – Shows you how to preview and quickly change the text and text related style in HTML.
This guide details the procedure that should be followed to customize an HTML email signature template. The guide aims to give you enough familiarity with email signature customization to quickly produce your own reliable designs and then quickly adjust it for each staff member in your organisation.
The guide doesn’t cover important design considerations or best practices since we cover those in other articles, and it does not go into the reasons for the addition of the strange extra HTML code since you’ve probably got better things to do! We might cover this in a future article though if there’s interest in the topic.
Is this difficult? Creating professional email signature templates in html is fundamentally, much more difficult than it seems. So long as you carefully follow this guide, you'll end up with a properly formatted and reliable email signature that takes up little HDD space.
Required Knowledge: None! This guide is aimed at people with no experience in html what-so-ever!
Time to complete: between 1 and 3 hours depending on the level of customization.
Install a few programs and set up a few things
You’ll need a few programs to be able to edit the signature correctly. Even if you have some alternative programs, for the sake of consistency, I’d recommend that you use the following programs, since they match up with the steps in this guide.
Google Chrome – Formatting varies slightly across browsers for email signatures so we’ll stick with Chrome.get Chrome
Sublime Text Editor – It makes editing code easy through a variety of shortcuts and formatting.get Sublime Text Editor
Be sure to click the “Add to explorer context menu” tick box on installation.
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 programs 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 extension for a variety of reasons. For now, just trust that this is an essential step!
Download an Email Signature Template
Click the link below, choose and download an email signature template, then just come straight back to this page. You should choose a template for your company based on the layout, not the colors, since colors are easy to customize, but the template structure itself is more difficult.email signature templates
I’ll be using Consuela Bananahammock’s signature for this guide. In Windows, you should be able to find the file in Windows Explorer (normally in your downloads folder), right click and click “Extract All…”.
Understand the Components in the Template Download File
It’s important to get a broad overview of the files that you will be using. If anything is unclear in this description, come back and review it after you have customized the signature and it should make much more sense. After opening the extracted folder, you’ll see a list of about 10 files. The number of images and exact file names vary depending on which template you downloaded.
The files you will be using:
- email_example.html – This file is your signature (except images). More precisely, it contains HTML code, which, when read by a browser such as Google Chrome, will create the layout and content of your signature. It also contains CSS code, which controls the styling of the signature. The file itself does not contain the images, and instead contains a web address (URL) for the image. The browser then uses the URL to insert the image into the signature. You will edit this file as needed, to customize the look for your branding.
- signature-example-minified.html – This file contains the same code as email_example.html, except that the extra spaces and new lines have been removed from the file. You will use a program to generate a new version of this file at the end of the guide, ready for use in email programs.
- image-1.png (and any other images) – These files are part of the signature and their location is referenced in email_example.html. You will be creating and formatting images to replace these in the customization process.
- signature-example.psd – This file is only useful if you have Adobe Photoshop, if you do, designing your signature using this template should save lots of time. If you don’t have Adobe Photoshop, don’t worry… Our instructions for editing images are for more generic image editing software.
- LICENCE.txt – Be sure to read through the licence to check that your use case is inside the scope of the licence.
- email-signature-example.png – Just a preview of the final product.
- read-me-header.png & README.html – Don’t worry about these, they are just included for anyone who came across the template without having reference to this guide!