Boost your email swag with HTML Signatures

Crafting a HTML email signature is a nightmare. There are compatibility quirks, design challenges, and no support from the big email providers. This readMe is a quick overview of the important lessons I learned and the pitfalls to avoid. Be very strict unless you are happy to waste some time.

Things that will save you time:

• Don't Use Media Queries: They often don't work across all email clients.
• Stick to a Mobile Version: Without reliable media query support, stick to a mobile version.
• Don't Use SVGs: Gmail has limited support for SVG images.
• Images Need Transparent Backgrounds: Ensure your images have transparent backgrounds to accommodate dark mode. A white backgrounded image will be email suicide at night time.
• Use Referenced Images: Support for referenced images is generally good. ie: /<img src="link" />
• KISS (Keep it Simple, Stupid): Complexity will lead to headaches.
• Tables: Tables are the standard for compatibility.
• Read The Ultimate Guide to CSS & Email linked below

How to Inject Your Signature into Apple, Gmail & Outlook

Apple Mail:

One does not simply drag and drop an HTML signature into apple preferences. Follow these instructions.

Gmail:

Install the Chrome extension "Insert HTML by Designmodo" to copy and paste your HTML code into Gmail's signature box.

Outlook:

Install the Microsoft extension "Insert HTML by Designmodo" to copy and paste your HTML code into Outlook signature box.

Note: With both Outlook and Gmail, the extension adds a little mailbox icon to the signature boxes toolbar. Click the icon and a popup will open to allow the copy/paste of html code.

Ready to make your own? These 2 pages are a must read

• The 17 DOs and DON’Ts of email signatures
• The Ultimate Guide to CSS and Email compatibility