Email Love is supported by

Animated GIFs have come a long way since the dancing banana days of the early internet. Today, they’re a sophisticated, versatile medium that can significantly boost engagement in email campaigns. From showcasing products to explaining complex concepts, GIFs offer a unique blend of visual appeal and informational value that static images simply can’t match.

But why are animated GIFs so effective in email marketing? It boils down to three key factors:

1. Attention-grabbing: In a world where the average person receives 121 emails per day, standing out is crucial. The subtle motion of a well-crafted GIF can catch the eye and entice the reader to engage with your content.
2. Increased Information Density: GIFs allow you to convey more information in a compact space. A single GIF can showcase multiple product views, demonstrate a process, or tell a short story – all without the need for video plugins or lengthy explanations.
3. Improved User Experience: When used thoughtfully, GIFs can make your emails more enjoyable and easier to consume. They can guide the reader’s attention, illustrate points more clearly than text alone, and add a touch of personality to your brand communication.

The journey of GIFs in email marketing is a testament to their enduring appeal. From their inception in the late 1980s to their resurgence in the social media age, GIFs have proven their adaptability and staying power. Today, they’re not just a nice-to-have in your email marketing toolkit – they’re a must-have for anyone looking to create truly engaging email content.

In this guide, we’ll explore the various types of animated GIFs you can use in your emails, dive into best practices for creating them, and tackle the technical considerations to ensure your GIFs look great for every subscriber. Whether you’re a seasoned email marketer looking to refine your GIF game or a designer dipping your toes into the world of email animation, this article will equip you with the knowledge to master the art of animated GIFs in email.

So, are you ready to add some motion to your marketing? Let’s dive in!

Types of Animated GIFs for Email Marketing

Now that we’ve established why animated GIFs are so powerful in email marketing let’s explore the various types you can use to enhance your campaigns. Each type serves a unique purpose and can be strategically employed to achieve different marketing goals.

Product Showcases

Product showcase GIFs are a game-changer for e-commerce emails. They allow you to display multiple angles or features of a product in a single, compact animation. I once created a GIF for a client’s new smartwatch that cycled through its various functions – from displaying the time to showing heart rate and step count. The result? A 25% increase in click-through rates compared to emails with static images.

Unit 1 showcases their product colors.

Cinemagraphs

Cinemagraphs are like the sophisticated cousin of the standard GIF. They’re mostly still images with a small element of repeated movement. Think of a steaming cup of coffee where only the steam moves or a bustling city scene where only a single taxi is in motion. These subtle animations can create a mesmerizing effect that draws the eye without being overwhelming.

We love this subtle yet eye-catching example from Bespoke Post.

Lately, we have also seen cinemagraphs used to showcase how products work in more elaborate videos that are converted into gifs. This example from Ogee is a good example of this.

Countdown Timers

Nothing creates urgency quite like a ticking clock. Countdown timer GIFs are perfect for sale announcements, event reminders, or limited-time offers.  Just be sure to use them sparingly to maintain their impact.

Jameson Whiskey used a timer to drive excitement for their St Pat’s Day promotion.

Step-by-Step Tutorials

Why tell when you can show? Tutorial GIFs can quickly demonstrate how to use a product or feature. This is particularly useful for businesses with complex or hard-to-understand products or services. One of our favorite examples of this type of GIF is from Veer, who shows subscribers how simple and easy it is to fold their wagons.

Order Status Animations

Transactional emails are normally boring and devoid of any animation. That’s why I was surprised and impressed with this order status email from Crate & Barrel, which shows customers the status of their package in a fun and engaging way. Not only is this fun, but it’s also super useful for the recipient! More of this in transactional emails, please.

Animated Text

Make your message pop with animated text. This could be a word-by-word reveal of a key phrase or a simple highlight effect on important terms. Just be careful not to overdo it – you want to enhance your message, not distract from it.

United Sodas of America nailed this type of animation in their visually appealing welcome email.

Brand Mascots

If your brand has a mascot or character, bringing it to life with animation can add charm and personality to your emails. We love the subtle character animation in this Dreamforce announcement email.

Remember, the key to using these GIF types effectively is to choose the one that best serves your message and campaign goals. In the next section, we’ll dive into best practices for creating these GIFs to ensure they’re not just eye-catching, but also effective and accessible.

Mastering Animated GIFs in Email: A Guide for Marketers and Designers

Best Practices for Creating Effective Animated GIFs

Now that we’ve explored the various types of GIFs you can use in your email marketing, let’s dive into how to create them effectively. These best practices will help ensure your GIFs not only look great but also perform well across different email clients and devices.

File Size Optimization

One of the biggest challenges I faced when I first started using GIFs in emails was managing file size. Large GIFs can slow down email load times, potentially frustrating your recipients or even preventing your email from displaying properly.

Here are some tips to keep your GIFs lean:

1. Limit the number of frames: Often, you can convey your message with fewer frames than you think. I once reduced a 50-frame GIF to 15 frames without losing its impact.
2. Reduce the color palette: Using fewer colors can significantly decrease file size. For many GIFs, 64 colors are plenty.
3. Crop unnecessary space: Only animate the parts of the image that need to move.
4. Use a tool like EZGif or Gifsicle to optimize your GIFs further.

Aim to keep your GIFs under 1MB, with 500KB or less being ideal.

Frame Rate Considerations

The frame rate of your GIF can impact both its file size and how smooth the animation appears. I’ve found that for most email GIFs, a frame rate between 10 and 15 frames per second (fps) works well. This provides smooth motion without unnecessarily inflating the file size.

Color Palette Selection

