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
20 Best New Websites, April 2024
Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…
Exciting New Tools for Designers, April 2024
Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…
14 Top UX Tools for Designers in 2024
User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…
By Simon Sterne
What Negative Effects Does a Bad Website Design Have On My Business?
Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…
10+ Best Resources & Tools for Web Designers (2024 update)
Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…
By WDD Staff
3 Essential Design Trends, April 2024
Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…
How to Plan Your First Successful Website
Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…
By Simon Sterne
15 Best New Fonts, March 2024
Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…
By Ben Moss
LimeWire Developer APIs Herald a New Era of AI Integration
Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…
By WDD Staff
20 Best New Websites, March 2024
Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…
Exciting New Tools for Designers, March 2024
The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…
Web Tech Trends to Watch in 2024 and Beyond
It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…
By Louise North