The Blog

How to Create an HTML Email Signature

Mar 21, 2018 | Coding, Resources

If you’ve read our post on why you should be using an HTML email signature rather than a single image, you might be wondering how to go about creating one for yourself or your client. Read below to discover how to create an HTML email signature.

Google Docs

Creating an HTML email signature in Google Docs is really simple. Just create a table, and insert your image/s and text. Best practices should be followed in terms of font usage.

You can add hyperlinks to your social media or website, and style the links in a certain colour and font weight. Once you’re done, simply highlight the entire table and set the border width to 0pt. Highlight the table again, copy your signature to your clipboard, and paste it into your email signature area on your email client.

The great thing is that the image/s are hosted in the Google Doc and so as long as you keep your original document, you won’t need to host the image elsewhere.

While this will work for most mail clients, you may run into issues with certain webmail clients and Apple Mail. This means you may have to create your HTML signature from scratch using… HTML.


Creating an HTML email signature in a code editor

In order to create an HTML signature you’ll need your favourite code editor ( we <3 Brackets ). You will need to use HTML tables for layout, and inline CSS for styling. Below you can see what the previous email signature created in Google Docs looks like when created in HTML with a simple two-column table and inline styling.

You can host your image/s on your web server or with an image hosting service.

Once your HTML signature is complete you can copy the code and paste it into the designated HTML area of your mail client.

The process is more tricky for Apple Mail, and you can find a useful guide here.

instagram icon     facebook icon     linkedin icon


instagram icon     facebook icon     linkedin icon