1. Create Your Signature with Mobile in Mind
It’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 Details
The 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
- Company
- 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 Fonts
A 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 Brand
Like 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 Images
In 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 Spacing
Behind 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 Size
With email signatures, there’s 2 sizes to check. The size in pixels, and the size in kilobytes (KB).Size in Pixels
The 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 KB
The 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 Compatibility
Remember 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 image
If 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 Design
A 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 Animations
Animations 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 Quotes
There 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.Conclusion
Creating 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
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.
Read Next
3 Essential Design Trends, November 2024
Touchable texture, distinct grids, and two-column designs are some of the most trending website design elements of…
20 Best New Websites, October 2024
Something we’re seeing more and more of is the ‘customizable’ site. Most often, this means a button to swap between…
Exciting New Tools for Designers, October 2024
We’ve got goodies for designers, developers, SEO-ers, content managers, and those of you who wear multiple hats. And,…
15 Best New Fonts, September 2024
Welcome to our roundup of the best new fonts we’ve found on the web in the previous four weeks. In this month’s edition…
By Simon Sterne
3 Essential Design Trends, October 2024
This article is brought to you by Constantino, a renowned company offering premium and affordable website design
You…
A Beginner’s Guide to Using BlueSky for Business Success
In today’s fast-paced digital world, businesses are always on the lookout for new ways to connect with their audience.…
By Louise North
The Importance of Title Tags: Tips and Tricks to Optimize for SEO
When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user…
By Simon Sterne
20 Best New Websites, September 2024
We have a mixed bag for you with both minimalist and maximalist designs, and single pagers alongside much bigger, but…
Exciting New Tools for Designers, September 2024
This time around we are aiming to simplify life, with some light and fast analytics, an all-in-one productivity…
3 Essential Design Trends, September 2024
September's web design trends have a fun, fall feeling ... and we love it. See what's trending in website design this…
Crafting Personalized Experiences with AI
Picture this: You open Netflix, and it’s like the platform just knows what you’re in the mood for. Or maybe you’re…
By Simon Sterne
15 Best New Fonts, August 2024
Welcome to August’s roundup of the best fonts we’ve found over the last few weeks. 2024’s trend for flowing curves and…
By Ben Moss