Sunday, 16 October 2011

Client Support: How to install a CSS formatted HTML signature in Mozilla Thunderbird

  1. Save your email signature (created by McCoyDesign) anywhere on your hard drive. 
  2. Click on Tools > Account Settings
  3. Click on the email account in the top left corner of the screen that is your active account. 
  4. Check the box on the right side of the screen labelled "attach this signature" then locate and select the new .htm signature file that you saved on your harddrive. 
  5. Click OK.

Client Support: How to install a CSS formatted HTML signature in Microsoft Outlook

1. Save your email signature (created by McCoyDesign) onto your hard drive into your signatures folder: 

Outlook 2008

C:\Users\username\AppData\Roaming\Microsoft\Signatures

Win XP & Outlook 2003

C:\Documents & settings\user name\Application Data\Microsoft\Signatures

Note: user name = your windows user name (usually your actual name)

Open Microsoft Outlook Express Select Tools > Options then select the Signatures tab.

Click “New” then select the “Add signatures to all outgoing messages” checkbox.

Click “File” under the “Edit Signature” section (near the bottom).

Click “Browse” and select the .htm file that you saved to your harddrive at point 1.

Click “Apply” (near bottom right).

Compose a new message and verify the new signature is in place.

*NOTE: If your files are "hidden", you will not see Application Data. "Unhide" the files and folders to see this:

Windows XP and 2000: Open "Folder Options" from the Windows Control Panel (or from the Windows Explorer or My Computer "Tools" menu). In Folder Options, click the "View" tab and, under "Hidden files and folders", select "Show hidden files and folders".

Windows 7 and Vista: From the Windows Start menu, click "Control Panel > Appearance and Personalization > Folder Options" (or type "Folder Options" in the Start Search box and a shortcut to "Folder Options" will appear). In the "Folder Options" window, click the "View" tab. Under "Hidden files and folders", select "Show hidden files and folders".

You may also wish to uncheck the "Hide extensions for known file types" box, in order to see the file extensions for all files. Note: You may need to uncheck another box, "Hide protected operating system files (Recommended)", to see certain hidden Windows operating system files and folders. In most cases, however, clearing this box will not be necessary and you should leave it checked.


Outlook 2013, 2010 and 2007 DO NOT support CSS HTML Signatures (go figure - even 2003 did!)
so...
Open Outlook 2013, 2010 or 2007, create a new signature, name it, leave the window open.
Save your css formatted .htm email signature onto your hard drive.
Open the .htm file in your web browser (ie. Internet Explorer, Firefox, etc.).
Now you have to copy and paste:
Ctrl+A to select all the contents of your signature in the browser window then Ctrl+C to copy it to your clipboard then go back to your Outlook new signature and Ctrl+V to paste it into the signature editing box.
You will still have to set up the body of the email (font/colour/size) via Outlook's preferences.

Outlook 2011 MAC

