First Step : Create your signature in gimp/photoshop
This will be very fast and easy to do, first create a new document, for this example, i will create a 310px wide and 85px height document. Then just add your logo and type some usefull informations as :
- - Name
- - Position or your Title
- - Phone number
- - And also your website url
You can see what i did for my email signature on the picture above.
Step Two : Coding your choosen email signature design
Mail Clients render for most of them only html with inline style. Also you should use only divs and anchor tags and the use of absolute path is essential. Think like you were still in 1999!
<div style="width:300px; height:80px; border-top : 1px dotted #e7e7d4;"> <div style="float:left; margin-top:5px; width:110px;"><a href="http://lostwebdesigns.com/"><img src="http://lostwebdesigns.com/signature.png" width="100" height="62" alt="Lost Web Designs" border="0" /></a> </div> <div style="padding-left: 8px; font-family: Helvetica; font-size: 12px; line-height:.3em; background:#f5f5f5; width:180px; float:right;"> <p style="color: #666666; font-size: 13px; font-weight: bold;">Kanoufi Guillaume</p> <p style="color: #66cccc; font-style: italic;">Web Designer | Web Developer</p> <p style="color: #66cc00; font-size: 11px;">(+505) 8759 - 6096</p> <p><a style="color: #666666; font-weight:bold; font-size: 11px;" href="http://lostwebdesigns.com/">Lost Web Designs</a></p> </div> </div>
And the result.
So basically, this is it for the signature creation, on the next post, i will show you how to add those to your email client (thunderbird and Apple Mail)
Hope you enjoyed it and find this first tutorial interresting
