Can’t Find the Perfect Email Signature? Code Your Own!

Most basic guide to generate email signature using HTML and CSS.

Photo by Solen Feyissa on Unsplash

So, you got bored of the classic email signature you keep sending to your co-workers ? You have probably searched for some inspiring signatures in Pinterest and you found some. Still, you couldn’t mimic them in your email client as it provides you with a limited text editor with few customization options.

If you are exactly in this situation, this post will help you code your own email signature.

You won’t need much to make the perfect signature, all you will need is :

• some basic understanding of HTML and CSS,
• email client, obviously (Gmail, Outlook, Thunderbird or any other client),
• finally, some inspiration and creativity ‍🎨.

How are we building our own email signature ?

I opted for using HTML and CSS as they give more freedom in styling your content without sticking to limited options like font style and font size. Still, each email client can handle the content of your signature differently, so you should better play with the most basic components in HTML. For the following examples, I will be using div, imgand table elements.

The plan is to create an HTML file, fill it with code that will generate the perfect email signature, then move it to our email client.
As simple as it sounds ✌🏻.

Prepare the overall structure of your signature

After filling my day’s history with searches in Pinterest and Google Images. I made my mind and I chose the following structure as my future email signature. Not that stylish but it shows clearly all the required information.

Basic structure of an email signature

Jumping directly into your text editor to mimic this design is not the recommended way I would suggest. Instead, we should analyse the overall structure of the picture, determine what are the big pieces used to get this layout, then build each component step by step. You know… baby steps.

So, the layout I can quickly notice being used in this design is the table layout:
- each line in the picture is a row in the table (or tr in HTML)
- each line has its own text with some specific style
- last line contains multiple columns (or td in HTML)
- each column in last line contains a hyperlink and an image.

We can easily highlight all the described components as follows:

Highlight each component in email signature structure

Build your email signature

Now that we have an overall idea on the structure of our email signature, let’s start building the HTML representation of that structure.

First, we will start with a global skeleton which we will improve step by step.

Basic HTML layout for email signature

As the comments show in the HTML code, each tr element will contain additional HTML elements which should produce the design we want.

We will start with main section which shows your full name, inside its correspondant tr element, we will add a single column td with a span containing a simple text.

Full name section in HTML

Easy, isn’t it ? Just like the previous operation, we will add sample code for the other sections: job title, company and contact information.

Full name, job title, company & contact information sections in HTML

Remember how we described the layout for the social media links; they are multiple columns inside a single row, each column contains a link and a picture. That being said, we will need additional HTML elements: a and img.

Basic layout for social media links in HTML

Add style and customization

You can now open your final HTML page in your favorite browser and embrace your new email signature …

Not-that-pretty email signature

Something is wrong ? Indeed, your HTML page has valid structure, but lacks good representation that fits your needs. Therefore, we will need to add some custom CSS code.

In your HTML page, specifically in the head element, you will need to add the style element and fill it with your magic recipe.

Basic stylesheet for table structure

The previous simple style should at least produce some readable content:

Output with basic stylesheet

We’re almost done with building our email signature, you can go ahead and play with HTML and CSS until you get the desired layout that suits you.

I improved the last example to produce the exact design we analyzed previously and added a cool simple feature. Let’s take a look at the code first:

This should generates the following output:

Final output of email signature sample template

This is like a mini UI for previewing your email signature with an additional button to copy your email signature (that’s the cool feature in case you’re still wondering 🤯).

The Copy button uses JavaScript to select everything inside the box and copy it to your clipboard. It is an additional feature and it is not mandatory for the purpose of this post.

Add your email signature to your email client

We are finally in the most exciting part 👏. You have already opened your HTML page in your browser, here are the steps you will need in order to add your email signature in your future emails:

• copy the content of your HTML page (manually or using the magical button we introduced previously)
• open your email client and head towards the signature settings, its location may vary depending on which email client you have, you can always Google it 🔍.
• usually, your email client will provide you with a small text editor where you can compose your signature. All you have to do now is paste the content of your HTML signature. Et voilà 💪🏼 !

Maintain your email signature

Now that you have a super duper email signature, you would want to save it somewhere for future maintenance in case of job promotion or contact information update (can’t say if you may need to change your name 🤷‍♂️).

One of the places I would suggest is Github. If you have one file like mine, use the Gist feature. But, if you’re an advanced web design ninja and you may need multiple files, then go ahead and create a New Repository dedicated to your email signature.