While working at a certain NGO, I was tasked with creating and adding email signatures on all the Ipads, MacBooks and Imacs used for communication with business clients. This sounds like an easy enough job to do, but I experienced quite a couple of issues while carrying out this task. This is a description of the issues I experienced and the solution I arrived at.

As Wikipedia quite easily describes it, an Email signature is a block of text appended to the end of an e-mail message often containing the sender’s name, address, e-mail address, phone number, disclaimer or other contact information. Following this description, appending a block of text to the end of any new email message using a mobile or desktop-based e-mail client or a web-based e-mail platform like yahoo mail or G-mail should be relatively straightforward to achieve.

Issues start arising when you want to apply rich text formats with links and images to your email signature. At this point, I should say, this was my first ever attempt to create an email signature, so I assumed that the Imac and Ipad’s email signature editor could format text, images and links like a word processor. That assumption turned out to be so wrong.

ISSUES

The first issue I encountered was trying to align some lines of text to the right of the company logo. The Image always took up an entire line and the text appeared either above or beneath the image, but never beside the image as requested.

The second issue I encountered was trying to get the right amount of spacing between the images and the text above and below it. For some bizarre reasons, the Email client’s signature editor on the mac and Imac kept adding several margins of space between the text and the image. On the recipient’s end, this made the e-mail signature appear like several paragraphs of text with double spacing applied between them. For the Ipad, you had to format your email signature on a text editor or word processor, then send the document via email to an email account on the Ipad. Once you received the email with the word or text attachment, you then open up the document, copy the entire text and paste into the email signature editor. So, you have very little control in terms of design and layout over the content of the email signature on the Ipad.

The third issue I encountered was with saving images on the Ipad. When you add text and images on the e-mail signature editor on the Ipad, the text gets saved but the image/s disappear after a period of time leaving only the border of the image/s. So, when you send an email with this email signature, the recipient receives the email with the text portion of the email signature but with the image portion missing. In some cases, your recipient might receive the images with the text, but the images appear as attachments rather than a part of the email signature.

The fourth issue I encountered was with the way the images on the e-mail signatures appeared on the recipients device. Some e-mail clients, especially on mobile devices treat images as attachments. So the recipients see the text portion of the e-mail signature and then several image attachments depending on the number of images used on the e-mail signature. This issue occurred with the email signatures created on the Imac, Macbook and Ipad’s email signature editor. Due to this problem, the recipient does not see your e-mail signature as it was intended.

SOLUTIONS

The first and the second issue were resolved using HTML codes because formatting text with HTML codes give you so much more control over the design and layout of your email signature than your Email program’s signature editor. I arrived at this resolution after reading several articles on creating email signatures with HTML. I knew HTML coding, but until I read the articles, it hadn’t occurred to me that I could create the email signature using HTML codes, then copy and paste the HTML codes to the email signature editors on the required device or platform. Doing this ensured that the text on the email signature aligned to the right of the company logo as initially requested.

<!–doctype html>
<html>
<head>
<title>company email signature</title>
<meta charset=”utf-8″/>
<style type=”text/css”>
body {
font-family: ‘Trebuchet MS’, sans-serif;
color: #111111;
font-size: 15px;
}
table {
width: 600px;
}
td {
padding: 7px 10px 10px 10px;
}
</style>
</head>
<body>
<table>
<tr>
<img class=”size-full wp-image-274″ src=”https://maxichimaximind.files.wordpress.com/2014/12/batman-6-128.gif” alt=”batman” width=”128″ height=”128″ />
<td>
<p>
<b>Chima Okechukwu</b>
<br>Position
<br>Company Name
<br>Company Address
<br>t: +00000000000 | e: <a href=”mailto:name@companydomain.com”>name@companydomain.com</a>
<br>w: <a href=”http://www.companyname.com”>www.companyname.com</a&gt;
</p>
<img class=”size-full wp-image-270″ src=”https://maxichimaximind.files.wordpress.com/2014/12/facebook.png” alt=”Facebookcolor” width=”32″ height=”32″ />
<img class=”size-full wp-image-271″ src=”https://maxichimaximind.files.wordpress.com/2014/12/instagram.png” alt=”Instagramcolor” width=”32″ height=”32″ />
<img class=”size-full wp-image-272″ src=”https://maxichimaximind.files.wordpress.com/2014/12/twitter.png” alt=”Twittercolor” width=”32″ height=”32″ />
</td>
</tr>
</table>
<small>This e-mail message may contain confidential or privileged information and is intended only for the use of the intended recipient(s). Any unauthorized disclosure, dissemination, distribution, copying or the taking of any action in reliance on the information herein is prohibited. E-mails are not secure and cannot be guaranteed to be error free as they can be intercepted, amended, or contain viruses. Anyone who communicates with us by e-mail is deemed to have accepted these risks. Company Name is not responsible for errors or omissions in this message and denies any responsibility for any damage arising from the use of e-mail. Any opinion and other statement contained in this message and any attachment are solely those of the author and do not necessarily represent those of the company.

     </small>
</body>
</html>

 The Output looks like this:

email signature
HTML Formated Email Signature

The last two issues were resolved by saving the images on a public web server rather than on the Email client’s signature editor. So, while the HTML codes handle the design and layout of the Email signature, the public web server ensures that the images are always available and are never treated as image attachments. When the recipient receives the email containing the email signature, the images are downloaded and interpreted like any other HTML element thereby avoiding the attachment representation issue. The only downside to this solution is that the image/s do not appear if your device is not connected to the Internet and if that is the case, you wouldn’t even be able to send or receive an email in the first place.

src=”https://maxichimaximind.files.wordpress.com/2014/05/bw2.png&#8221; alt=”bw2″ width=”90″ height=”83″ />

In a situation where you can’t write HTML codes and you don’t have access to a public server, here’s a simple suggestion:

  1. Get yourself a WordPress account. (All you need is a valid email address to open one).
  2. Create a new post.
  3. Add your text, images and links to the new post, then format it to look exactly like you want your email signature to appear.
  4. Switch to the text mode, then copy the entire HTML code from WordPress to a text file and then save the file as an HTML document.
  5. Open the HTML document and confirm that you like what you see, otherwise, go back to WordPress and edit the post till you arrive at your desired layout.
  6. Once you have arrived at your desired email signature layout, copy the HTML code to your device’s email signature editor. (At this point, you can delete the WordPress post if you want to.)
  7. Arriving at your desired email signature layout might need a bit of HTML coding, so do not shy away from learning it.
  8. Here’s a link that explains how to install HTML email signatures on every device or email client you might want to use. Just scroll down to the end of the page and enjoy.
Advertisements