1. Create Your Signature with Mobile in MindIt’s amazing how many people completely skip over this step, without knowing the consequences. Mobiles account for 46% of all email opens, meaning that testing your email signature for mobile compatibility is essential. A common misconception is that your email signature will be compatible across all email clients. The sad truth is…it won’t. Although I would love to blame Outlook for this, the reason is actually that most email clients (mobile included) use different HTML rendering engines and that means they all display email signatures differently. In addition, mobile screens are much smaller than PC displays, and they also use scaling. Because of this, vertical layouts work much better on mobiles. Using a wide layout on mobile devices can cause your signature to look squashed and the images to be scaled up which makes them look blurry.
2. Include Only Essential DetailsThe details a college student includes in their signature will be a lot different to the details a lawyer includes. Only include the details which are relevant to you. For example, if you’re a college student, you would probably include the university you’re attending and the subject you’re studying. You wouldn’t include those details if you’re a lawyer. Most people aren’t interested in knowing your favorite band, or color. Your email signature should include the information needed to contact you, and any other relevant information. If you’re unsure, ask yourself “Would I give that information to a business associate I had just met?”. Here are the most popular fields to include in your email signature:
- Full Name
- Job Position
- Mobile Phone Number
- Office Phone Number
- Office Address
- Profile Picture and/or Logo (or both)
- Social Icons (optional, but recommended)
- Promotional Banner (optional)
- Disclaimer (optional)
3. Consider FontsA font can completely change the look and feel of an email signature. The same can be said for the colors and spacing. You should never use multiple fonts in your email signature. The only exception is if your logo uses a different font to your signature. In terms of font sizes, you shouldn’t have more than 2-3 different sizes throughout your whole signature.
4. Use Colors Which Reflect Your BrandLike fonts, keep your selection to around 2-3 different colors. Any more and you risk creating that “rainbow email signature”. It’s important that the colors match your logo as much as possible. Otherwise, your logo can look misplaced, or your signature could have that “template” look which you don’t want.
5. Use Beautiful ImagesIn sales-based roles (such as real estate agents) where you’re dealing directly with the public, using an image of your face can add a personal touch to your signature. If you’re not too fond of using a profile picture in your signature, you can just use your company logo. Only use good quality images which have been professionally taken. Use PNG or JPEG type images for maximum compatibility and always ensure you compress them using a tool like TinyPNG. PNG’s work best for logos and when you need transparency in your images. JPEG’s are best for profile pictures where the color quality needs to be perfect. Avoid using GIF animations (more on this later).
6. Tweak the SpacingBehind every great looking email signature is consistent spacing. If you’ve got 10 pixels of spacing above the contact information, then you should have the same spacing under the contact information too. The same goes for all sections of the signature. Consistent spacing makes the signature look professional and clean, even at a quick glance. It also makes it easier to spot information that you’re trying to find.
7. Keep an Eye on SizeWith email signatures, there’s 2 sizes to check. The size in pixels, and the size in kilobytes (KB).
Size in PixelsThe size in pixels determines visually how big your signature is, and whether it will fit mobile screens. Keep in mind that narrower signatures look better on mobiles because of screen sizes and scaling. For desktops and larger screen sizes that don’t use scaling, the recommended maximum email signature size is 700(w) x 300(h) pixels. For mobile phones which have smaller screens that use scaling, the recommended maximum email signature size is 320(w) x 600(h) pixels. Checking the size of your signature is as simple as opening your signature in a web browser like Google Chrome, right clicking on it and clicking inspect element. You should then be able to hover over the outer most table, and it should show you the height and width of the signature.
Size in KBThe size in KB is the amount of disk space the email signature will take up when it’s stored on a mail server. If you send roughly 30 emails a day, your email signature will be stored 30 times on your server, which can take up valuable space in the long run. And that’s only with you sending emails. If you have multiple staff sending emails, it can add up very quickly. You should aim to keep your email signature under 50KB in size. There generally isn’t a need to have an email signature that is any larger (even if you have a promotional banner).
8. Test Your Email Signature for CompatibilityRemember earlier we touched on the subject of email signature compatibility? To ensure your signature looks the same in all email clients, you must cross test it between all the popular email clients. Just because your signature looks perfect in Outlook, doesn’t mean it will look perfect in Gmail.
- This is an example of how cross testing should be done:
- Sending from Outlook 2013 to Gmail
- Sending from Outlook 2016 to Gmail
- Sending from Gmail to Outlook 2013
- Sending from Gmail to Outlook 2016
9. Things You Shouldn’t Do
Don’t make your whole email signature an imageIf you’re considering making a fancy email signature, but you can’t do it using HTML + CSS, then either change the design so it can be coded, or don’t do it at all. Whatever you do, don’t make your whole email signature an image, as the size (in KB) is usually large and your recipients won’t be able to copy your phone number or other details out of it. Basically, it screams “I care more about looks, than I do about functionality”. Also, you can’t do split testing on things like CTA buttons, and you can’t easily make changes to the signatures.
Don’t Over Complicate the DesignA simple design goes a long way. Don’t think of your signature as needing to cram as much information into it as possible. Simple designs are easier to code, and also have a much higher chance of looking consistent across all mail clients.
Don’t Insert GIF AnimationsAnimations are fun to look at, but most of the time they don’t work with email signatures. In addition to possibly being perceived as immature, animations don’t always technically work with email clients. Some email clients convert GIF animations to still images. So, if you have an animation of your head moving around, your recipient might see a still image of the side of your head…not a good look.
Don’t Use Inspirational QuotesThere isn’t enough room for them, and the idea is to keep your email signature clean and clutter free. Avoid using quotes in email signatures, unless it’s something like a CEO quote that enhances the brand image.
ConclusionCreating an email signature is quite straight forward as long as you keep these tips in mind. Hopefully, now you should be fully equipped to make a really great looking email signature that will be compatible and at the same time have all the features you want. Featured image via DepositPhotos.
Gordan Banjac is the co-founder of Gimm.io, an email signature development platform. With extensive experience in Web Design and IT Managed Services, Gordan has dedicated the last six years to learning as much as possible about email signatures. When not working, he is usually traveling with his family along the southwest region of Australia.