Inspiration: Jack Spade’s Animated GIF Grabs Readers’ Attention
When I saw Jack Spade’s email I was majorly impressed — it had one of the biggest animated GIFs in an email that I’ve ever seen! It immediately caught my attention & I watched the entire GIF play through, over and over again.
The Animated GIF in Action
The animated GIF in Jack Spade’s email is such a breath of fresh air from the typical text and image-based emails I receive each day (obviously, there are numerous exceptions — see the “Additional Resources” section at the bottom of this post for other examples of animated GIFs in emails). It really stood out in my cluttered inbox and made me take a closer look at the email — which was (obviously) their intention!
And the best part about animated GIFs? While video and CSS3 animation have mixed support across email clients, animated GIFs are supported in basically all of the major email clients! Here is a chart of animated GIF support from our friends at Campaign Monitor:
Since only the first frame of the animated GIF is displayed in Outlook 2007, Outlook 2010, Outlook 2013, and Windows Mobile 7, it is important that the first frame includes important information and is not just a blank image. Jack Spade does it right — the first frame includes the main call to action and an image. You can see the email rendered in Outlook 2010 below:
I’m a big fan of the preheader in this email, “If you don’t like the weather…wait 5 minutes (and bring layers). Shop Now.”
Since some email clients (Gmail, Outlook, iPhone, Windows Mobile 7) will display a portion of your preheader text as “preview” or “snippet” text, it’s important to use these few lines of text to your advantage. Readers only spend about 3-4 seconds deciding whether they are going to open & read your email, so the snippet text of the preheader is a perfect place to get your subscribers’ attention, sum up your email and include the call to action.
The preheader text in Jack Spade’s email is very relevant to the season that we are currently in since the weather is changing from warm to cold and it’s frequently warm during the day and cold at night — so dressing in layers would make sense! Jack Spade’s use of relevant content in the preheader would definitely attract readers’ attention and get them to open the email (it worked on me!) The main call to action, “Shop Now,” is also included in the preheader which is a major positive.
Since most email clients block images by default, ALT text can help communicate the message even if images are not there. Jack Spade uses ALT text successfully in this email so that readers can have an idea of what the email is — regardless of whether images are present or not. However, I’d advocate for making the ALT text unique from other parts of the email, so that it is not the same as the preheader, “If you don’t like the weather, wait 5 minutes and bring layers. Shop now.” I recommend either changing the preheader or the ALT text of the call to action so that they are differentiated.
While they use ALT text to their advantage, the email could have been even greater had they used styled ALT text. While styled ALT text isn’t supported in every email client, it is supported in almost all of the major mobile and webmail clients, and it would add an extra unique touch to the email. With styled ALT text, Jack Spade could have made the call to action more prominent when images are disabled.
In addition, Jack Spade should have used more of a text to image ratio so that the email is not, essentially, entirely blank when images are off. They could have done this by removing the call to action, “If you don’t like the weather…wait 5 minutes (and bring layers) Shop now,” from the animated GIF and making it live text instead. If they did this, that text would have appeared regardless of whether images were disabled or not.
What do you think of Jack Spade’s animated GIF? Have you seen any great examples of animated GIFs lately? We’d love to see them!
- Check out which email clients support animated GIFs in this great post by Campaign Monitor.
- How to animate a GIF inside of Photoshop CS4 and CS5.
- Learn how to use the new timeline in Photoshop CS6 to create an animated GIF from video.
- Check out our Interactive Testing launch email which included an animated GIF and was featured on Indiemark.com.
- For some great examples of animated GIFs in emails, check out these emails from American Apparel and Sephora. In addition, Responsys’ Retail Email Blog has a whole slew of examples.
Submit your emails to be featured!
Do you have an email that you’d like us to feature in our inspiration series? Send it to us at firstname.lastname@example.org!