Writing the signature HTML

Launch your favorite HTML source editor and write up your own mail template. Remember HTML and CSS support is seriously crippled in most email viewers (both apps and web). JavaScript is not available at all. 

Outlook uses an really old rendering engine from Word. Really, keep it 2005-ish simple ... haha (oxymoron).

Gmail doesn't allow <div> tags, but tables and images are fine.

You can use web fonts, but only very few viewers support them so you should make sure you have a nice fallback.

Apple mail:

Create new signature in mail – leave the standard text there.

The signature ends up in a file where you can edit the HTML directly.

If you are signed up for iCloud your primary signature file will be located here:

~/Library/Mobile\ Documents/com~apple~mail/Data/V3/MailData/Signatures

Otherwise, the local version is located here:

~/Library/Mail/V3/MailData/Signatures/

The version number (V3) increments continuously, so your might find a V5 or V6, depending on how much time has passed since this post was originally written.

Note: The iCloud version has priority over the local one - if you only update the local signature file, it will overwritten by the iCloud signature sooner or later.

The mail signature file has a .mailsignature extension. The content of the signature file looks something like this:

Content-Transfer-Encoding: 7bit
Content-Type: text/html;
charset=us-ascii
Message-Id: <520A943E-xxxx-4B28-A201-FC978626BD8B>
Mime-Version: 1.0 (Mac OS X Mail 9.2) <body> <p>Your signature</p> </body>

Gmail

Navigate to your gmail account, choose Settings and scroll to the signature section.

Use you hackerskills and inspect the signature input html node. It is inside div.gmail_signature , if you don't have this div then make a dummy signature, save it and refresh your settings page, then try inspecting again. A couple of nested divs down you should see your existing message start. Edit the HTML of the innermost wrapping div and paste your HTML into the div, maintaining the end tag intact, excluding <html>, <body> and <style> from your signature HTML, in order words, you should only paste from the first to the last <p> of your signature HTML.

Return focus to the signature editor and check out the new signature. Make a small change in the text and correct it back, and make the input lose focus (to invoke the UI to update with the new HTML), then click save.

That's it.