Inspiration: Jack Spade’s Animated GIF Grabs Readers’ Attention

[ 17 By

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

Jack Spade Animated GIF

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:

Campaign Monitor Chart

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:

Jack Spade in Outlook 2010

Attention-Grabbing Preheader

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.”

Jack Spade Preview Pane in Gmail - Chrome

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.

Images Off

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.

Jack Spade Images Off

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!

Additional Resources

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 inspiration@litmus.com!

  • http://www.facebook.com/helena.jaramillo Helena G. Jaramillo

    Urban Outfitters is on a roll with GIF’s in their emails!

    • Lauren_Litmus

      Hey Helena! Thanks for your comment. I’ll have to sign up for their emails & check them out! :)

  • http://twitter.com/Travis_Listrak Travis Buck

    Neiman Marcus has been using a lot of animated GIFs as well. Great point about including your CTA in the first frame for Outlook. It’s an important thing to remember when creating the animation. I’ve seen examples where retailers have not.

    • Lauren_Litmus

      Thanks for the comment, Travis. I’ll have to check out Neiman Marcus’ emails! I have also seen a bunch of emails where retailers have not included the CTA in the first frame — in fact, I’ve even seen some that have completely blank first frames as a “fade in” technique. It’s definitely very important to include the CTA in the first frame!

  • http://twitter.com/sahoglu Loud Piksel

    700K+ for a animated gif on an email doesn’t cut it for me sorry.

    • Lauren_Litmus

      Hi Loud, thanks for your comment! While I agree with you that 767 KB is a lot, I think it’s a somewhat “old school” idea that emails with large file sizes will get you blocked or cause deliverability problems (kind of like the theory that including the word “free” in your subject line will get you in the spam folder). However, deliverability these days is more about your sending practices than the technical aspects of your email (file size, text/image ratio, etc.). With that being said, if your permission or sending practices are already poor, an email with a large file size may contribute to your woes.

      As with all things related to email, it really depends on your audience and your individual circumstances. If a company like Urban Outfitters is sending risqué subject lines, animated GIFs, and breaking untold numbers of “best practices’” (and they are), then it must be working for them. Otherwise I don’t think they would continue doing it! :)

      Thanks again for your comment!

      • Jake Daynes

        In fact – most spam filters are set up not to touch emails over a certain size. Spam Assassin in most installations is defaulted to not touch emails over 250KB.

  • http://www.facebook.com/jeffpritchard1 Jeff Pritchard

    Great post about the use of animated GIFs! The stylized ALT tag’s would’ve really helped an all-image email, but they could have used plain HTML text in a few of those instances (especially the CTA). It would help to cut down the gigantic size of the GIF as well, which can certainly hinder deliverability in some cases.

    • Lauren_Litmus

      Hey Jeff! Thanks for the comment. I agree, using live text definitely would have helped for images-off optimization & decreased the file size. Nice tip!

  • http://twitter.com/Lever10_B2B Grover Righter

    I agree with Loud Piksel. The first thing I did was look at the file size. 767 KB is too large for email.

    • Lauren_Litmus

      Hi Grover, thanks for your comment! I appreciate your feedback. I just responded to Loud’s comment about this:

      I think it’s a somewhat “old school” idea that emails with large file sizes will get you blocked or cause deliverability problems (kind of like the theory that including the word “free” in your subject line will get you in the spam folder). However, deliverability these days is more about your sending practices than the technical aspects of your email (file size, text/image ratio, etc.). With that being said, if your permission or sending practices are already poor, an email with a large file size may contribute to your woes.

      As with all things related to email, it really depends on your audience and your individual circumstances. If a company like Urban Outfitters is sending risqué subject lines, animated GIFs, and breaking untold numbers of “best practices’” (and they are), then it must be working for them. Otherwise I don’t think they would continue doing it! :)

  • Lauren_Litmus

    Thanks for the comment, Michelle! I’ll have to check them out.

  • http://twitter.com/chsweb Jono Young

    I’m starting to think that email size does not matter as much as who you send it to. Experiment by sending cool, but large (500kB+) emails to your devoted openers. We access 500kB websites and MUCH MUCH more online, and we get 2MB+ email attachments from friends and colleagues. I think it’s time to start breaking this old, worn out rule… BUT make sure you watch close and measure SPAM, open, and CTR rates. Email is as fast as the Internet, let’s leverage that advantage. When in doubt, ask your subscribers what they want to see.

    • Lauren_Litmus

      Thanks for your comment, Jono! I definitely agree with you — deliverability these days is more about your sending practices than the technical aspects of your email. And, as you said, it’s all about your particular audience & what they want to see.

      Have a great weekend!

  • Lauren_Litmus

    It definitely is a hefty email :) Thanks for your comment! As I just responded to Loud & Grover, I think it’s a somewhat “old school” idea that emails with large file sizes will get you blocked or cause deliverability problems (kind of like the theory that including the word “free” in your subject line will get you in the spam folder). However, deliverability these days is more about your sending practices than the technical aspects of your email (file size, text/image ratio, etc.). With that being said, if your permission or sending practices are already poor, an email with a large file size may contribute to your woes.

    As with all things related to email, it really depends on your audience and your individual circumstances. If a company like Urban Outfitters is sending risqué subject lines, animated GIFs, and breaking untold numbers of “best practices’” (and they are), then it must be working for them. Otherwise I don’t think they would continue doing it! :)

  • Pingback: Your Ultimate Guide to Fall Email Marketing Trends | CONTENT MARKETING INSIDER

  • Pingback: Your Ultimate Guide to Fall Email Marketing Trends | Online Sales Guide Tips