Coding an html email signature is not too hard, but if you have only been writing HTML for the past few years, it’s going to be a little strange. Why? Because coding an HTML email signature feels like coding a website back when some of us old guys starting making websites in like 1998. Inline styles, tables, and conditional tags were all the rage. It seems simple enough, but achieving perfect email client support can be a maddening and almost impossible task.
The biggest issue is that different email clients render HTML in wildly different ways. Some newer ones use a perfectly modern rendering engine akin to modern browsers like Chrome and Firefox. Others use really basic HTML rendering, viewing HTML code more like Microsoft Word than Microsoft Internet Explorer.
That said, here are some basic tips to get you started on your way:
Keep it simple:
A good rule of thumb is that the more simple your signature is, the more likely it is that it will work across the board of email clients. Don’t try to get too fancy or you will end up frustrated.
Use Tables:
If you want to do anything fancier then elements stacked on top of one another, then use tables for layout. Other CSS layout techniques won't help you here so don't even bother trying to use floats, flexbox, or grid! Table cells should have exact widths. Include styling for font styles in the <td> tags. (See below)
Style Inlining:
The styles within your email signature should not be in a .css file or in a <style> tag. Instead, the majority of the styles should be inline, placed on each tag like this: <div style=“font-size:18px;”>Text</div>.
Just use Pixels:
On today’s web we have many different options to choose from. But keep things simple in an email signature and just use pixels for everything. You’ll thank yourself later.
Spacing is Problematic:
Margins and Padding may seem like a simple concept, but you will pull your hair out trying to figure out why they are being ignored from time to time. Outlook is one of the biggest issues here, it only allows margins (and not padding) on <p> tags, and only allows padding on <td> and <table> tags.
Line Heights must be included!
We recommend setting line heights for all text and wherever you do that include the property mso-line-height-alt:exactly as well. This makes sure that Outlook will do what you expect it too.
Images Need Widths:
It is important that all images have a pixel width. Go ahead and include the width in both the style tag and the width tag, but don't include px in the width tag or it may be ignored.
Background Images Are Tricky:
There are some tutorials online to making them work, but generally we haven’t had good luck in email signatures.
Limit of 10,000 characters:
Remember that some email clients (like Gmail) won’t let you have too long of an email signature.
Media Queries May Not Work
Some of the newer email clients can read media queries in an email. The main problem here is how the email signature gets into the email client. If it involves any kind of copying and pasting process, then don't rely on media queries at all as they will probably be lost. Since mobile is really important for email, consider keeping your signature less wide for mobile devices, say 300-400 pixels.
Remember that where you are pasting the email signature is just as important as what email clients the signature will get viewed on. When you paste an HTML email signature into Apple Mail, it treats it as “Rich Text”, which removes certain inlined styles that may be important for Outlook. There’s not a lot to be done about this, so be wary of how the signature will be used by the people you are making it for.
Using a service like Litmus.com or EmailOnAcid.com is also extremely helpful. You can install the signature into your email client and send them an email. This email will then get screenshots taken of it across many different email clients. Some of them you have probably never heard of. This is great for learning about all of the different versions of Outlook and how each of them treat HTML signatures differently. These services are invaluable but expensive.
Hopefully this is a helpful first step as you begin to make your HTML email signature. If you are interested, we offer a free email signature designer that you can use to create really custom looking stuff. If you’d prefer not to take the coding approach you should try it out.
