Today, one can even use professional email signatures to increase social media followers and add advanced personalizing features that render even on smart phones and web mailboxes nicely.
By noting some html capabilities in email signature format design, one can make sure to avoid any potential design flops, some of these are:
- Refrain from using to many images in an email signature.
- Use cross-browser safe html to avoid problems on out-dated web browsers, such as Internet Explorer.
- Assure "plain text"-view safe layouts for some mailbox clients.
Email Signature Formats
Signatures can differ depending on whether you are sending an email to a new potential client, your business partners or family. For most cases, a simple email signature will do, which contains no images, minor html and styling and is short:
Minimalist for frequent personal emails
Code:
---
<font style="font-family:'Century Gothic', sans-serif; font-size: 9pt; color:#333;">
<table width="600" border="0" cellspacing="0" cellpadding="0" style="width:600px">
<tr><td colspan="8" style="width:350px" width="350px"><font style="font-weight:bolder;font-size:10pt;"><strong>Don Mehrabi, MD FAAD</strong></font>
<br /><font style="font-size:9pt;">Board Certified Dermatologist | BHSkin, Inc.
<br />
<a href="http://www.bhskin.com" style="color:black; text-decoration:none; font-weight:bold;"><strong>www.BHSkin.com</strong></a> - <em style="color:#333;font-style:italic;">"Beautiful skin begins here"</em></font></td>
</tr></table></font>
Above, we use tables which is the safest way to align and space most email formats because of the compatibility on most email clients that accept html. To make sure that
bold and italic font styles show up correctly on all mail clients, we use both the styleattribute and html tags, <strong> and <em>.Branded Social and Contact Info
Code:
---<font style="font-family:'Century Gothic', sans-serif; font-size: 10pt; color:#333;">
<table width="550" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60" rowspan="2" style="border-right: 1px solid #333333;"><a href="http://www.maximusbusiness.com/"><img src="http://www.maximusbusiness.com/images/social/signature/icon-thumb.png" width="70" height="70" border="0"></a></td><td width="8"></td>
<td colspan="6"><font style="font-weight:bolder; color:#333333; font-size:11pt;">Pedram Hasid</font><br /><font style="color:#1F497D; font-size:10pt; font-weight:bold;">Project Management & Marketing Consulting</font>
<br />
<font style="color:#1F497D; font-size:10pt;"><a href="http://www.maximusbusiness.com" style="color:#FF6600; text-decoration:none;">MaximusBusiness.com</a> | <a href="mailto:Max@maximusbusiness.com" style="color:#FF6600; text-decoration:none;">ped@maximusbusiness.com</a></font>
</td>
</tr>
<tr>
<td width="8"></td>
<td width="14"><font style="color:#336699;font-weight:bold; font-style: italic; font-size:12px;">P:</font></td>
<td width="80"><font style="color:#333333; font-size:10pt; font-weight:bold; font-style:italic;">+1(424)242-2638</font></td>
<td width="30"><font style="color:#336699;font-weight:bold; font-style: italic; font-size:12px;">Twitter:</font></td>
<td width="100"><font style="color:#333333; font-size:10pt; font-weight:bold; font-style:italic;">@OnlineMarket</font></td>
</tr>
</table></font>
Here, we implement the
style="color:#..." as well as a second column format for the brands thumbnail. We also include a new row for further contact information and a twitter extension that may help newer, more frequent, contacts.Icebreaker Make a First Impression
This email signature should be used in rare circumstances, due to it being a bit heavy and contains images. Scenarios when a format like this would be good to use are:
- First time emails to new contacts or potential clients.
- Replying to a contact information request.
- Sales Announcements, Newsletter or similar campaigns.
- Sending copyright attachments, such as contract PDF's, licensed images, etc.
Code:
<p>---<font style="font-family:'Bookman Old Style', sans-serif; font-size: 10pt; color:#333;">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="80" rowspan="2" style="border-right: 1px solid #333333;"><a href="http://www.maximusbusiness.com/"><img src="http://www.maximusbusiness.com/images/social/signature/icon-thumb.png" width="70" height="70" border="0"></a></td><td width="8"></td>
<td colspan="6"><font style="font-weight:bolder; color:#333333; font-size:11pt;">Maximilian Ruthe</font><br /><font style="color:#1F497D; font-size:10pt; font-weight:bold;">Web Development & Marketing Consultant
<br>
<a href="http://www.maximusbusiness.com" style="color:#FF6600; text-decoration:none; font-weight:bold;">www.MaximusBusiness.com</a> | <a href="mailto:Max@maximusbusiness.com" style="color:#FF6600; text-decoration:none; font-weight:bold;">max@maximusbusiness.com</a></font>
</td>
</tr>
<tr>
<td width="8"></td>
<td width="14"><font style="color:#336699;font-weight:bold; font-style: italic; font-size:12px;">P:</font></td>
<td width="100"><font style="color:#333333; font-size:10pt; font-weight:bold; font-style:italic;">+1(424)235-1170</font></td>
<td width="35"><font style="color:#336699;font-weight:bold; font-style: italic; font-size:12px;">Skype:</font></td>
<td width="95"><font style="color:#333333; font-size:10pt; font-weight:bold; font-style:italic;">maximilian.ruthe</font></td>
<td width="45"><font style="color:#336699;font-weight:bold; font-style: italic; font-size:12px;">Twitter:</font></td>
<td width="120"><font style="color:#333333; font-size:10pt; font-weight:bold; font-style:italic;">@MaximilianRuthe</font></td>
</tr>
</table>
<table width="600" style="border-bottom: 1px dotted #333333;"><tr><td><br /></td></tr></table>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2" width="285px" style="border-right: 1px solid #333333;"><div style="text-align:center; width:280px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_2201202140621298" src="http://www.maximusbusiness.com/images/social/signature/signature.png" usemap="#Image-Maps_2201202140621298" border="0" width="280" height="75" alt="" />
<!-- Image map text links - Start - If you do not wish to have text links under your image map, you can move or delete this DIV -->
<map id="_Image-Maps_2201202140621298" name="Image-Maps_2201202140621298">
<area shape="rect" coords="0,0,275,44" href="http://www.maximusbusiness.com" alt="Maximusbusiness.com" title="Maximusbusiness.com" />
<area shape="rect" coords="249,45,275,70" href="http://www.yelp.com/biz/maximus-business-los-angeles" alt="yelp" title="yelp" />
<area shape="rect" coords="216,45,242,70" href="http://blog.maximusbusiness.com/" alt="rss" title="rss" />
<area shape="rect" coords="184,45,210,70" href="http://www.linkedin.com/company/maximus-business" alt="Linkedin" title="Linkedin" />
<area shape="rect" coords="151,45,177,70" href="https://plus.google.com/111888032719359637556/" alt="google" title="google" />
<area shape="rect" coords="118,45,144,70" href="http://twitter.com/onlinemarket" alt="twitter" title="twitter" />
<area shape="rect" coords="84,45,110,70" href="http://www.facebook.com/maximusbusiness" alt="facebook" title="facebook" />
<area shape="rect" coords="278,73,280,75" href="http://www.image-maps.com/index.php?aff=mapped_users_2201202140621298" alt="Image Map" title="Image Map" />
</map>
<!-- Image map text links - End - -->
</div></td><td width="6px"></td>
<td><font style="color:#333333; font-size:10pt;">USA: +1(424)242-2638 | Global: +1(424)235-7629</font><br /><font style="color:#1F497D; font-size:10pt;">1441 Westwood Blvd., Suite C<br /> Los Angeles, California 90024, USA</font></td>
</tr>
</table>
<font style="font-size:9px; color:#444">
<hr />Policies and Terms here.<hr /></font></font></p>
In this example we include two images, but the second image contains multiple links with link mapping, which works on major desktop and web email clients, such as Outlook, Gmail, Thunderbird and so others. This prevents that users you send emails to have to download multiple images, which, if you keep the signature in responses, duplicates all the images the need to be downloaded again.
Professional Email Signatures
What you can do with professional email signatures and the variety of designs you can incorporate in your email communications are endless. The format and information displayed on them depends on the type of business you may be using it for and the responses you see when using them. Experiment and try different ways of presenting your messages in order to be more noticeable among competitor emails your target clientele may be browsing through before making their choice. Any ideas or further example requests are welcome, so feel free to comment.
