Email signatures are a pain in the patooty. Trying to create anything new, unique or extremely creative is basically impossible if you want your signature to render on as many devices as possible.
The technology that goes into email signatures hasn’t really changed in 20 years, and why would it? It’s not a priority for any tech brand, and it’s perfectly possible to create a perfectly adequate signature with just some basic coding skills.
Unfortunately, coding skills this basic aren’t actually that easy to come by. Pro developers earn way more doing proper fun development, and even entry-level designers-cum-devs these days are so advanced that it can be a pickle to de-skill and create something so rudimentary.
Luckily for y’all, I learned to code in the late 1990s, mainly to make my own Neopets help website. Oh yes, I was that lonely cool. So using my mad nineties skillz, I’ve created a free ultra-simple HTML/CSS email signature and how-to that anyone can personalise for their brand.
Pre-work: Prepare your image files
It is possible to create an entire email signature in an image. I personally find this more frustrating than useful, as it prevents your lovely recipient from copying and pasting your useful info.
We do need a few images for this free coded signature though, starting with your small business’ logo.
In this template, the logo won’t ever show larger than 140px – I’d crop your own logo to about 200px wide so that you have some wiggle room. Make sure to use PNGs to retain the quality of your graphics.
You’ll also need icons for the social media networks you’d like to include. I use a super simple a free tool called Iconmonstr for this – you can pop in your own brand colours and download lovely PNGs in a consistent size, I go for 48px.
Now you need to host your images. I love WordPress, so I just pop these in my media gallery. You can upload the images to anywhere you like on the web, including services like Imgur.
Now let’s get to the code.
Getting started with code for your email signature
Here is the terrifying code. If you know absolutely nothing about HTML or CSS, don’t freak out. It’s ok, I’m going to talk you through exactly what you need to do to make this email signature perfect for you.
Start by opening a super awesome and super free tool called Scratchpad.io. This web app lets you live-view your code, so replace the text on the left hand side of your screen with the code above.
If all has gone to plan, you should be able to see a comment that says “!– MAKE SURE THIS IS ROW 1 –>”, I’m going to be talking you through the code by using the line numbers, so just double check that this comment is the first line of your code before we get into it.
<!– 1. Google Fonts Code –>
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet" type="text/css">
There are only about 20 fonts that are guaranteed to render in all email signatures, and one of them is Comic Sans. Ew. Luckily this little bit of code means you can also pull in fonts from Google’s amazing library of free fonts.
I’ve used Monsterrat and Space Mono in the template, just switch the puce-coloured text above to your desired Google Fonts. If you’re not using Google Fonts, just ignore these for now.
<!– 2. Dotty Cell Borders –>
<style>
td {
border: 1px dotted black;
}
</style>Email signatures are built using tables, just like those you see in Excel or Word. If you’re as easily confused as I am, it’s a heck of a lot easier to work with tables when you can see the borders around the cells.
This little smidgen of code is adding the dotty border you can see, we’ll delete it at the end when we’re done personalising your signature. DO NOT DELETE YET.
<!– 3. ‘Master’ Styling –>
<table style="
background-color: #F0F3EB;
font-family: Space Mono;
text-align: left;
color: #484A47;
font-size: 14px;
line-height: 21px;
padding: 10px 40px;">
<tbody>
CSS (or Cascading Style Sheets) allows you to apply styles to HTML, so that you don’t have to code in “this text is pink” 100 times. In the fancy world of websites, these are super sophisticated and a chunk of CSS can be applied to whole websites in one go.
We’re dealing with the drastically un-fancy world of email signatures, so we need to apply these styles to the areas where they will actually be visible. Luckily, we can apply a lot of CSS to the table, as most of our content sits within this HTML element.
By changing the values in this section, we can apply most of a brand identity to the template. Most of these are self-explanatory, but if you’re unfamiliar with CSS the ‘padding’ value in line 21 might through you off – this just means that we’ve added a gap of 10 pixels to the top and the bottom of the signature, and 40 pixels to the left and right.
You can also add additional styles here, e.g. text-transform: uppercase; to make all the text uppercase, or letter-spacing: 1px; if you like some airy text. Make sure each style ends with a semi-colon, I forget these All. The. Time.
<!– 4. The Logo –>
<td rowspan="6" style="width:30%; padding-right:20px;">
<a href="www.puddleducking.com">
<img src="https://studiocotton.co.uk/wp-content/uploads/2018/01/classy-logo.png" width="140px">
</a>
</td>
This is one of the scariest lines of code in your signature, but don’t worry. You got this.
You might have noticed that we haven’t yet mentioned mobile-responsiveness in this blog post, and that’s because making a fully-responsive email signature that’s also pretty is an even humongous-er pain in the patooty.
This email template is mobile friendly, as opposed to mobile-responsive, which means it’ll look tidy as opposed to perfect on smaller devices. That’s ok, it’s functional and on-brand, which is plenty.
So, what does that have to do with the logo? Well, the width of this email signature is currently relative to the width of your logo. The first bit of this code says that we want our logo to have a 20 pixel gap to the right, and for the logo + gap to be 30% of the full width of the signature.
You can play with these values, but bear in mind that you want to keep your signature nice and narrow.
Replace www.puddleducking.com with your website to make your logo clickable, and replace the next link with the link to your hosted logo. If you can’t find this link, you should be able to right click on your logo file and click ‘Copy Image Address’.
The final value is this section is your logo width – again you can tweak this as you please, but keep it as toight as possible.
<!– 5. The Contact Details –>
<tr>
<td colspan="5" style="padding-top: 40px; font-size: 22px; font-family: montserrat;">Jemima Von Puddleduck</td>
</tr>
<tr>
<td colspan="5" style="padding-bottom: 15px;" >Senior Head of Puddleducking</td>
</tr>
<tr>
<td colspan="5">+44 123 456 789</td>
</tr>
<tr>
<td colspan="5">Puddleduckingham Palace, London SW1A 1AA</td>
</tr>
<tr>
<td colspan="5" style="padding-bottom: 15px;">
<a href="www.puddleducking.com" style="color: #8FC0A9; text-decoration: none;">puddleducking.com</a>
</td>
</tr>
In this section you can add your own contact details. I’ve also added a little extra padding to separate the name and job title from the contact details, and contact details from social icons.
In line 41, we’ve also added in a little extra styling for the link. Without this code, you’ll get an old-skool blue underlined link, so we just added the colour back in.
I didn’t think Jemima von Puddleduck would be a fan our the underline, so added in the text-decoration: none;, if you like an underline then just delete this little bit.
<!– 6. Social Icons –>
<tr>
<td style="padding-right: 12px; width:28px"><a href="https://www.instagram.com/"><img src="https://studiocotton.co.uk/wp-content/uploads/2018/01/classy-logo-instagram-11-48.png" width="25px"></a></td>
<td style="padding-right: 12px; width:28px"><a href="https://www.pinterest.co.uk/"><img src="https://studiocotton.co.uk/wp-content/uploads/2018/01/classy-logo-pinterest-1-48.png" width="25px"></a></td>
<td style="padding-right: 12px; width:28px"><a href="https://twitter.com/"><img src="https://studiocotton.co.uk/wp-content/uploads/2018/01/classy-logo-twitter-1-48.png" width="25px"></a></td>
<td style="padding-right: 12px; width:28px"><a href="https://www.facebook.com/"><img src="https://studiocotton.co.uk/wp-content/uploads/2018/01/classy-logo-facebook-1-48.png" width="25px"></a></td>
<td></td>
</tr>
To add your social media icons, follow the same process as adding your logo. Replace the first link with the URL of your profile, and the second link with that of your icon. You can rearrange the order and switch out networks as you need too.
It’s possible to edit the sizes and padding too, exactly the same way as your logo. I probably wouldn’t recommend this just because it can get fiddly and you won’t gain much by going through all that faff.
<!– 7. Legal Gubbins –>
<table style="
font-family: Space Mono;
font-size: 11px;
padding: 40px 0;">
<tr>
<td>Here is some legal gubbins. It can be as long or as short as you like. It can even include lyrics from your favourite Miley Cyrus song. I'm came in like a wreeeecccccckkkkiiiiinnngggg ball.</td>
</tr>
</table>
Depending on your profession and your market, you might need to include some boring details in your emails. As we’re in the UK and VAT registered, my signature includes our company registration details and VAT number.
I personally like this to be as subtle as possible, which is why I’ve knocked down the font size and added a nice big padding to keep it away from my prettier signature.
Delete what you don’t need
Turns out I didn’t use the line numbers too much after all, ah well. Before you finish your signature, delete all the code you don’t need. Start with the dotty borders from lines 6 – 12.
You can delete all the comments that match up with this blog post too, but it won’t do you any harm if you leave them in.
Importing your HTML email signature
This differs so much from client-to-client, browser-to-browser, and so I won’t write up the instructions here. When you’re happy with your signature are ready to start using it, just Google “set up HTML email signature in XYZ” and follow the instructions of someone who knows a lot more about this than I do.
