What is an Animated Email Signature
An animated email signature is a GIF-animated version of a regular static email signature that you use in your emails. It can be used to add some personality and flair to all your outbound emails, or to create awareness of important campaigns and events. Animated signatures are designed to encourage interaction from the recipient, such as clicking a link or engaging with content.
Benefits of using an animated signature
Animated email signatures are a great way to stand out in the inbox! They draw attention to your emails and create a more dynamic relationship between you and the recipient. It also gives readers something interesting to look at while they’re reading your message or considering the content of your email. Animated signatures can also be used to showcase branded campaigns and motivate people to take action on them.
Animation interactivity
A common misconception, especially if you are using GIF format, is that your animation can include links to all the different content areas of your business (social media, homepages, etc.). A GIF can only have a single link connected to it, and therefore cannot be used to link out to multiple sources.
This can get tricky if you are integrating with marketing analytics, conversion tracking and more. If you are looking to incorporate multiple interactive features into your animation, you could consider using HTML5 or a more robust format that supports multiple click-throughs.
how to create an animated email signature
If you’re not design savvy and don’t want to take the time to learn how to create animated email signatures from scratch, there are several tools available for you to use. For example, tools like Hubspot offer simple templates and drag-and-drop features that make it easy to customize your signature in a matter of minutes.
The largest component, because you’re on this particular page, is going to be the animation side of things. Likely GIF format is going to be your solution so it’s just a matter of creating the GIF.
design
When creating the design for your email signature, whether you do it yourself or hire a designer, keep in mind the size of the image and potential file size. The average maximum width for an email signature is 600px, with a height between 250 and 400px. Too many pixels can cause issues when viewed on different browsers or devices. Additionally, it’s important to keep your file size below 1MB or else some email clients may not render your signature correctly.
troubleshooting play options
If your GIF animation is not playing in the email footer, it’s likely because the animation is too heavy or complex for the email client to render properly. Try reducing your frame rate and cycle length, as well as making sure there are no large-scale gradients or other intense graphics in the GIF itself.
considerations
Before you can even get to creating a GIF, there are many GIF creation services out there, you will need to determine what part or parts of the signature you want animated. Do you want your name animated? An icon or logo to embed? Deciding on this will help you to better determine whether or not it’s in your wheelhouse to create the GIF or hire a designer.
Example: Thank You GIF
A common GIF signature is often the ‘thank you’ GIF. This generally consists of a simple animation with text that reads ‘thank you’. This type of GIF signature is a great way to add some personality and show appreciation for the recipient.
This can be used in multiple situations such as after someone purchases from you or subscribes to your newsletter.
types of animated email signatures
A common GIF signature is often the ‘thank you’ GIF. This generally consists of a simple animation with text that reads ‘thank you’. This type of GIF signature is a great way to add some personality and show appreciation for the recipient.
This can be used in multiple situations such as after someone purchases from you or subscribes to your newsletter.
email Logo Signatures
Corporate email signatures can either be a static image, (perhaps JPG or PNG) but also and incorporate animated logo styles. These go leaps and bounds beyond the “average” email footer. Even a simple bounce or fade effect can be eye catching for any type of business.
Typically, what I’ve seen is a minimal logo animation or branded GIF colors to match that of the company brand guide. These can even be created into logo animations such as the one below.
Here’s an example logo signature GIF and associated instructions on how to embed within your GMAIL. If you don’t have gmail, the process is relatively the same for most email clients but I would recommend double checking to ensure they do support GIF format.
(video instructions – how to embed)
email Icon Signatures
Icon GIFs are a common way to add some animation to your signature without going too far (remember, too much movement can be too distracting). This can range from a simple icon that ‘bounces’ in or out of the email, to multiple icons with various animations looping together. Icon GIFs are great because they don’t require the full signature to be animated, you can easily drag and drop a single icon into a 2 column footer layout.
how to install an animated signature
In this example, I will use gmail but the process is almost exactly the same for Outlook and other web mail providers.
step 1. Open your mail settings
Navigate to the top right section of your gmail (when opened to the default page). Click on the gears icon. Then navigate within the dropdown to settings.
By default the settings screen brings you to the ‘General Tab’ – this is exactly where you want to be. Next add in your signature text (if applicable), such as name and email.
Step 2. Drag and drop GIF
Once uploaded, you’ll also be able to drag and reorder the GIF animation either below, above or to the side of the text that you already have. You also have the option to resize the GIF if needed. Personally, I like to use the small size as I don’t want it to be overwhelming in the signature. Just a minimal movement that catches the eye. Make sure to save your settings (save’ button found at the bottom of the page) and you’re good to go!
Step 3. Resize & Reordering GIF
With the settings general tab (opened by default when you click on the Gmail Settings gear), Scroll down until you see the “signature section” (seen in the screenshot below).
Next, click the icon of the mountain picture, media upload. From here a popup will appear on your computer and you will be able to select the GIF animation that you’ve created or already have. Click upload and ‘ok’ once you’ve found the file on your local hard drive.
Voila! You’ve now inserted your GIF animation. Now let’s resize it to fit with the rest of your text.
Email Signature further considerations
Here’s a list of some of the top factors to consider when embedding and preparing your email signature.
Dimensions & Size
When creating your animated signature, most likely you will want a smaller size. GIFs and other animations that have a larger file size will not load quickly and could even stall out and you’ll be left with a blank space. The bouncing circles GIF from above was created in a rectangular format, 200 x 100 pixels (length x height). I even scaled it down a bit smaller when importing into my email signature.
Colors
Remember, a GIF is just a memory card so the more colors, action and animation steps you add into the file the larger the file size will grow. That being said, you don’t need to limit yourself to one color. I would recommend somewhere between 2-4 colors to keep things simple. You’ll also need to take into account the background color, typically white or black is a good fit. Consider whether you and your users will be using ‘light’ or ‘dark mode’ for their interface.
GIF Background
A common misconception is that GIFs can support transparent backgrounds. While GIFs can be exported with a transparent background, they do a terrible job with this, especially when used with animation. The edges of your colors will actually start to blend together with the “transparency” layer and the output will look sloppy.
This is why I recommend choosing one solid color for your background color, typically white or black to match email inboxes. Of course you can also use any brand colors you may like.
Speed
The speed of your GIF is important to keep in mind as it could seem too fast or slow for the context of your signature. Too slow and your GIF could increase in total file size, however, too fast and it will lose its subtle impact.
Typically, 3-5 seconds of animation before looping with ensure both a small file size and allow for distraction free email signatures (i.e. not too many bells and whistles, it’s just an email signature of course).
personal vs. business
It’s your email signature so make it what you like! The other consideration here is whether or not you have corporate guidelines to follow. Typically, personal emails can allow for an extra “flair” or splash of animation whereas corporate signatures are a bit more formal by nature.