An HTML Signature allows readers to click on individual sections of the signature, taking them directly to the sender’s website, social media pages or blog. This increases the chance of the reader taking action there and then rather than typing the website address into the address bar. Something many choose to do later – then forget!
A few months ago I was asked to add a signature to an email account for a client. No problem I thought! However, they had seen one they liked from another source and wanted something similar. It should have their logo, company name, contact details etc. They used Outlook for their email. I soon discovered each email client had their own way for adding signatures which was not always straightforward.
Adding an Image Signature To Outlook
There was no obvious way to add an html signature to an Outlook email address so my workaround involved producing an image which contained all the information the client needed and then adding the image as the signature.
The result looks pretty good although I say so myself. Although the whole image links to the client’s website (when in their email) it is not possible to visit their social media pages directly from it. Readers have to click through to their site and then social media pages if required from there.
This made me start thinking about our own email signature. We use Gmail for our email. Perhaps it would be easier to add an html signature in Gmail. Like the cobbler taking his time to get round to fixing his kid’s shoes, I have eventually found the time to look at our signature.
Producing An HTML Signature
It is all very well talking about adding an html signature, but how do you make one in the first place. Unless you are familiar with html it will be difficult. There are several html signature generators to be found online but many require you to download software or sign up to an account. Not everyone wants to do this. There has to be an easier way.
Hopefully this will help! I produced the following code for our own Gmail signature. To be honest I started off by playing with it hence the reason I used free social media icons from findicons.com. However, if findicons ever remove these images from their site they will disappear from my signature. Ideally you want the images somewhere permanent, ideally on your own site.
Web Design and SEO Consultant
If you want a similar html signature for yourself, feel free to copy the code below into notepad++, a simply code editor, or the even simpler ‘notepad’ which comes in the windows accessories folder of windows pcs. Make sure you save the file as html.
<table> <tr> <td rowspan="2" style="border-right: 1px solid #333333;"> <a href="https://www.colintonwebsitedesign.co.uk/"><img src="https://www.colintonwebsitedesign.co.uk/wp-content/uploads/2015/07/Elegant_Business_Girl-04-e1437126690527.png" width="84" height="120" border="0"></a> </td> <td colspan="3" style="padding-left:10px;"> <font style="font-weight:bolder; color:#333333; font-size:12pt;">Dilek Taylor</font> <font style="color:#1F497D; font-size:11pt; font-weight:bold;">Web Design and SEO Consultant</font> <font style="font-size:11pt;"><a href="https://www.colintonwebsitedesign.co.uk/" style="font-weight:bolder; color:#88CFB6; text-decoration:none;">www.colintonwebsitedesign.co.uk</a> <a href="mailto:firstname.lastname@example.org" style="font-weight:bolder; color:#FFC022; text-decoration:none;">email@example.com</a></font> </td> </tr> <tr> <td style="padding-left:10px;"><a href="https://www.facebook.com/ColintonWebsiteDesign/" target="_blank"><img src="http://findicons.com/files/icons/819/social_me/64/facebook.png" width="32" height="32" border="0"></a> </td> <td><a href="https://twitter.com/ColintonWeb" target="_blank"><img src="http://findicons.com/files/icons/819/social_me/64/twitter.png" width="32" height="32" border="0"></a> </td> <td><a href="https://www.colintonwebsitedesign.co.uk/blog/" target="_blank"><img src="https://www.colintonwebsitedesign.co.uk/wp-content/uploads/2015/07/blogheader.png" width="127" height="32" border="0"></a></td> </td> </tr> </table>
You can edit the code to add your own images or text. To add a different image, just go to the image you want. The image must exist somewhere online already, not just in a folder on your pc. Make sure any image you use is free of copyright implications and preferably somewhere permanent e.g. on your own website. Just right click on the image you want to use and choose ‘copy location/address’ and replace the image in the code. You will also need to change the urls of where the images link to.
How To Add An HTML Signature To Gmail
At any time after you have saved the code you can go to the folder where it is saved and open it. It will open in your default browser. You can leave this open and your text editor open at the same time. Each time you make a change to the code and save it, you can refresh your browser and see the change.
Once you are happy with how it looks copy the signature from the browser using ‘Ctrl A’.
Then open your Gmail account and click on the ‘settings’ cog at the top right. Choose the ‘Settings’ option and scroll down near to the bottom of the page that appears. Choose the radio button to show the signature. Click within the signature box and then use ‘Ctrl V’ to paste the signature into the box.
Remember to scroll right to the bottom and save your changes.
Voila! That’s you done.
If you want to change your signature at any time, just go back into your text editor file, make the change there and then copy the new signature from your browser again.
Hope that helps at least those using Gmail.
If you have any issues please just get in touch.
Thanks for reading!