Several friends and clients have noticed that I have an email signature that includes graphics and links, and have asked how they can use a similar signature themselves. It’s a little complicated as you will need to create an HTML webpage as part of the process, but I’ll outline the basics for you here. Take a look at Why Your Email Address is So Important if you’re not sure why you need a business email and signature to begin with, but the bottom line is that it provides the people you’re communicating with a complete set of your contact information and a professional image of you and your brand. A good signature also provides some social media marketing since the signature gives the reader an opportunity to follow you, if you include links to your social network profiles.
The Signature
First, you need decide what you want to say and what links and icons you want to include. Here’s my current email signature:
Building It
As you can see, I have chosen to include my name, business name, website link and icons that are linked to my major social media profiles (Facebook, Twitter, Google+ and LinkedIn). You may also want to include one or more phone numbers, a company logo, and perhaps some other text. There are some guidelines you may wish to consult since you don’t want your signature to get too big.
Once you have a good idea of what you want to say, we now need to build the signature. Because Outlook and most other email clients do not include complex editing tools for signatures, you’re going to have to put your signature together outside of your email client, and then use Copy and Paste to insert it.
It starts with using HTML to build a webpage that will display your signature. If you have a Drupal site that I have built for you, you can simply log in and use Create Page to start a fresh page. You should be able to do the same thing if you have a WordPress or Joomla site. If you don’t, you can use FrontPage or some other HTML editor to create your page. Technically, the page doesn’t have to be online, as long as you can view the results as it would be seen online. We want to see exactly how the resulting HTML is going to appear.
If you want to incorporate any images, you will need to upload them to someplace permanent online and link to them. I recommend a folder within your own website, but you can use a file sharing service if you wish. Once you have uploaded the images, pay attention to the file path for each image as you will need to reference that later.
Now, begin to assemble your signature the way you want it to look. If you’re going to use a layout similar to mine, you will need a Table to get everything placed correctly. Tables in HTML are somewhat complicated, so be patient. You may save your work and find that the spacing is off – you will simply need to make some adjustments and review the results. For instance, you may need to set a table width, or insert spacing or additional rows or columns to achieve the look you want.
In my case, I used three rows and a single column. The social media icons are images that are inserted next to each other – I didn’t need to use separate columns for each image. one great idea is to insert a first column to the left and include your business logo there.
Make sure that any images you use are not copyrighted. If you want to use social media icons, there are many websites that offer packs of icons that you can preview and then download.
When you insert each icon, make sure that you use the full URL that is the path to that uploaded icon. Anyone who views your signature is going to need to be able to download that image remotely in order to see it.
Once you have an icon in place, select it and insert a link to that icon’s respective profile. For instance, my Facebook icon is linked to my Facebook profile, http://facebook.com/allton. Make sure that you triple-check and verify all links!
Signature Use
Once you believe you have your signature looking the way you want it, save it and publish it. You want to be able to view it in a web browser. If you’re using Drupal, as soon as you save your page you will automatically be switched to view mode and will see your page on your site, with your signature as it is supposed to look. If you have created an HTML file on your computer, you will need to double-click that file to open it in your default browser.
Assuming you’re happy with how it turned out, simply highlight the entire signature and use CTRL-C to copy it into your clipboard.
Now, open the Signatures section of your email client and paste in your new signature. If you’re using Outlook for Mac, this is located within Outlook -> Preferences -> Signatures.
You can, of course, set up multiple signatures if you have different accounts set up or for different scenarios, like when composing new messages versus repying.
iPhone Implementation
But what if you want to use this new signature on your iPhone? It’s actually pretty easy.
First, use your desktop client to compose a new email. Make sure that your signature is included and just email yourself (or whatever email address you have access to on your iPhone).
Now, grab your iPhone and check your email. Open the message you just sent and tap and hold on part of your signature text until the text selectors appear, and drag them until your entire signature is selected.
Tap on Copy.
Go to Settings -> Mail, Contacts, Calendars, and scroll down to Signatures. if you have multiple accounts, you can choose to have one signature for all or different signatures for different accounts. Double-tap into the signature field you wish to edit and Paste in your new signature.
That’s it! You now have a great signature on your iPhone! You can do the exact same procedure on your iPad. I do not own an Android device, but I imagine that the process would be fairly similar.
Let me know what questions you have, or what ideas you came up with for your own great signature!
