In today’s digital age, email is a critical aspect of communication. Whether you’re a business owner, a freelancer, or simply an individual who wants to showcase your professionalism, having an eye-catching email signature is a must. An HTML email signature allows you to include elements like logos, social media icons, and formatted text, which not only make your emails look more polished but also help in promoting your personal or company brand.
In this blog post, we will guide you through the process of setting up and installing an HTML email signature in Google Mail (Gmail) and Apple Mail. By the end of this post, you will have a better understanding of the importance of a well-designed email signature and the steps required to create one.
Why an HTML-based email signature is crucial:
- Showcasing Your Brand: A customized email signature that includes your logo, company name, and relevant contact information is a subtle yet powerful way to reinforce your brand identity. It also helps recipients remember your brand every time they interact with your emails.
- Looking More Professional: A well-designed email signature provides an impression of professionalism and attention to detail. It indicates that you care about your image and how you present yourself to others. This translates to the amount of care you will put into a client, customer, product, or service.
- Enhancing Credibility: A professional email signature with links to your website, social media profiles, and/or online portfolio can enhance your credibility and help establish trust with your recipients.
- Making it Easy to Contact You: Including contact information, such as your phone number, socials, and website, makes it simple for recipients to get in touch with you outside of email. Remember that not everyone likes to communicate the same way so it is good to have options.
Start with your Design & HTML for your email signature
You can use a template program like Stipo or Engine Mailer to build a simple HTML email signature. But these are limited to what the program templates offer or charge for more complex designs. We like to build our own for our clients since just about everything we do is completely custom designed and developed here.
Here is a basic HTML template that you can start with if you want to take a stab at coding your own:
<table style="width: 100%;max-width: 500px;background-color: #ffffff;padding: 0px 15px;">
<style>
h1, h3, p, a {color: #000000;font-family: "Times New Roman", Times, serif;} h1 {font-size: 2.3em;line-height: 2.3em;} h3 {font-size: 1.3em;line-height: 1.5em;} h1, h3, p {margin: 0px;} h3, p, a {font-weight: 400;} a {text-decoration: none;} td {padding: 5px;} p, a {font-size: 14px;line-height: 18px;} .underline {border-bottom: solid 3px #000000; } img {width: 100%;margin: 25px 0px;}
</style>
<tbody>
<tr>
<td class="underline">
<h1>John Doe</h1>
</td>
<tr>
<td><img src="https://mybusiness.com/my-logo.svg"/></td>
</tr>
<tr>
<td>
<h3>1234 E. Test St.</h3>
<h3>[email protected]</h3>
<h3>555.555.5555</h3>
<a href="https://mybusiness.com"><h3>mybusiness.com</h3></a>
</td>
</tr>
</tbody>
<tfoot>
<tr><td><p>The information in this email is intended solely for the individual or entity named herein. Reply "STOP if you wish to no longer receive emails from this email address</p></td></tr></tfoot>
</table>
Simply copy and paste the above into a code editor and you can change the contact information and run with this. If you are familiar enough with HTML, you can alter this how you see fit to get a design that suits your needs. You can view your code by saving the file with a “.html” file extension, right-clicking on the file, and open with your browser. I recommend using Chrome to view your work as you will need to use Chrome to install the signature in your mail program.
For images, you will need to store them on a server somewhere and access them remotely. We like to put them in the root domain folder of your business website, but if you can’t you can also use Dropbox to accomplish this task. In either case, you will copy the link to the media and use that in your HTML code for the SRC in the IMG tag above. Again, you can open the file using your browser to view what it looks like. You will likely have to adjust the width and height of your images so that it looks good for your email signature.
Once you have everything looking correct for your HTML email signature, you will need to install it in your email client. Start by opening your HTML file in the Chrome browser. From here you will select all on the screen and copy it to paste later.
How to install your HTML email signature on Google Mail (Gmail)
- Access Gmail Settings: Log in to your Gmail account and click on the gear icon located in the upper-right corner of the screen. From the dropdown menu, select “See all settings.”
- Paste your signature: In the Settings page, navigate to the “General” tab. Scroll down to the “Signature” section, click on “Create new,” and give your signature a name. In the text box, paste the signature that you copied from the Chrome browser.
- Save Your Signature: After pasting your signature, click “Save Changes” at the bottom of the page. Your HTML email signature is now set up and ready to be used in your Gmail account.
- Try it out: Open up a new email by clicking Compose and see your new email signature in action.
How to install your HTML email signature on Apple Mail
- Access Apple Mail Preferences: Open the Apple Mail app and click on “Mail” in the menu bar at the top of the screen. From the dropdown menu, select “Preferences.”
- Get your Signature List: Go to the “Signatures” tab in the popup to see all of your email signatures. You can create a new signature by clicking on the account that you want to add the signature to and then press the “+” sign below the second column. Name your new signature and then paste your signature from the Chrome browser into the right column. (note: the images may not show up correctly when you first paste the signature)
- Try it out: Open up a new email by opening a new email and see your new email signature in action. If your signature isn’t in your new email, click on the drop-down on the right side of the new email screen and select your new email signature from there.
Creating an HTML-based email signature for both Gmail and Apple Mail is a straightforward process that can significantly enhance your professional image and brand presence. By taking the time to create a well-designed signature, you can make a lasting impression on your recipients and ensure that your electronic communications stand out from the crowd.
By following the steps outlined in this guide, you will be well on your way to showcasing your brand and looking more professional in your electronic communications. Happy emailing!
