Useful HTML Resources

Views:

This article contains some helpful resources for writing HTML in emails.

For help on editing the HTML code see: Adding Your Own HTML

Web Safe Fonts

http://www.cssfontstack.com/

Linked Web Fonts

Not all email clients support web fonts, you can still add them to your signatures, but make sure that you include fall-back fonts for the email clients that don't support them.

How to add a web font:

1. Add the font link at the top of the html code.

2. Put the font name into the font-family style tag.

Example:

<link href="https://fonts.googleapis.com/css?family=Lexend+Zetta&display=swap" rel="stylesheet" />

Then in the signature code:

<div style="font-family: 'Lexend Zetta', sans-serif;">(!JobTitle!)</div>

For more info click here.

Web Safe Colours

http://www.w3schools.com/colors/colors_picker.asp

HTML Formatting for Email Clients

For general assistance on writing HTML visit this website for tutorials http://www.w3schools.com/default.asp

Email clients render HTML differently, the following links may help to troubleshoot any problems you may be having:

Supported CSS for each email client:
https://www.campaignmonitor.com/css/

Tricks for Outlook 2016:
https://www.emailonacid.com/blog/article/email-development/coding-for-outlook-2016

Email Client Marketshare
Here's a useful site which measures email opens by email client so you can see what you're designing for (note: this would have primarily measured marketing emails):
http://emailclientmarketshare.com/

Using CSS styles

Why Preprocessors are the Enemy – Litmus
The Ultimate Guide to CSS – Campaign Monitor
Email Client CSS Support The Ultimate Guide to CSS – MailChimp
Google Gmail Support – Email Standards Project

General Tips

Getting consistent results in different email clients

How to ensure my signature appears correctly across different email platforms

http://www.emailmonks.com/email-client-hacks/infographic.html

https://www.emailonacid.com/blog/article/email-development/coding-for-outlook-2016