How to create HTML clickable email signature with social icons

What is an email signature?

Email signature looks like a digital visiting card. In real life, your visiting card contains your personal information like phone number, address, designation, company logo, etc. So an email signature will contain all of your personal information like the visiting card.

How an email signature work?

An email signature like the default text of your email body. If you set your email signature just one time, it will add to your every email’s footer automatically.

Why should use an email signature?

An email signature is important for us. It proves your professionalism. Also, it will save your time. Because you do not need to write your personal information every time.
Suppose, every day you email to hundred people now if you add your personal information or your company information(logo, social link, etc) to your email footer, they will easily understand who you are and how professional you are.
So if you want to be professional use an email signature your email.

Characteristics of a Professional email signature

A professional email signature should be simple and informative. You should keep your main information with a simple design. A professional email signature should have some characteristics like.

• ✅ Informative
• ✅ Clickable
• ✅ Simple and User-friendly design

What is a Clickable email signature?

One of the main characteristics of a professional email signature is clickable features. We must need to make our email signature(website, social medial link, phone, email) clickable so that our clients can easily check the details of us(company)

How to make an email signature clickable?

To make your email signature clickable,
👉 Use HTML anchor tag to make your social media and website clickable.
👉 Use the ‘tel’ prefix to make your phone clickable.
👉 Use the “mailto” prefix to make your email address clickable.

Code of "Clickable email signatue"

<a href="https://insidethediv.com">insideTheDiv</a>
<a href="tel:+8801637017926">01637017926</a>
<a href="mailto:contact@insidethediv.com">contact@insidethediv.com</a>

To make a professional clickable email signature please contact us.

A “Simple and user-friendly email signature”

Simple is always best so we should keep our email signature simple. Also, we need to make it user-friendly so that our clients can easily read and memorize our information.

To make it simple and user friendly

• ✅ Divide it between two parts(vertically or horizontally) one part for image and logo and another part for your information.
• ✅ Use Icons (social media, address, phone, email, website).
• ✅ Use soft color.
• ✅ Use readable fonts.
• ✅ Make responsive(small size).

How to use an icon to an email signature

To make our email signature professional and simple we need to use icons. But the problem is we can use any icon library to use icons in our email signature. That why to solve his problem we can use the image(png) instead of using the raw icon.

How to use an image to the email signature

To use images in our email signature, first of all, we need to host the image, so that it shows our client-side easily.

The free and secure image host platform

There are lots of platforms where you can host your image freely but we suggest to use

1. Github
2. Google Drive

Note: After uploading the image to your GitHub or google drive make it public and use the image address to your email signature.

How to use CSS to an email signature?

we know we can apply out CSS external internal and inline and for email signature, most of the platform does not support internal CSS. That's why we need to use inline CSS to create an email signature.

div or table tag for HTML email signature

Once Upon A Time HTML table was so popular And using the table tag we created our website or web pages but now in 2021, the table tag is not the most used tag. Because the table tag is not responsive.
But to create an HTML email signature, our email platform suggests users to use the table tag. Because our email signature should be single.

Code of "HTML email signatue"

<!-- Begin E-mail Signature -->

<table cellpadding="0" cellspacing="0" border="0" style="width: 320px; background: #ebebeb">
	<tr>
		<td valign="top" style="padding:0px; padding-right: 7px; border: 0; width: 40%;">
			<!-- logo or image content -->
		</td>
		<!-- End td -->

		<td style="padding: 0; padding-left: 12px; width: 60%;">
			<table cellpadding="0" cellspacing="0" border="0" style="margin: 0; padding: 0; width: 100%;">
				<!-- another table-->
			</table>
		</td>
		<!-- End td -->
	</tr>
<!-- End row -->
</table>
<!-- End E-mail Signature -->

How to make a responsive email signature?

We already know that to create email signatures we need to use an HTML table tag instead of a div tag. And the table tag is not responsive, also inline CSS is the best way to apply the style in our signature.
So the best way to make an email signature responsive is to create a small-sized (horizontally) signature. We can place our extra information vertically.

The standard email signature size in pixel

The standard size of an email signature is:
Width : 300px to 600px,
Height: 150px to 200px

Note: you can increase the size of your email signature based on your clients (who will receive) device size. If your all client use large devices you can use large(width) email signatures. If your clients use large and small size devices we suggest you keep it small horizontally and make it large(if need) vertically.