How to write signatures in email

HTML email signatures

The email signature that I have recently developed for 2015 can be seen below. I made this signature for my Hotmail account. I wanted to have a ‘hand written’ signature in there, as well as my company logo, email address, postal address and icon links to my social sites. Some may think that this is over-egging the pudding, as my friend Tony would say. She might be right…lol.

But if you want to design a good email signature, say with images and styling – then it will help if you know a little HTML. Look beneath the signature to find the HTML code that I used to render it. Notice that all of the styles are using in-line CSS, and the images all have full, universal URL addresses to where they’ve been uploaded.

I’ve broken a bit of a rule, in that I’ve used a table to style content (naughty) but it just seemed like the best, quickest thing to do, and most email clients require a table to ensure that the email isn’t all jumbled up! Does anyone know of a better structure that doesn’t use a table to style it? Please let me know. (sorry folks). There are some who just hate html emails full stop – choosing plain text in which to receive their communications.

Richard Proffitt's signature

Richard Proffitt
Web/Graphic Designer.
www.iopan.co.uk
iopan@hotmail.com
17, Kenilworth Road, Leamington Spa, UK, CV32 4QS.
★ ioΠαν

And here’s the code that I used:

<img src=”http://iopan.co.uk/signature.gif” alt=”Richard Proffitt’s signature” />
<div style=”@import url(‘http://fonts.googleapis.com/css?family=Alegreya+Sans’); font-family: ‘Alegreya Sans’, sans-serif;”>
<table border=”0″ width=”50%” cellspacing=”0″ cellpadding=”0″>
<tbody>
<tr>
<td rowspan=”6″ width=”18%”><img src=”http://iopan.co.uk/logo.gif” alt=”” width=”100″ height=”100″ style=”padding-right:10px; border-right:1px solid #EEC217; margin-right:10px;” /></td>
<td width=”82%”>Richard Proffitt</td>
</tr>
<tr>
<td>Web/Graphic Designer.</td>
</tr>
<tr>
<td><a href=”http://iopan.co.uk” style=”text-decoration:none; color:#EEC217;”>www.iopan.co.uk</a></td>
</tr>
<tr>
<td><a href=”mailto:iopan@hotmail.com” style=”text-decoration:none; color:#EEC217;”>iopan@hotmail.com</a></td>
</tr>
<tr>
<td>17, Kenilworth Road, Leamington Spa, UK, CV32 4QS.</td>
</tr>
<tr>
<td>★ ioΠαν</td>
</tr>
</tbody>
</table>
</div>
<a href=”https://www.facebook.com/pages/Iopan/1440204609525539″>
<img src=”http://www.iopan.co.uk/images/social-facebook-small.png” width=”26″ height=”26″></a>

<a href=”https://twitter.com/RichardProffitt”>
<img src=”http://www.iopan.co.uk/images/social-twitter-small.png” width=”26″ height=”26″></a>

<a href=”https://plus.google.com/u/0/+RichardProffittDesign”>
<img src=”http://www.iopan.co.uk/images/social-googleplus-small.png” width=”26″ height=”26″></a>

<a href=”http://iopan.tumblr.com/”>
<img src=”http://www.iopan.co.uk/images/social-tumblr-small.png” width=”26″ height=”26″></a>

<a href=”https://www.linkedin.com/in/iopan”>
<img src=”http://www.iopan.co.uk/images/social-linkedin-small.png” width=”26″ height=”26″></a>

<a href=”https://www.pinterest.com/sollubi/”>
<img src=”http://www.iopan.co.uk/images/social-pinterest-small.png” width=”26″ height=”26″></a>

 

Hotmail

Within your Hotmail account, click on the settings icon (the cog) and go to ‘Options’ – then you’ll see, in ‘Writing emails’ the section: ‘Formatting, font and signature’.
This link will take you to a screen where you may change a lot of the styling of your emails, including adding HTML signatures…Add your code to the ‘Personal Signature’ box – but make sure you’ve selected “Edit in HTML” from the drop-down menu. Simple, huh?

Microsoft Office Outlook 2010

Creating an email signature in Outlook 2010 is relatively painless. The Microsoft site that explains how to do it can be found here at: Create and Add an email message signature. That link will also take you closer to finding out how to create a signature in Microsoft Office Outlook 2003 and Microsoft Office Outlook 2007.

Thunderbird

Follow this link: MozillaZine: signatures, Thunderbird For Thunderbird, Mozilla Suite & Seamonkey email clients.

Apple’s Mail

For Mac users who use Apple’s native email software, Choose Mail→Preferences and click the Signatures button. For the full run-down, follow this link to Apple’s support pages: Mail (Yosemite): Include signatures in messages.

Gmail

Click on the settings icon (again, a cog) and go to ‘settings’. If you make sure you have the ‘general’ tab open and scroll down, you’ll find a window into which you can paste your signature – or you can create one by pasting in pictures, links, text etc. by using the icons above the window. You can easily style your email signature to look how you wish. Voila!

Leave a Reply