Design

Design Articles

A collection of our Web design articles.

Polishing up your E-mails with a custom signature

Adding a lasting image to your business image

We've all seen E-mails from the professional sites where there's a caption, image, or a combination of the two at the bottom of the message.  Sometimes the message is a reminder of security issues, or a contact reference, or even an image that links to a Web site.

  • There are several methods to add a signature to your E-mail.
    • Create a textual signature and paste it to the bottom of an E-mail message each time you need it.
    • Use the default signature tool of the E-mail client to create a text block and it will automate the signature when a new message is generated.
    • Use HTML to create your textual signature, save it to your PC's hard drive as a file and import it into the signature tool.
    • Use HTML to create a graphic and textual signature, save the image to your host, link to the image and import it into the signature tool.
We'll be showing you how to implement the HTML file method

By demonstrating the HTML file import method, the simpler methods will become apparent as we go along. We'll show the coding we use to make a basic HTML file, then demonstrate the procedure to make it work.

For the purpose of this demonstration, we'll be using Microsoft Outlook 2003, but the same procedure should be similar with any E-mail client.

Let's get started with the HTML part

The first step is to design a simple HTML document. Since the code will not require everything a Web page needs, it will only consist of a few short lines of markup.

This markup:

<html>
   <a href="http://yourdomain.com/">
       <img src="http://yourdomain.com/images/your-image.jpg" />
    </a>
</html>

Could show an image like this: (which would link to your Web site)

A little additional markup...

<html>
   <a href="http://yourdomain.com/">
       <img src="http://yourdomain.com/images/your-image.jpg" />
    </a>
    br />Your Name
    br />Your Address, City, State, Zip
    br />Your Phone Number
    br />
    <a href="http://yourwebsite.com/">http://yourwebsite.com/</a>
</html>

Would produce an image and also your contact information!


Your Name
Your Address, City, State, Zip
Your Phone Number
http://yourdomain.com/

Now it's time to set up the E-mail signature.

If you have a hosting server, it's always best to save your image (if you used one) to an images folder there. The reason for that is that files are more likely to become corrupted (thus unusable) on your local machine.

This is only a small sample of the markup. Many other formats and functions may be added with a little patience and practice.


Hopefully, this article will help you get on the right path. If you want more information about this subject, contact us by using the Web Form.

<<  Back to Articles & FAQs