We’ll use free and inexpensive apps to create the signature. If you prefer, use Pixelmator or Photoshop to prepare graphics and design in your favorite web app. Or code it yourself in HTML. Place everything in a folder called custom_signatures.
- Create a folder called custom_signatures or something similar.
- Edit logos and graphics in the Preview app, Pixelmator or another image editor.
- Edit, crop & size images appropriately. Export as logos as .png and photos as .jpg and use simple names (for example, abc-logo.png). Save them in the custom signatures folder.
- Open the TextEdit app. It can be used as a rudimentary web design tool because it has the ability to export to HTML-based web archives. You may have more flexibility using the Pages app to lay things out, then copy & paste the results in TextEdit.
- In TextEdit, choose Preferences and click Open and Save. Uncheck the box Display HTML files as HTML code. Close the window.
- Create a simple signature using web-safe fonts and tables to place objects where you like.
- In TextEdit, click the File menu and Save… If the dots aren’t shown after Save, you’ll need to choose Duplicate first and then Save…
- Name the document signature1 or something similar. Choose the Web Archive Document file format. Keep TextEdit open – it may need further adjustments later.
- Use the Folder to Webarchive app to convert the .webarchive to a folder.
- Open the folder you created and drag the contents (except decode_info.plist) to the custom_signatures folder. You can delete both the .webarchive and the empty folder.
Uploading files and editing references
- Open the custom signatures folder from the last section.
- Name the html file signature1.html or something similar.
- Drag the signature file to Safari to preview it. If something doesn’t look right, make corrections in TextEdit or your web app and reconvert.
- Choose an option. If you don’t need to host images on the web, skip to the next section, Creating a placeholder signature in Mail.
- Use an FTP app like Transmit to log into the web host.
- Upload the images to a custom_signatures folder on the web host.
- In TextEdit, choose Preferences and click Open and Save. Check the box Display HTML files as HTML code. Close the window.
- Open the custom signatures folder from the desktop and drag the signature1.html file to TextEdit.
- Select from the top line to just before <head>. Then delete.
- Select from just after the last </body> to the end of the document. Then delete.
- Look for image references - usually beginning with file:///
- Change the references to the absolute paths of the files on the web server. For example, if your web site is www.example.com and you upload the image image abc-logo.png to a folder called custom_signatures, change the reference to http://www.example.com/custom_signatures/abc-logo.png
- Make other changes to HTML code – add links and other refinements. See ideas below.
- Save the signature as a plain text file to the custom_signatures folder on the desktop. Replace the old version.
- Drag the signature file to Safari to preview it and verify that linked images load correctly. If not, check the image files and paths.
Tips for HTML signatures
Apple’s Mail apps can display most signatures — basically anything that works in the Safari web browser works in the Apple Mail app as well. But not every email client or webmail is so forgiving. Here are a few tips.
- Keep it simple – no fancy coding. You don’t even need HTML, HEAD or BODY tags.
- If you use CSS, use inline CSS and only basic CSS properties. Use tables for basic layout
- Use absolute URLs, not relative paths.
- Create images twice as large, then set width and height exactly half the actual image size. They will appear perfectly sharp on Retina displays.
- Make an image a live link with this sample code <a href="http://www.example.com"><img src="http://www.example.com/abc-logo.png" alt=“Example" width="320" height="160" border="0"></a>
- Think outside the box. A linked image could be used as a placeholder. Whenever you change that image all the signatures change instantly. The image could contain text highlighting promotions.
- Problems displaying signatures in the Mail app? Check your Preferences. In the Composing page, choose the Message Format – Rich Text. In Viewing, Display remote images in HTML messages.
- Test your signature. Send messages and open them on different systems: Apple Mail on Mac, iPhone & iPad, Outlook 2016, 2013 & 2010 on Windows, the Gmail web interface and any others you think recipients commonly use.
- See simplified instructions here. (Does not include these advanced techniques.)
Learn more about custom signatures.