Open the ".htm" file that you've been supplied from within your web browser. Press "Command A" on your keyboard to "Select All".
Now open Outlook 2011 and select "Preferences" scroll down to "Signatures". Click the plus button on the lower left to create a new signature (there may be some content in the right side of the signature window after you've clicked the plus icon, delete this content. Now press "Command V" on your keyboard to paste in your html signature that you copied from your browser earlier.
Set your "Default Signatures".
Note: Outlook has a lot of restrictions on CSS formatting: http://www.campaignmonitor.com/css/

Disclaimer: I am not a PC user, I am a proud Mac user of 23 years. The information above has kindly been provided to me from various sources over the years and is a guide only. Clients, please let me know if you have any corrections to the above information.

Client Support: How to install a CSS formatted HTML signature in Mac Mail OSX (Mountain Lion, Lion, Snow Leopard, Leopard, Tiger)

1. In Mac Mail, go to Mail>Preferences>Signatures>all signatures and click on the ‘+’ sign at the bottom. Give your signature a relevant name then click the close button and quit Mail.

2. Open your html formatted email signature (supplied by McCoyDesign) in Safari.

Mac OSX Lion
*From within Safari go to File>Save As>User[usually your name]>Library>Mail>V2>MailData>Signatures

Mac OSX Snow Leopard/Leopard/Tiger
*From within Safari go to File>Save As>User[usually your name]>Library>Mail>MailData>Signatures

NOTE: If you do not see your user folder, whilst within that "Save As" window click "command + shift + ." (that's full stop) all at the same time and it will show your hidden files. If this does not work, see below.*


Sort the window you are viewing into date order, with the most recent file at the top. You will see the signature you created at step 1 named something obscure like "A8AB6CBA-DF38-4C11-8AE1-2011E8B09E8E.webarchive" (Tip: The time the file was created will give you an indication of whether you are looking at the correct file). Select this signature webarchive file to rename the html file you're viewing in Safari, and press save. An elert box will say "A file or folder with the same name already exists in the folder Signatures. Replacing it will overwrite its current contents. Do you want to replace it?" - ensure you have the most recent signature that you initially created at step one, then press "replace".


3. Restart Mail and go to Mail>Preferences>Signatures>all signatures and make sure your new signature is there (linked images may not appear in this window, but as long as you are connected to the internet, they should appear when you create your email). Drag the signature name (in the column above the + - symbols) onto your relevant email accounts in the left column.

Select each relevant email account in the left column one at a time, and at the bottom of the signature preferences window where it says "choose signature" - select your new email signature to appear as default (if applicable), and tick "place signature above quoted text".

*If you cannot see this information, you have your files hidden by default. To show hidden files: Finder>Applications>Utilities>Terminal

Copy and paste the following command into the terminal window:
defaults write com.apple.finder AppleShowAllFiles TRUE

(click return)
killall Finder

(click return)
If you see all your files from your desktop disappear, this is so the finder can reboot. Once it has done so, you may see files on your desktop you hadn’t seen before such as: .DS_Store – these are required on OSX - don’t delete them.

If you want to hide these files again (after you install your signature):
Finder>Applications>Utilities>Terminal

Copy and paste the following command into the terminal window:
defaults write com.apple.finder AppleShowAllFiles FALSE

(click return)
killall Finder

(click return)

Saturday, 15 October 2011

Creating CSS Formatted HTML Email Signatures

As part of a client's Brand Development Startup Package, I create HTML email signatures. It's a tricky little job; way trickier than you would ever guess by just looking at the signature in your mail application. Designing an HTML email signature that displays the same on all of the key email applications is challenging, because they each have their own way of handling (or stripping out) CSS coding. Some even handle it differently depending on the version (especially Outlook Express).

A client recently asked what I mean by HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) - "don't you just type it". I figure it is easier to explain with screenshots:

Screen Shot 1: My email signature as seen in Mac Mail
Screen Shot 2: My email signature in CSS formatted HTML
Made just a little more complicated than website html, by the fact that you have to double up with CSS, in the head section and inline, whilst realising that certain features of CSS are completely ignored by some Mail applications (eg. floats, margins).

For my fellow designers, you may find this blog "A Guide To CSS Support In Email" by Campaign Monitor, a very helpful insight into how the different mail applications handle CSS in email signatures.

Also, according to MarketingSherpa Email Marketing Benchmark Report, only 33% of email applications have the default preferences set to show images in emails. That means 67% of recipients still don't automatically see images in the emails that they receive....

Outlook Express: How To Unblock Images
  • Open Outlook Express 
  • From the Tools menu, select Options. 
  • Click the Security tab. 
  • Uncheck the "Block images and other external content in HTML e-mail." checkbox. 
  • Press the OK button.
(Note: Microsoft states that blocking images is a security measure to prevent spammers from using web beacons from validating your email address. If you don't know what web beacons are, here is a quick summary: they're specially coded images that are embedded into emails to validate an e-mail address.)

Now installing the signatures .... well, that's another story!

Monday, 10 October 2011

Create a short URL for Google+

Go from this:
https://plus.google.com/108333615244037599***/

To this:
http://gplus.to/YourName

Makes it easier to share!

Click here to create your short URL.