How to Create an Amazing Email Signature
Hearing the words “please create this email signature for me” is enough to make most web designers shake with fear and profusely sweat beads, whilst thinking “Oh no, not this again…”. Understandably so.
Whilst HTML and CSS have progressively changed over the years, web browsers have adapted to these changes. However, email clients haven’t changed much at all in terms of the way they render HTML – and this is what makes email signatures frustrating.
When creating email signatures, you really have to take yourself back to the days of eating pizza’s in front of CRT screens while “surfing” Netscape Navigator, and then you might have a chance of getting it right.
Designing a (Sensible) Email Signature
There are a few things to consider when designing an email signature which will make your life easier in the long run.
1. Use a good photo editing tool to design the actual signature
Don’t try and do it on the fly thinking it will work out – it never does. If you’ve done web design for a while, you’ll know exactly what I mean. A good tool to use is Adobe Photoshop or Sketch.
2. Don’t include irrelevant information
No one wants to know your favourite quote at the end of your email signature, or your pet camel’s birthday.
3. Check the visual size of the signature
Once in a while, take a step back and check the size of the signature. Will it look too big and intrusive at the end of emails? Does it take up the whole screen when displayed on a phone?
4. Include a logo or profile picture
People remember faces and logos more than names. It also adds some personalization to the email.
5. Use complimentary colors
Using colors which work in harmony always makes the signature look more beautiful. Adobe has a great tool for checking complimentary colors.
6. Design with spacing in mind
Email clients are known for adding random spaces between tables and other elements, so make sure the signature will still look fine if a bit of spacing gets added here and there (we’ll come back to this later).
Fields to Use
The fields you use are ultimately up to you (or your customer) so there is no set answer here. However, these are the most common type of fields used: name, position, company, phone numbers, logo, profile pic, website, address, and social icons.
Coding the Signature
Remember how I was saying you need to go back to the old days of CRT screens? Well, hope you have your Netscape Navigator open, ready for some coding.
Here are some of the most important things to keep in mind when coding your signature.
1. Don’t use background colors
Although background colors work perfectly fine in normal web design applications, they are a no-go zone for email signatures. The reason? A lot of email clients don’t support (or are buggy) with background colors (such as Outlook 2007-2016). Take a look at the comprehensive list of CSS support for email clients here.
2. Use only web safe fonts
Web safe fonts are basically fonts which are available by default (or pre-installed) on most operating systems. Web safe fonts are: Arial, Arial Black, Calibri, Comic Sans, Gadget, Helvetica, Palatino, Tahoma, Verdana, Trebuchet, Courier New, Lucida, Times New Roman, and Georgia.
If you use a font that is not a web safe font, ensure you include a fallback font, just in case your primary font is not installed on the recipients’ device.
3. Check the size of the email signature (in KB)
Images have a huge role to play in large email signatures. So, before using any images in your email signature, make sure you compress them by using a tool like TinyPNG. An email signature should be under 30Kb in size. Any larger, and you will be taking up valuable space in not only your mail server (sent items), but also your recipients mail server (their inbox).
The accumulated bloat can also increase the time it takes for server migrations and in general it can make life more difficult for your / your customer’s IT department.
4. Only use HTML tables for your layout
I can just imagine your cringing face right now! Tables aren’t meant to construct a layout, right? Well that’s completely true…except for email signatures. This is because you’re going to have to design with Microsoft Office in mind, which you can think of as IE6. So, no flexboxes, don’t even float anything! Instead, only use tables.
5. Remove image metadata
Leaving metadata like DPI in your images can cause them to be resized in Outlook under some circumstances such as when the recipient’s Windows computer is set to render at 125% zoom.
6. If you get stuck, use a tool
There are many email signature generators out there. However, most of them don’t give you enough flexibility to warrant including them in your web design toolkit. Gimmio is one that allows you to change a multitude of settings and is made specifically for web designers, which makes it pretty handy if you’re stuck with creating signatures for your clients.
Testing the Signature
Remember the last time you created a great looking website, and it looked just as great in Internet Explorer 8? Me neither.
Unfortunately, it’s a much worse situation with email signatures, and there’s no way to get around it. You can’t stop people from using an older version of Outlook, so you just have to try and make it look as good as possible given the situation. Maybe a good comparison for email signatures is if your task was to make a website that works perfectly in IE6, IE7, and the first versions of Firefox, Opera, Chrome… you get the point. Nightmare inducing!
1. Test the most popular email clients first
According to this source, the most popular email clients as of December 2017 were: iPhone, Gmail, iPad, Apple Mail, and Outlook.
Notice that 2 of the top 5 were mobile? This brings us to the next point.
2. Mobile Compatibility
Mobile screens are (usually) small, which means they do a host of funky things with email signatures. For example, your signature may look squashed and unreadable on a mobile screen, and this is because the outer table in your HTML is wider than around 300px. So, using a vertical signature usually makes for a much nicer mobile experience.
Also, keep in mind that modern phones use scaling, which means that images (such as logos and profile pictures) can appear to be bad quality and blurry because the phone will try an upscale the raster image as well as everything around it. Take a look here for more info.
3. HTML Rendering Engines
Whilst it’s not essential to know this, it definitely helps when troubleshooting for problems. Here are the most popular email clients and the rendering engines they use:
- Outlook 2007 – 2016 – Microsoft Word Rendering Engine
- Apple Mail (OSX & iOS) – Webkit Rendering Engine
- Thunderbird – Mozilla Gecko Rendering Engine
- Mailbird – Chromium Rendering Engine
- Gmail, Office 365, Yahoo Mail and all other webmail services – Uses the rendering engine of your web browser
Hopefully, now you can see why email signatures are such a pain to deal with. The top 5 most popular email clients in the world use 3 different HTML rendering engines.
Known Problems with Email Clients
Here are some of the most talked about problems with email client compatibility. I’ll limit it to 1 per email client, otherwise this article will quickly turn into an essay.
Outlook
Outlook is known for changing the size of images in your email signature. The best and easiest way around it is to remove the image metadata, specifically the DPI attribute.
Gmail
Gmail has a known issue where it will automatically add a gap below images. This can make your signature look broken if you didn’t take my advice earlier to “design with spacing in mind”. As far as I can tell, there isn’t a way to fix it. If anyone would like to shed some experiences in the comments, I’d love to hear it.
Apple Mail
For the most part, Apple Mail handles email signatures really well. The most common issue here is when you go to install the email signature, it will look really broken in the signature preview window. However, the email signature will still look perfectly fine when composing a new message.
Thunderbird
Although not many people use Thunderbird, this one is worth mentioning. When using an email signature with thunderbird, it seems to place red dotted borders around all the tables.
Two More Points…
When you create your email signature and want to copy it into your email client, always copy it using either Google Chrome, or Mozilla Firefox. Other browsers don’t copy all the HTML tables correctly, so you end up with a broken email signature when you paste it into your email client.
It’s important that you don’t treat email signature design in the same way as designing a website because it’s not possible to achieve complete consistency. If you follow the points above, you’ll get a high level of consistency, but there will still be differences. So, it’s important that this is communicated in advance to your boss / customer, otherwise expectations will not be met!
The post How to Create an Amazing Email Signature appeared first on Speckyboy Web Design Magazine.