HTML email signatures

HTML is a nice way to make a custom email signature. Besides all the extra formatting this allows, I think the best feature is that it allows you to embed a small graphic without having to send it as an annoying attachment with every email.

HTML/CSS code

Use basic HTML to enter the content of your signature, and then inline CSS to format it. Here is my signature and the accompanying code to use as an example.

John B Colby | MD/PhD student | Departments of Neurology and Biomedical Engineering
Developmental Cognitive Neuroimaging Group | Laboratory of Neuro Imaging
Box 951769, 16-131 CHS, Los Angeles, CA 90095-1769 | MC: 176919 (Sowell lab)
UCLA MSTP logo

<div id="sig" style=" line-height: 12 px; margin: 0 0; padding: 0; border-bottom: 1px #999999 solid; border-top: 1px #999999 dotted; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 9px; color: Black; ">
		<a href="mailto:johncolbyATuclaDOTedu" style="text-decoration: none; color: 536895; border-bottom: 1px #999999 dotted; ">John B Colby</a> | MD/PhD student | Departments of Neurology and Biomedical Engineering<br>
		Developmental Cognitive Neuroimaging Group | Laboratory of Neuro Imaging<br>
		Box 951769, <a href="http://www.semel.ucla.edu/maps/chs" style="text-decoration: none; color: 536895; border-bottom: 1px #999999 dotted">16-131 CHS</a>, Los Angeles, CA 90095-1769 | MC: 176919 (Sowell lab)<br>
		<a href="http://mstp.healthsciences.ucla.edu"><img src="http://johncolby.bol.ucla.edu/mstp_sig.gif" alt="UCLA MSTP logo" style="padding: 0 0 0 0; border: none; margin-top: 1px"></a>
</div>

UCLA signature graphic

UCLA publishes the specifications for all of their logos, and also makes various templates available for download. Many other institutions do as well. This can be used to create a signature graphic for your department or lab.

Here is a clip from the graphic standards manual, describing how the UCLA signature is laid out:

  1. Start by opening the accompanying template in Illustrator.
  2. Change the default text to your school/department.
  3. Delete the extra tier if you don't need it.
  4. Select the text box and copy its width.
  5. Select the divider, and make it 14 pts wider than the text.
  6. Use the Artboard Tool (shift+O) to adjust the canvas size.
  7. Select View → Pixel Preview to make sure that the graphic will look OK when it is rasterized.
    1. If needed, resize the graphic so that it is as small as possible while still being readable. I usually go for 50px height.
  8. Choose File → Save for Web & Devices.
    1. Use GIF output type.
    2. No dither.
    3. Use as few colors as needed.

Links to installation/usage instructions for different email clients

computing/html_email_signatures.txt · Last modified: 2013/08/05 10:31 pm PDT by John Colby
 
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki