How to Create an HTML Email Signature in 2021
A Critical Analysis on Spoon-feeding and Why Design Templates Cheapen the Internet (and Design Itself)
Have you ever YouTube or Google searched anything “How to...” design related? How has that Slick Google Algorithm treated you? If you are a designer, this article is for you. If you are a non-designer, you might be getting ripped off: this article is for you too.
So, I am a newly fledged designer who can do some HTML and CSS coding… right? The fundamentals. I design things from scratch (or scrap paper) to PNG/SVG — complete. I did not know how to code an HTML email signature when leaving university per se, but I could design, and I could code. This gap is excusable as this was something I could figure out on my own.
The only issue is that the internet screams for us to take the fastest route:
Simply…
“Subscribe to our service to access hundreds of creative templates.”
“Use this 5-minute builder to create your own custom email signature”
“Create your professional website today using our templates!”
“Generate your logo using our logo maker!”
these are just to name a few.
These services are available for free use and one often has to pay to truly customise your design. Tragic! Now we have a homogenised look of websites, logos, branding — everything! All over.
My YouTube and Google feed was flooded with one-minute-fix-use-our-services spam and no ORIGINAL way of doing things. This did not help me put together the unique email signature I had in mind.
So after consulting a number of resources and going down a few rabbit holes, I learned how one can go about creating an HTML email signature for Gmail using pure HTML and Google Drive to host images.
How to Create an HTML Email Signature
Design your email signature to the desired size as a .html file in your preferred text editor and check it in your browser (as if designing a web page). Apply inline CSS in the same file to each element. If you are uncertain how to do this, you will first need to revise the basics of HTML 5 and CSS 3 and copy a basic HTML page structure.
- Use Google Fonts or fonts that are accessible by adding a link to the head of your HTML document (online web fonts).
- Insert your information in a table format.
- Add hyperlinks to your social media icons and “mailto” links to email addresses
- When adding images, upload them to Google Drive and make sure that they, as well as the folder that they are in, are accessible to everyone on the internet. Since an email signature is not hosted like a website, your images must be available on the internet as hyperlinks (for this example I am using Google Drive, but you can use images that link to your website or Facebook or anywhere.)
- Copy the link to the image in the Drive and insert it in your HTML:
Your link will not work at first. You will have to make some changes:
Example Link copied:
https://drive.google.com/file/d/1e6ROzkMHe0GTgPB13K7l53O2UmP5BIHw/view?usp=sharing
What to remove:
https://drive.google.com/file/d/1e6ROzkMHe0GTgPB13K7l53O2UmP5BIHw/view?usp=sharing
After removing stuff it should look like this:
https://drive.google.com/1e6ROzkMHe0GTgPB13K7l53O2UmP5BIHw
Adding “uc?id=”:
https://drive.google.com/uc?id=1e6ROzkMHe0GTgPB13K7l53O2UmP5BIHw
It should now look like this:
And now select the entire design in your browser and copy it
Finally, go to your Gmail account
Go to your settings by clicking on the gear icon in the top right corner if you are on a desktop and view all settings (say “see all settings”).
Scroll down to Signature and create a new one. Paste the copied design into the text box. Change your signature defaults to suit your needs. Remember to save your setting right at the bottom of the page when you are done.
Et, voila!
Your email signature should pop up automatically in every new email that you compose.
I hoped that this empowers you to go back to the basics and to leave the 5-minute generators in the past.
