How to Code an Awesome HTML Email Signature

Published on August 29, 2019

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.

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 no 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.

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.

Email Signature Designer

Looking for a new way to design and share email signatures?

signature.email has one of the most advanced signature generators and the easiest way to share email signatures in an organization. Try it free!