Guides
Styles for Email Clients
To find out what works and doesn't work in each email client, read this handy guide from Campaign Monitor:
https://www.campaignmonitor.com/css/
HTML for Outlook 2016
https://www.emailonacid.com/blog/article/email-development/coding-for-outlook-2016
HTML Tips
Prevent signature from wrapping (make it scale to fit small screen)
Text can wrap when viewed on a smaller screen. There are several simple ways you can prevent your signature from wrapping and make it scale to fit when viewed on smaller screens.
Here are two suggestions:
Option 1. Put it inside a table with a fixed width.
<table style="width:500px;">
Phones will then scale the whole signature to fit the screen.
If you have varying length text that can get quite long, the fixed-width table might be too restrictive - the next option might work better for your signature.
Option 2. Prevent a line of text from wrapping.
On your line of text that is wrapping, use the 'white-space:nowrap' style.
In the example below, the phone number label is on one line and the phone number has wrapped to the line below.
To keep the whole line together, wrap the whole line in a <span> or <div> with the nowrap style applied:
<div style="white-space: nowrap;">(!Street!), (!City!) (!State!) | P: (!Phone!) </div>
To allow the address and phone to go onto separate lines, but keep the phone label with the phone number, put a span around the phone number and it's label with a style of:
<span style="white-space: nowrap;">P: (!Phone!)</span>
Phone Styling
This link will show you how to make phone numbers keep their style without reverting to blue underlined links:
Phone Styles
Google Maps
To link an address to Google Maps, put an <a> tag around it like this:
Apply any styling directly to the <a> tag e.g. style="text-decoration:none;".
Horizontal Rules (HR tags)
It is possible to use horizontal rules in your signature, and to apply your styles to them.
Here is an example of code to produce a thin, red line:
<hr color="red" noshade="noshade" style="width:100%;display:inline-block;vertical-align:middle;border-top: 1px solid red;border-bottom:none;" />
See this guide on styling them:
https://www.w3schools.com/Tags/tag_hr.asp