Creating a slick, yet accessible email signature! ๐Ÿ–‹

Creating a slick, yet accessible email signature! ๐Ÿ–‹

A quick guide on how to create a slick, yet accessible email signature in 2021.


3 min read

Featured on Hashnode

A few months ago, I decided to replace my old email signature with a new better looking one.

For reference, this is the old email-signature:

Screenshot 2021-03-09 at 7.27.17 PM.png

For some reason, I thought my e-signature didn't look that bad, let's just say I needed a good wake-up call! ๐Ÿคฆโ€โ™‚๏ธ

I went on to to find some inspirations. I found many nice looking ones with shadows, gradients, etc... But, unfortunately, it's not that easy to create a good-looking e-signature and at the same time make it accessible across all the email clients (or at least most of them...)

In the end, these are the designs I got inspired from:

  1. For this one, I really liked the overall look of it! Screenshot 2021-03-09 at 7.34.31 PM.png Link

  2. And for this, I liked the CTA button. Screenshot 2021-03-09 at 7.34.19 PM.png Link

At the start, I tried to use the MJML framework to build my signature, but it turned out to be more difficult as its purpose is to build responsive emails, not email signatures.

So, after a day of wasting my time with MJML, I decided to go my own way and build it from scratch...

DISCLAIMER: Prepare for some old school sh*t and forget about Flex layout! Heck, you can't even use shadows or custom fonts! You are gonna build an email signature using tables and inline-styles! YAY! ๐ŸŽ‰

Here are some resources to get you started on the right foot!

If you read those articles and you still want to create your email-signature, then it means you really want it, so let's get to work! ๐Ÿ”จ

Here are some advices from me:

  • If you want to make your text italic, bold, add quotes, etc... It's better to use HTML tags specified for that instead of doing it through CSS! -

  • Make sure to add this attributes to your table:

    <table cellpadding="0" cellspacing="0" role="presentation">
  • If you want to use icons, for example, social-media brands, you have to use .PNG or .JPEG images. SVG is not yet supported in most of the email clients! I used to host my images.

  • You can create classes and style those, but your end code should be transformed into inline-style css. This is a great tool that will help you do just that! -

  • If you are not sure if a CSS property will be supported or not, you can use these websites - 1, 2

  • I like to make everything I build accessible, so make sure to check your code to be accessible too! - 1, 2

  • Make sure to minify your code when you are done -

After you are done, you have to import your signature into your email client. Every email client handles this differently. I use the apple mail and I used this tutorial. Make sure you import just the BODY tag and minify your code before pasting it into the file!

Here is my new signature ๐Ÿ˜Š

Screenshot 2021-03-09 at 7.24.41 PM.png

Hope this was useful to you guys in case you want to build your email-signature! See you tomorrow ๐Ÿ˜Š

p.s ๐Ÿคซ I recently started a podcast called The Anxious Developer where I share my knowledge on how to reduce your stress, become more present and productive as a Developer. I would love to hear your thoughts on it! ๐Ÿ˜Š

Remember, you are worthy, you are loved and you matter! Have a great day! โค๏ธ