How to create HTML clickable email signature with social icons
- Last Updated : 4/07/2021
To make our "email signature" productive, we need to make it clickable first. Also Putting clickable Social media icons is the best practice.
In this post, we will learn "how to create an HTML clickable email signature with a social icon".
List of topics we will cover in this post
- ✅ What is an email signature?
- ✅ How an email signature work?
- ✅ Characteristics of a Professional email signature
- ✅ The information we should keep in our email signature
- ✅ What is a Clickable email signature?
- ✅ How to make an email signature clickable?
- ✅ How to create a “Simple and user-friendly email signature”?
- ✅ How to use an icon to an email signature?
- ✅ How to use an image to the email signature
- ✅ How to use CSS to an email signature?
- ✅ div or table tag for HTML email signature
- ✅ How to make a responsive email signature?
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:firstname.lastname@example.org">email@example.com</a>Download a complete email signature for free!
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
- 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 -->Download Complete Source Code Free.
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.
Still you face problems, feel free to contact with me, I will try my best to help you.