How To Design A Custom HTML Email Signature

It’s a fully-responsive email signature, and the HTML and CSS code is super clean.

So that your email signature will always look good, no matter what type email client you’re using.

You can just copy/paste this code and use it either in Gmail, or in Outlook on Windows, or in the Mail app on MacOS—It’s gonna look good everywhere.

Table of Contents:

1. Download the HTML code
2. Fill in the information
3. Customize the CSS
4. Using an email signature
5. Conclusions

My clients usually reach out to me for full brand identity design, so I deliver email signatures as a part of that package.

Basically, I created my own minimalist HTML email signature template that I’m able to re-use with each new client.

That way, I’m able to customize it a bit, and then just replace the person’s name, photo and email to create a set of signatures for the whole team.

Let’s jump right into it.

1. Download the HTML template

If you want to have a truly custom email signature, then you need to create it outside of your email app.

This is email clients do NOT have the ability to edit the HTML code—they just have some in-built simple visual editors.

However, it won’t give you full control over your HTML and CSS, so that’s why I wrote a custom code in Adobe Dreamweaver.

If you don’t know HTML & CSS—don’t worry.

You can just download my free template and then follow this article to customize it to your needs.

Now, once you have downloaded my template, then just open it up in some HTML editor (or even in a simple text editor).

If you’re a graphic designer, then you probably have the Adobe CC subscription so you can just download and use Adobe Dreamweaver.

2. Fill in the personal information

Once you can see the code in your editor, all you have to do is locate a few comments within the code.

Locate all comments and then change your personal information, links to the logo file, your photo etc.

Just find the below comments in that HTML code:

• NAME—change the person’s name
• TITLE—change the person’s job title
• COMPANY—change the company name
• ADDRESS—change the company address
• LOGO—replace the link to your logo file
• SOCIAL LINKS—replace links to social media

Remember that your logo must be hosted somewhere online, because you’ll need the URL to that PNG file.

Also keep in mind that your logo should be a small and optimized PNG file—around 160px width.

Same with the profile picture—not bigger than 100px width.

Also remember to change the website URL as well, because that logo is a link so that people can click it to visit your website.

You will also need to replace links under social media icons etc.

3. Customize the CSS

Next, let me show you how can you customize the CSS a bit so that it matches your brand.

You can adjust things like colors, fonts, font sizes and you can even add some special custom CSS effects.

For example—for my client, Lyntics, I created a border around the photo so that it goes well with the logo (gradient).

In order to make it truly unique, you will have to either know some CSS coding, or you can just use Dreamweaver and edit that CSS visually (without writing the code).

However, this template is so simple (and universal) that you can easily make it look “on brand” in just a few minutes.

4. How to use a custom HTML email signature

Once you’re happy with how your custom email signature looks—then you will want to know how to actually use it, right?

All you need to do is to copy/paste that HTML into your email app:

How to add an HTML email signature in Gmail

If you’re using Gmail—here’s how to insert your HTML signature:

1. In your Gmail account and go to Settings.
2. Scroll down until you see “Signatures” and click “create new”.
3. Copy/paste your email signature into the box (rendered HTML, not code).

Compose a new email to see if your signature displays properly.

How to add an HTML email signature in Mail app

If you’re using Mail App the process is similar, here’s how to add your signature:

1. In your Apple Mail app and go to Settings and choose “Signatures”.
2. Add a new signature and give it a name.
3. Copy/paste your signature (uncheck “always match my default message font”).

Now, similar instructions will apply for other email clients out there—like Outlook or Yahoo mail.

Just remember that HTML signatures will only work with email apps on your computer (not on mobile devices).

This is because only email clients on computers accept rich text signatures (HTML/CSS).

This signature won’t work in the Mail app on your iPhone for example.

Conclusions

You might wonder—why you need a custom HTML email signature?

If you’re a business owner, you can make yourself look professional.

Since every company needs to use email these days, why not giving yourself some authority & credibility with a custom email signature?

This will certainly make you look good in the eyes of your recipients (your clients or customers).

If your a graphic designer, then you can just start using my template with your clients.

Just add it to your brand identity package and I guarantee this will impress your clients.

And after all—how long does it take you to do that?—Probably just a few minutes.

Even if your clients hire you for a simple logo design, you can just throw in a custom signature as a gift—that will definitely make your clients happy!

‍