Installing a HTML email signature in Mozilla Thunderbird is easy but creating a complex signature with remote images and links is hard. In Section 1, we will go over how to write up the HTML codes for the signature with remote images and links. If you already have the HTML codes written up for your email signature, go straight to Section 2 for instructions on how to get it installed. If you don’t know anything about HTML coding or just don’t have the time to deal with it, you may consider hiring MYDESIGNPAD to create the HTML signature for you. Please visit www.mydesignpad.com/htmlsignature/ for more info.

List of things you need before we start:

• A PC or MAC Computer
• Mozilla Thunderbird 16 and above
• A web hosting provider to host your images. I use A Small Orange: Homegrown Hosting. If you don’t have one, try using Dropbox to host your images for free.
• A HTML editor (Coda, Adobe Dreamweaver CS6 for Mac, BBEdit) to write up your codes. I use personally use Coda.

••• SECTION 1: HTML SIGNATURE CREATION •••

Step 1.1: Design Consideration

In today’s world, we often send and receive emails across a number of different platforms: desktop computers, laptops, tablets and smart phones. So it is important to consider how and where the recipients view their emails. If most of your recipients view emails on a computer, there is more flexibility on how big or small you decide to make your signature block. If your recipients view emails on their mobile phones often than you should keep the width of your HTML signature under 320 pixels wide to be safe. Today, most modern mobile devices have a default width of 640 pixels. Rule of thumb, better to limit the width of your signature design so that it would look great on the computer as well as on mobile phones. View Sample Signatures that I have created for my clients.

Step 1.2: Signature Information

Decide what sort of information you want to display on your signature. For this demonstration, we’ll use first/last name, title, email, company name and logo and some links. Here is my signature design. You may use it as a starting point. To see the HTML codes, find “View Source” in your browser menu.

NOTE: For Outlook 2011, keep your design width under 320 pixels to prevent having to manually adjust the width of your signature each time you compose new email.

Step 1.3: Writing the HTML Codes

Before we begin, here are some basic but important notes to keep in mind as you design your signature. One major obstacle in designing HTML e-mail templates is that there are literally dozens of different e-mail clients out there (most if not all can’t handle CSS and HTML like our internet browsers can) so you have to keep your design and codes as simple and straight forward as possible.

• Use tables for basic layout. The CSS float property is not supported in Gmail or Outlook, making CSS layouts impractical.
• Use inline CSS. The style tag is not supported in Gmail, and support for CSS selectors is spotty.
• Use only basic CSS properties. E-mail clients tend to be very picky about which CSS properties they support. Campaign Monitor has a great summary of CSS support in e-mail to use for reference.
• Use absolute URLs. Relative paths won’t work for an e-mail signature. So all your links need to be absolute URLs.
• Link to images. I personally dislike e-mail signature images as attachments (it makes it easy to mistaken that image as a legitimate attachment). Because of this, I recommend linking to your images by placing them on a web server rather than including them as attachments. See Step 4 for more info.
• Exclude HTML, HEAD, and BODY tags. When we get ready to save your HTML signature into Mail, make sure that only the relevant HTML is included in your document.

Step 1.4: Upload and Link Your Image

Since we want the email signature to load quickly, make sure to optimize your image with Adobe Photoshop by doing a “Save for Web.” Upload your image to the web server taking note of the public path. The public path (absolute URL) should look something like this: http://www.yourdomain.com/images/logo.gif. Copy and insert it into your HTML codes. If you don’t know how to work with a web server or don’t have one, try Dropbox. It is a great alternative and it is free. Once you have your Dropbox account set up, you can create public links to your image file.

Step 1.5: Save File and Preview

Once you have your email signature designed and laid out just as you like, save the file to your Desktop and call it “signature.html.” In my case, I named my file timcai.html. Open the “signature.html” file that you’ve just created in Safari or Firefox (not tested with other browsers).

••• SECTION 2: HTML SIGNATURE INSTALLATION •••

Step 2.1: Put the HTML File In a Permanent Place

Save the HTML file in a folder that you will not delete or forget about on your hard drive. For example: I put my HTML file inside my Documents folder.

Step 2.2: Open Thunderbird Account Settings

Open Thunderbird. Select Tools and Account Settings from the program’s menu.

Step 2.3: Edit Settings And Add HTML Signature

Click on your account’s email address on the top left if not already.

On the first panel that opens up on the right, check the “Attach the signature from a file instead (text, HTML, or image)” To the right, click Choose, browse your hard drive for your signature file and attach it by pressing Open. Click OK in the Account Settings panel to save your changes.

Step 2.4: Testing New Signature

Test your signature by sending an email to another email address. Checking that your signature works before using it with your contacts is a sensible safeguard.