Install an HTML Email Signature in Outlook, Gmail and Apple Mail
Jeroen Seynhaeve 2023-10-07
HTML email signatures are widely used, and recommended for branding and marketing purposes. But they can be more complex than expected, mostly due to email client quirks – over which we have little or no control. Not all email clients render HTML in the same way, so your signature may not appear as expected to everyone. Keeping the design simple and widely supported helps mitigate issues.
Why HTML Email Signatures Are Tricky
- 1. Email Client Inconsistencies: Different email clients (like Outlook, Gmail, Apple Mail) render HTML in slightly different ways. Outlook, in particular, uses Microsoft Word’s engine to render HTML, which can lead to unpredictable layouts compared to web browsers.
- 2. Image Handling: Many email clients block images by default until the recipient manually approves them. As a result, you need to add appropriate alt text and ensure the email still looks professional without images.
- 3. CSS Support Limitations: Not all email clients fully support modern CSS, and many email clients strip out external stylesheets. For instance, certain styling properties, like flexbox or background images, may not work as intended in email clients like Outlook. This means you have to stick to basic, “safe” HTML and inline styles to ensure consistency.
- 4. Responsiveness: Ensuring the signature looks good on both desktop and mobile devices is another challenge, which requires extra effort with media queries and flexible layouts.
General tips for coding and installation
- Keep HTML simple
- Fonts: you cannot attach custom fonts to an email signature, so use standard, web-safe fonts
- Layout – Use tables instead of divs
- CSS – Use inline CSS as opposed to external CSS files
- Colours – Use hex instead of rgba
- Images – Link the img src tag to external files (https://www.). For Outlook, after you’ve copied the signature from your browser into Outlook signature, manually re-insert the images as Outlook images.
- Outlook pro tip – In fact, in Outlook, don’t bother copying HTML from your browser. You’re much safer setting up an HTML signature directly, manually in Outlook > Settings > Signatures
1.Outlook HTML Email Signature
Copy and Paste Method
- Open the .html file in a browser (Chrome, Firefox, etc.).
- Copy the content displayed in the browser (front end, not source code).
- In Outlook, go to File > Options > Mail > Signatures.
- Create a new signature and paste the content from the browser into the signature editor.
Direct HTML Method (More reliable but requires access to signature folder)
- Save your signature in the appropriate location:
- For Windows, go to C:\Users\[YourName]\AppData\Roaming\Microsoft\Signatures.
- For Mac, go to ~/Library/Group Containers/UBF8T346G9.Office/Outlook/Outlook 15 Profiles/Main Profile/Signatures/
- Open this folder and replace the HTML file that Outlook generates with your custom file.
2. Gmail
- Open Gmail and click on the gear icon in the upper right corner. Click on “See all settings” to open the full settings page. Navigate to the Signature Section. If you don’t have a signature set up yet, click on Create New and name your new signature.
- Open your HTML signature in a web browser. Right-click on the page and select View Page Source. Copy the entire code of your signature from the source page, or if you can view it directly in the browser, simply highlight and copy the displayed signature.
- In Gmail, click into the signature editor box and paste your HTML signature (from the browser or HTML editor).
- Save Changes
3. Apple Mail
- Open Apple Mail.
- In the main menu at the top of your screen, select Mail > Settings > Signatures. Click the + sign to create a new signature (will serve as placeholder)
- Close Apple Mail.
- Click anywhere on the Desktop. In Apple’s main menu at the top of the Desktop’s window, select Go, hold the Option key to see Library. Select Library > Mail > V10 > MailData > Signatures.
- The last created .mailsignature file is the placeholder file. Double-click to open it.
- The file may be locked – it will say so next to the file’s name at the top of the window. To unlock, hover over the word “Locked”, select the downward arrow, and uncheck the box next to “Locked”.
- In the .mailsignature file, paste the HTML we’ve provided below the Mime-Version line.
- Lock the file (check the box you’ve unchecked) and Save.
- Open Apple Mail, in the main menu select Mail > create a new email and send to yourself to test.