When it comes to colors in your GIFs, less is often more. Not only does a limited color palette reduce file size, but it can also create a more cohesive and professional look. Consider your brand colors and the overall design of your email when selecting your palette.

A pro tip I learned the hard way: avoid using the color white as transparent in your GIFs. Some email clients (looking at you, Outlook) don’t handle this well and may display a white background instead of transparency.

Accessibility and Alt Text

Accessibility should always be a priority in your email design. Not all of your recipients will be able to see your GIFs, whether due to visual impairments or email client settings. Here’s how to ensure your message gets across to everyone:

1. Always include descriptive alt text for your GIFs. This text should concisely convey the content and purpose of the GIF.
2. Ensure that any critical information conveyed in the GIF is also present in the email’s text.
3. Consider providing a link to a static version of the information for those who can’t view the GIF.

Balancing Animation with Static Content

While GIFs can be attention-grabbing, too much animation can be distracting or even annoying. Strike a balance between animated and static content in your emails. I usually stick to one or two GIFs per email, strategically placed to enhance the message without overwhelming it.

Also, consider the first frame of your GIF carefully. This is what recipients will see if the GIF doesn’t auto-play, so it should be able to stand alone as a static image if necessary.

Remember, the goal of using GIFs in your emails is to enhance your message and increase engagement, not to show off your animation skills. Always ask yourself: Does this GIF serve the purpose of the email and improve the user experience?

In the next section, we’ll tackle some technical considerations to ensure your beautifully crafted GIFs display correctly across different email clients and devices.

Technical Considerations

Creating a great GIF is only half the battle. Ensuring it displays correctly across various email clients and devices is equally crucial. In this section, we’ll dive into the technical considerations that will help your GIFs shine, no matter where they’re viewed.

Email Client Compatibility

If there’s one thing I’ve learned in my years of email marketing, it’s that not all email clients are created equal when it comes to displaying GIFs. Here’s a breakdown of how major email clients handle animated GIFs:

1. Gmail, Apple Mail, and most mobile email apps: These clients fully support animated GIFs. Your animations should play without a hitch here.
2. Outlook 2007-2019: Here’s where it gets tricky. These versions of Outlook only display the first frame of a GIF. I learned this the hard way when I sent an email with a GIF whose first frame was blank – oops!
3. Outlook.com and Office 365: These web-based versions of Outlook do support animated GIFs.
4. Older email clients: Some older or less common email clients might not support GIFs at all.

Given this variety, it’s crucial to design your GIFs with a fallback strategy in mind.

Fallback Images for Non-Supporting Clients

Remember that Outlook quirk I mentioned? Here’s how to turn it into an advantage:

1. Design with the first frame in mind: Ensure the first frame of your GIF can stand alone as a static image. Include key information or a call-to-action here.
2. Use progressive enhancement: Start with essential information in the first frame, then add extra details or flourishes in subsequent frames.
3. Test, test, test: Always preview your emails in various clients to ensure they look good whether the GIF animates or not.

Responsive Design for Mobile Devices

With over 50% of emails now opened on mobile devices, optimizing your GIFs for small screens is non-negotiable. Here are some tips I swear by:

1. Keep it simple: Complex animations can be hard to follow on a small screen. Stick to clear, straightforward movements.
2. Size matters: Design your GIFs to be easily viewable on mobile. I usually aim for a maximum width of 600 pixels.
3. Use media queries: These allow you to serve different sized GIFs based on the screen size of the device.
4. Mind the file size: Mobile users may have slower internet connections. Keeping your GIFs small ensures they load quickly.

Testing Across Different Platforms

I can’t stress this enough: always test your emails before sending them out to your entire list. Here’s my testing checklist:

1. Use email testing tools: Services like Litmus or Email on Acid allow you to preview your email across multiple clients and devices.
2. Send test emails to yourself: View them on different devices and in different email clients.
3. Check loading times: Ensure your GIFs don’t significantly slow down the loading of your email.
4. Verify fallback images: Make sure your email still makes sense in clients that don’t support animation.
5. Test with images turned off: Some users have images disabled by default. Make sure your alt text is descriptive and your email still conveys its message without images.

Remember, the goal is to ensure that every recipient has a good experience with your email, regardless of how they’re viewing it. A little extra time spent on testing can save you from potential mishaps and ensure your animated GIFs are enhancing your emails, not detracting from them.

In our final section, we’ll wrap up with some key takeaways and encouragement to start experimenting with animated GIFs in your own email campaigns.

Conclusion

We’ve covered a lot of ground, from the various types of GIFs you can use to enliven your emails to the nitty-gritty technical details of making sure they work across different platforms. Here are the key takeaways:

1. Animated GIFs are powerful tools for grabbing attention, conveying information, and boosting engagement in your email campaigns.
2. There’s a wide variety of GIF types to choose from, each serving different purposes – from showcasing products to creating urgency with countdown timers.
3. Creating effective GIFs involves balancing file size, frame rate, and color palette to ensure optimal performance.
4. Accessibility should always be a priority, with descriptive alt text and fallback strategies for non-supporting email clients.
5. Technical considerations, like email client compatibility and responsive design for mobile, are crucial for ensuring your GIFs shine across all platforms.

Start small. Maybe try a simple animated CTA button in your next newsletter. Or create a before-and-after GIF for a product you’re promoting. Each experiment will teach you something new and help you refine your skills.

Remember, not every GIF needs to be a masterpiece. What matters is that it serves your message and resonates with your audience. Some of the most effective GIFs I’ve created have been simple, even a bit quirky – but they connected with our subscribers and drove real results.

Much love,
Andy

Email: [email protected]
Twitter: @emaillove