How to Make a Basic e-mail Signature for the HTML Impaired

If you have a product to sell – if you are a performer or an artist – or if you just want to find more clients then a custom e-mail signature can help grow your business. An e-mail signature is a stylish, effective and non-intrusive way to announce to the world (or at least the people you communicate with via e-mail) an abbreviated bit of your business story.

If you enjoy the do-it-yourself approach to marketing and technical ‘computery’ stuff doesn’t send you screaming for the hills, this article will show you the steps necessary to add flair to your online communications.

Disclaimer: I am not a programmer or an HTML expert. The information below was obtained through trial and error. The steps are for the e-mail program on your home computer. (Many of them will apply if you wish to customize the signature on your smartphone or cloud based e-mail program such as gmail or yahoo, but every platform has its differences and particularities.)

1. Seeing the code. Once you learn what goes where, you can do a search for other types of HTML code that will do even fancier things. The graphic above shows a sample custom e-mail signature along with the code that is used to generate it. The first line of the signature “Samantha B. Jones” in the purple box, corresponds with the first line of HTML code. In the HTML purple box, notice that means ‘bold,’ is the size of the font, and <face=”Times New Roman,” is the font type.

2. Basic Design. Simple is always a good rule of thumb. Think about the most effective e-mail signatures that you have received. Which ones invited you to click further to learn more and which ones turned you off?

3. Write the Code. Here is the code for the design above. Copy it and begin to play around with it. *The items that I highlighted in green are areas where you can customize it and where you need to provide links to online images or your websites.

<img src=”http://www.link to online image“>
My Awesome Company Name<a href=”http://www.link to website“> visit my website </a>
 Subtext #1|Subtext #2|Subtext #3 
Express yourself here 
italic bold text here

(I included Arial Black and Lucida Console as these are other fonts that are generally recognized by ‘most’ electronic devices.)

4. Test the Code. Copy and paste your code into an HTML viewer to see if it works.

This is the one I use – http://htmledit.squarefree.com/

Another option is to insert the code into your e-mail program, then send yourself multiple e-mails until you have it just right.

5. Insert the HTML code into your e-mail program.

The screen capture image shows Thunderbird e-mail, but the names and steps for other e-mail programs should be ‘roughly’ similar.

In Thunderbird, go to “Tools” > “Account Settings,” then insert your code in the ‘Signature text’ box. Once you click on ‘Save,’ you can write a new e-mail and send it to yourself to test any links or images that you’ve included.