How to Create an Html Email Signature

Coding an html email signature may seem challenging, especially if you’re used to writing HTML for websites. It feels like going back in time to the days when websites were built in the late 90s. Inline styles, tables, and conditional tags were all the rage. But don’t worry, with some simple tips, you can achieve a well-supported email signature across different clients.

Keep it Simple

A good rule of thumb is to keep your signature simple. The more complex it is, the more likely it is to encounter issues across different email clients. Avoid getting too fancy to save yourself from frustration.

Use Tables

If you want to add some complexity to your signature layout, use tables instead of other CSS techniques like floats, flexbox, or grid. Tables work best for achieving consistent results. Make sure the table cells have fixed widths and include font styles within the <td> tags.

Style Inlining

Unlike websites, styles for email signatures should not be in a separate CSS file or enclosed in a <style> tag. Instead, place the majority of the styles inline on each tag. For example: <div style="font-size:18px;">Text</div>

Stick to Pixels

In today’s web, there are many options to choose from, but it’s best to keep things simple in an email signature. Use pixels for everything, and you’ll avoid unnecessary complications.

See also  Introducing the ProgramMatek HTML Workflow Diagram

Spacing is Problematic

Margins and padding may seem straightforward, but you might encounter issues where they are ignored. Outlook, in particular, can be tricky as it only allows margins on <p> tags and padding on <td> and <table> tags.

Include Line Heights

Set line heights for all text in your signature and include the property mso-line-height-alt: exactly. This ensures that Outlook behaves as expected.

Images Need Widths

Ensure that all images in your signature have a specified width in pixels. Include the width in both the style tag and the width tag, but exclude “px” in the width tag to prevent it from being ignored.

Background Images Are Tricky

While there are tutorials available for using background images in email signatures, they can be challenging to implement effectively. It’s often best to avoid using them.

Mind the Character Limit

Keep in mind that certain email clients, such as Gmail, have a maximum character limit for email signatures. Be concise and stay within the limit to ensure your signature displays properly.

Media Queries May Not Work

While newer email clients may support media queries, they may not be reliable if the email signature involves copying and pasting. To cater to mobile devices, consider keeping your signature narrower, around 300-400 pixels.

Remember, where you paste the email signature is as important as the email clients it will be viewed on. When pasting an HTML email signature into Apple Mail, it treats it as “Rich Text,” which can remove important inlined styles for other clients like Outlook. Be mindful of how the signature will be used by the recipients.

See also  HTML Lesson Plan

Using services like Litmus.com or EmailOnAcid.com can be extremely helpful. These services allow you to install the signature into your email client and send a test email. Screenshots will be taken across various email clients, including obscure ones. This helps you understand how different versions of Outlook treat HTML signatures. Keep in mind that these services can be costly but invaluable for testing.

We at ProgramMatek offer a free email signature designer if you prefer a coding-free approach. You can create custom-looking signatures using our designer. Give it a try!

Creating an html email signature doesn’t have to be daunting. With these tips and tools, you’ll be on your way to a professional and well-supported email signature.