4 ways to use the old graphics format that’s new again

As the days whiz by and the holiday season gets underway in earnest, merchants are adding last-minute touches to their eCommerce site gift centers and email campaigns. For a touch of pizzazz, many are turning to an innovative graphical format: the animated .gif.

No, this post hasn’t been republished from 1996. The animated .gif — the technology behind early banner ads that blinked and flashed their way to infamy– is seeing a genuine resurgence, and has even earned a fancy new moniker: “cinemagraph”. The popularity of visual blogging site Tumblr helped re-popularize animated .gifs, and the rise of social video tools like Vine that feature short looping clips has further spurred creative uses of the extreme short-form storytelling that animated .gifs support. The weeks ahead will likely see an abundance of animated .gifs as merchants attempt to capture the attention of time-starved shoppers.

The key to effective deployment is to avoid repeating the mistakes of the past. Merchants who opt for animated .gifs should reduce the annoyance factor by using the motion for a genuine purpose, beyond just eye-catching visuals. In addition, they should take into account their audience’s tolerance for looping video clips versus one-time displays that come to rest on a static image; constant motion might better be served in small doses in a portion of the image, or as a subtle background movement that sets off the main content. They should also limit the number of animated .gifs served on a page or in an email campaign, so that shoppers aren’t overwhelmed by distracting visuals. Finally, .gif file size can quickly grow for more elaborate animations, making email and pages slow to load — another reason to keep it simple.

Among the most effective reasons to use animated .gifs:

To preview or replace video content. The .gif image format is almost universally recognized and readable in Web browsers and a number of email readers (Outlook 2007+ being a notable exception). Simple animations or even small video clips presented as animated .gifs have a high likelihood of rendering correctly — which less often the case with embedded Flash or HTML5 video files. Furthermore, the clip in an animated .gif plays automatically, without requiring a shopper to click — making the content instantly accessible as soon as the page or email content loads. Merchants can use an animated .gif on its own or to encourage playback of a full video clip, as Lego did to entice email subscribers to view a video promoting its Teenage Mutant Ninja Turtles line ().

To demonstrate product features and SKU options. An animated .gif can convey important product information in the span of seconds, without requiring shoppers to click on additional images or read through how-to manuals. A single graphic can display multiple color options for a single product or demonstrate an item’s features in action. ThinkGeek uses the animated .gif below as the primary image for the folding telescope ring, conveying instantly the gadget-y appeal of the item.

Not only can these images enliven product pages, but when reproduced in thumbnail size they can add eye-catching movement to index page listings (as on ThinkGeek). Caveat: It’s crucial to be extremely selective when choosing which products to depict in this manner, as otherwise index pages could easily be overwhelmed by too many moving images.

To add pizzazz to navigation. Merchants can call attention to newly-added or seasonal categories on eCommerce site global navigation with an animation. Because the image is displayed wherever shoppers roam, the movement should be subtle — a muted color change or a shimmer of movement, rather than bright blinking.

To enliven email campaigns. Animated .gifs can freshen email campaigns, not only by incorporating video previews or product demonstrations, but also by encouraging viewers to engage with interactive features on other touchpoints. Sephora uses an animation to display the many features of its mobile app, giving shoppers more reasons to click through and commit to a download.

           

Do you use animated .gifs? If not, why not, and if so, how?