How to use email GIFs in newsletters and signatures
:quality(75))
Many marketing blogs will tell you that there's a best practice for designing animated GIFs for email.
Don't use too many GIFs, don't make the movements too fast, don't use too many colors, etc.
We don't think any of the rules apply across the board.
Brands that use GIFs cleverly in their email campaigns win because they break the rules and make their customers sit up and take notice.
This is especially true in promotional emails like sales newsletters, discount offers, and product drops.
This post is a pocket guide for using animated images in email marketing campaigns. We'll look at how a few brands have cracked the secret of using email GIFs and also provide some tips to make this file format work for your brand.
:quality(75))
Design with Linearity Curve and animate with Linearity Move
Get our softwareWhat was GIF originally invented for?
The GIF file type was invented in 1987 to compress images with limited colors and simple animations. The original intent was to make detailed, color images easier to share and view on the Internet.
These features make GIFs perfect for sharing over email, which often has a limit on file size.
The first GIF ever created by its inventor, Stephen Wilhite, was an illustration of an airplane. It showcased the pixel detail that the file format could contain and compress. Because this new file type was easy to use, it soon became ubiquitous.
:quality(75))
Image source: Know your meme
Brands that use GIFs successfully in their email marketing
Dell
:quality(75))
Image source: Marketing Sherpa
One of the first highly successful email campaigns that used GIFs was part of Dell's launch of the XPS 12 Convertible Ultrabook in 2014.
More than a decade ago—when GIFs had already made a comeback in social media and personal blogs—Dell's marketing team looked for a way to attract customers to their new flipbook-style laptop.
At that time, convertible laptop–tablet devices weren't well-known and the brand needed to convince customers of the XPS 12's usefulness and desirability.
Dell's promotional email campaign featured a high-quality animation showing how easily the laptop could be converted into a tablet by swiveling the screen around.
This 4-second compressed animation led to a 103% increase in conversion rate and a 109% increase in revenue.
Cotton On
Sprouting from humble beach-bum beginnings, Australian fashion label Cotton On is now a beloved international brand.
GIFs take center stage in Cotton On's promotional emails. Instead of including only one static image or a collage of images, an animated GIF lets the reader see multiple shots in a sequence.
If one or more fashion photos catch the reader's attention, they'll likely click to view the online shop. In this way, email GIFs are a handy tool for showcasing products.
They entice the reader to make a purchase online or visit their nearest brick-and-mortar store.
Consider using GIFs in your email signature designs to make them more engaging.
Notion
The popular web-based wiki creation tool Notion sends occasional newsletters to its users from its CEO and founder, Ivan Zhao.
When you get an email from "Ivan at Notion," it usually contains helpful information and product updates for its users.
Notion uses animated GIFs sparingly in its mails, which help illustrate how features or updates work. This gives the receiver a quick view of the change and how to access it.
Because product-related updates can sometimes be complex to explain in words, GIFs are perfect for quick visual tutorials.
Discovery
A South African-founded insurance group, Discovery uses GIFs in its customer communications to increase engagement.
In this example, we see how Discovery emails customers after an interaction to inform them about support features available on its website.
The animated GIF illustrates these features in an app-style rotating carousel. It shows how a simple GIF can inform and educate customers about additional benefits they may not be aware of. It also encourages customers to visit Discovery's website and access additional services.
Linearity
Yep, we also use GIFs. Recently, we launched our highly requested Figma plugin and announced it everywhere, including in our email newsletter header.
Animation helps illustrate processes, like seamlessly moving design files from Figma to Linearity Curve or Move.
We also incorporated text into the animated GIF to describe what the plugin will empower our users to do. Not only is the animation fast and eye-catching, but it also informs our readers and encourages our users to try the new feature.
With these well-known brands' examples in mind, let's look at how you can design and animate images for your company using the GIF format.
Jumpstart your creative ideas with Linearity Curve and Linearity Move- Download the Linearity suite
How to create your own branded animated GIFs
Turning your static content into animated winners is so easy with Linearity's software suite. The powerful combo of Linearity Curve for vector design plus Linearity Move for animation empowers you to make captivating GIFs.
Let's go through the steps to create your own branded animations for email.
Check out our full GIF-making tutorial for detailed steps and tips.
Step 1
Design your static graphics
Open Linearity Curve and create the branded graphics that will form the basis of your GIF animation.
If you have existing designs in Figma or Illustrator, you can easily import these into Linearity Curve and Move.
If you haven't downloaded Linearity Curve yet, get started for free below.
Jumpstart your ideas with Linearity Curve
Take your designs to the next level.
Step 2
Animate your design in Linearity Move
Linearity Move makes it super easy for anyone to create stunning animations.
You can:
- Import multiple Artboards from Curve or Figma as a storyboard to automatically create an animation with Move's Auto Animate feature.
- Open your static design in Move and use Animation Presets to quickly add dynamic motion effects.
- Switch between Design and Animate Modes in Move to create a bespoke animation using keyframes and masks.
If you haven't downloaded Linearity Move for animation, get started for free below.
:quality(75))
Step 3
Export your animation as a GIF
Preview your Linearity Move animation by clicking on the Play button above the Scene Timeline. Make any adjustments to get it just right.
When your animation is ready, go to Export in the Top Toolbar and tweak the options. You can also toggle Transparent Background on.
Make sure you choose the GIF format before clicking the Export button.
Pro tip: Optimize your images for newsletters by following our guide.
More ways to animate your campaigns
It makes sense that the simplicity and movement of animated GIFs help increase newsletter engagement.
Using email GIFs in your marketing campaigns can be a fun and effective way to engage your audience. By breaking the rules and thinking creatively, you can create eye-catching visuals to make your emails stand out in a crowded inbox.
Experiment with different types of animations and see what works best for your brand. Whether showcasing products, demonstrating features, or adding fun to your newsletters, email GIFs can help increase engagement and drive conversions.
Keep your GIF file sizes small to ensure quick loading times and compatibility with various email clients.
Test your GIFs on different devices and platforms to check that they look great everywhere.
Ready to give GIF-making a try? Get started for free with Linearity Curve and Linearity Move by signing up below. You can also check out our Pro and Org pricing for professionals.
Sharné McDonald
Contributing Writer
Sharné is a contributing writer to the Linearity Blog. She has 10+ years' experience in graphic design and marketing and holds a Master's degree in Art Education.
:quality(75))
:quality(75))
:quality(75))
:quality(75))
:quality(75))