GiantUser Design Principles
Overview
While the web and html has evolved tremendously in the past decade, email programs only support a minimal subset of the possibilities of modern html. Even with these limitations, a well designed and impactful signature is very possible. GiantUser has been making signatures a long time and knows how to perfectly use the supported HTML elements to make your signature the best is can possibly be.
The 3 Essential Signature Elements
Arguably, there are 3 essential questions that an email signature should answer:
Who are you?
Of the the essential elements, this is perhaps the most important element. Since the beginning of communication itself, people have been signing documents and correspondance with their names. This is usually a name of an individual (you) but can also be a team or company name and, per definition, is the only required signature element.
What do you do?
If the recipient of your email does not know you, this is perhaps the first question they will ask themselves. Is the sender a mail-room clerk, or the company president? With the answer to this question contained in your signature, it helps the recipient determine the importance of the email, and put it's content into context.
Where do you work?
For personal emails this is not as important, but for business emails it is essential. Most companies like to add a logo to their signatures, but it is not enough for recipients who may not know anything about the company. Having the company name as part of the signature allows the recipient to know for sure where it is coming from, and helps them to associate your logo with a company name.
Optimize for Mobile
Recent analytic reports show a massive increase in the percentage of emails being openend on mobile devices. As of January 2015, over half (53%) of emails are opened on mobile devices, up from about half that only 5 years ago. All signs point to an even higher percentage of emails being read on mobile devices as time goes on. Giant user designs great signatures that are optimized for mobile, yet also look great on desktop computers.
Signature Optimizations for Mobile Devices
Here are some of the GiantUser mobile optimization techniques:
Signature Width
Modern mobile devices usually have a default width of 640 pixels. Some older devices have 320 pixels or even smaller. All GiantUser signatures are designed to be smaller that 640 pixels wide unless a long signature is requested. One of 2 things happen if a longer signature is displayed on a mobile device:
- Part of the signature appears off screen
- The signature is shrunk so it fits on-screen
Both of these possibilities can potentially destroy the intended effect of the signature design you have paid for. Keeping it under 640 pixels wide solves this problem.
Use Fewer Images
Images can help make your signature look great, but often they are very slow to load on mobile devices. First impressions are everything and if the recipient of your email only sees a partially downloaded email signature, it can lead to a bad first impression. This is described in more detail in the Images section.
Make Everything Linkable
Mobile device users like to tap on things. If it makes sense for an element to be linked in your signature, we will make it a tappable link. Some examples:
- Numbers
- Phone numbers will open the phone and place a call to the number.
- Locations
- Addresses and other location elements will be linked to a map page.
- Websites
- All websites will link to their respective targets.
- Logos
- Logos are usually linked to a company website.
Even though most elements of the signature are links, they will never have blue text, underlines or other uncontrolled elements that will ruin your signature design.
Use Images Wisely
When going from having no signature to an HTML signature, the first impulse by many is to add a bunch of images into the design. GiantUser designs signatures to use, at most, a single image unless directed otherwise.
Problems with Multiple Images
There are several problems that arise with using multiple images. GiantUser solves these problems using the following principles:
Blocked Images
Many email programs block images from unknown senders by default. Recent studies show that 43% of Gmail users read email without turning images on. When this happens, a blank box or a red "X" is usually displayed. If your signature is heavily image dependent, it can look horrible and ruin your design. There is currently no way to "force" an email recipient to display images or override their default image settings.
GiantUser signatures are designed so it minimizes the damage caused by this blocked-image problem. We usually use only 1 image, usually a logo or profile photo. This image is placed in the layout in a spot where it will not ruin the rest of the design if blocked by the recipient. If it is a company logo, we make sure to also put the company name somewhere in the signature.
Images Download Slowly
Nearly 50% of all emails are opened on mobile devices (see Mobile). Including multiple images in your signature means that those images have to be downloaded when the recipient first opens the email. If the recipient is not in an are of good connectivity, or is offline, the images could potentially not be downloaded by the time the recipient views the signature. Using multiple images greatly increases the probability that this will happen.
GiantUser optimizes your provided images to make the filesize as small as possible. The allows the signature images to download faster than unoptimized images.
Images Can Detract From The Essentials
The human eye is conditioned to recognize images before text. When signatures contain multiple images, it draws the viewer's eye to all of them instead of the more important elements of the signature:
- Who you are.
- What you do.
- Where you work.
If you want to make a better impression on the recipient, and you want them to have a better chance in remembering the three essential elements, using fewer images is the best place to start.
Build Your Brand
Including social media icons is something that is requested frequently at GiantUser, but we highly recommend against them. The human brain is excellent at recognizing patterns, and recognizing familiar images that it has seen in the past. The social media icons are all over the place, and are very familiar to recipients. This causes their eye to be drawn to the icons more than anything else.
Because the eye is drawn to the social media icons, the recipient associates your name and other details more with these companies, and less with your own. Why help these billion dollar companies build their brand recognition when you really want to be building brand recognition around yours? Including only images that pertain to your brand will go a long way in associating your name and company with your logo. Because of this, social media links should be in textual form in your signature design.
Use Common Fonts
You want your signature to use a special font, "Unicorn Bold". You implement it and it looks great on your machine, but when you send it to somebody, it shows up in "Times New Roman". This is because fonts have to be installed on the recipients computer to be used. If the font is not found, the system default is used. On Windows this is Times New Roman and on Macs it is Helvetica.
Signature Font Optimiztions
GiantUser signatures are designed to look the same on any computer. This is achieved by using fonts for the signature that are installed on almost every computer by default. The chance that your recipient doesn't have the font installed is very, very slim. A great list of common fonts along with installation percentages can be found at Css Font Stack. We usually recommend the following:
- Sans-Serif
- For sans-serif fonts, we usually recommend Arial, Lucida Grande, Trebuchet, and Verdana.
- Serif
- For serif fonts, we usually recommend Georgia and Palatino.
- Monospace
- For monospace fonts, we usually recommend Courier.
Signature Content
Previous ways of doing signatures was just to put every piece of contact information you have in there, like a letter-head. GiantUser believes that this is detrimental to the overall goal of your signature: Say who you are, what you do and who you work for.
Keep it Simple
GiantUser signatures are designed to be streamlined, modern, simple yet effective. We often remove extraneous elements from the signature design. Here is why:
The Path of Communication Has Been Chosen
All of the contact information is nice to have as a reference, but the person you are corresponding with over email has already chosen a path of communication over email. They probably won't need to see your phone number, street address and so on every email they send back and forth.
Some Elements Go Mostly Unused
When is the last time you faxed something to someone from a number you found int he email signature. 99% of the time, the fax number and street adress go unused. Why clutter up your signature design for the 99% of your recipients who will never use this type of contact element? This information can be provided by you of asked, or linked to on your website, but should rarely be included in your signature design.
Email Lengths are Shorter on Average
In the past, emails were used as a paper letter alternative. In present times, emails are mostly used for shorter communications, leading to shorter length emails instead of longer content lengths. If you have a signature that is heavy in terms of content, it can outweigh the email message itself. On long email chains, the last thing you want is for your signature to be the only thing they see.
Legal Disclaimers
These have become commonplace especially in the business world despite not being legally binding and potentially ruining an otherwise great signature design. It is time to shine light on the usefulness of the disclaimer.
They Are Not Legally Binding
They are mostly not legally binding and unenforceable except for a very few select instances. We are not lawyers here, so perhaps some of these companies can explain it a little better than we can.
They Ruin Good Design
A good signature design is simple and effective at conveying the 3 Essential Elements. Any additional information potentially detracts from the overall design by drawing the recipient's eye away from the elements you are trying to get them to see the most. Including a giant wall of legal text will only increase the chance that the recipient will gloss over your design, even if the disclaimer is made small and light in color.
Legal disclaimers don't work well with mobile devices. With limited screen sizes, taking up a good chunk of your signature canvas to display a disclaimer which may be pointless seems like a bad idea.