Is it time to consider animated GIFs and other micro-animations as part of your B2B website strategy? I mean, besides their power to convert readers into consumers by illustrating benefits that are tricky to describe, easily guide users to actions you want them to take, quickly call out vital information you want them to see, and simply simplify the process of communication without slowing the customer journey . . . is there really any reason to go the micro-animation route?
We know why they weren’t such a hot idea in the past, with their huge file sizes making for slow loading time, and unoptimized file formats sabotaging SEO efforts.
But that was then and this is now
Micro-animations are UX dynamite – small packages of high power. Micro-animations add delight, depth and detail to designs. They may sound too simple to be significant, but you shouldn’t underestimate their appeal. Newer JSON-based file formats (like Lottie) have teeny-tiny file sizes and display on most devices.
Which is great news because there’s no time to spare. On average, people spend only 69 seconds on a desktop web page and 34 seconds on a mobile page. You need something that immediately draws the eye and delivers your message (in your voice and branding) and gets engagement, all in double time.
This is a job for strategically placed micro-animations, like hover-over effects, animated buttons, moving links to new pages, or an illustrated demonstration of How It Works.
To appreciate the brilliance of micro-animation, take a quick look at that which came before . . .
Say what you like, the GIF started a thing
Back when the Internet was still a dark and dusty place, CompuServe developed the ever-popular GIF. (Nobody’s saying you can’t pronounce it gif as in the gift-that-keeps-giving, only the creator Steve Wilhite says it in-a-jiffy.)
GIFs have been with us since 1987, through their own personal heyday on personal websites in the 1990s, and they’re still with us even as we speak.
“In a chat, flicking back and forth a GIF or sticker is the ultimate little kernel of personality: a (sometimes wordless) summary of a vibe. Some brands can certainly make use of that to underscore their tone of voice.”
Alex Goldstein, a creative director at Schwa.
We’ve all done it — but this doesn’t mean they’re a good animation option. GIF file sizes remain large. Their low resolution, frame rate, and limited palette mean that what looks affectionately lo-fi in a friendly DM can look broken and degraded on a professional splash page—unless that’s your look!
The flash in the pan
You might remember Flash animation. Originally called Macromedia Flash, it was introduced in 1996 and offered the wonder of crisp interactive animation on websites.
It required a Flash plugin to be installed to view content, which wasn’t a problem as tens of millions of devices had the plugin installed by the time Adobe acquired it in 2005.
But Flash had security issues and poor mobile performance and when Apple refused to support it on iOS devices, it was the beginning of the end, and Adobe ended support for it in 2020.
Then HTML5 canvas pulled the plug
HTML5 standardised the canvas element, which Apple introduced in 2004. This allowed animation to render on websites without requiring a plugin. Results look sharp and can be interactive, but the downside is that using HTML5 canvas can require writing lots of code. Lots. And it takes time. Lots.
The code may also require pulling in graphics from external files, such as sprite sheets. This can make delivery more complicated and increase page loading time.
Relying on code, linked libraries, and a web of assets makes refining and modifying HTML5 animations time-consuming. Basically, what’s achievable is limited.
And then there’s video. And once again, it’s a matter of size.
YouTube, TikTok, Instagram, LinkedIn, exhibition spaces, meeting rooms, and web pages all require content in a video format. It’s practical, and people love it. Video dominates, so why entertain micro-animations?
It’s easy-peasy to embed a video file to run on a website. Make it appear like an illustration on your website instead of appearing in a player. Thank you, HTML video.
But.
Far and away the biggest problem is that embedded video files (not those streamed from external providers) are BIG. They take up space on your web server, they use up bandwidth to play, and they can slow your page loading time. Also to get the webpage’s desired video appearance and behaviour requires code and configuration. You might need to encode separate video versions to ensure compatibility.
That’s why it’s better to embed a video player that serves your video from an external host like Vimeo, YouTube, Wistia, or Brightcove . . . but then it doesn’t look like a micro-animation.
So, what is micro-animation again?
Humans are geared to detect even tiny movements in our surrounding environment. Micro-animation takes advantage of this with things like a quick reaction to a small event (thumbs up), or that make an otherwise tedious process interesting. Like filling in forms. Which we all love.
It’s all about getting (and keeping) your B2B customer’s attention by humanising the process. Micro-animations are a quick and simple way of encouraging users to engage, acknowledging that their actions are successful – essentially adding value to their interaction with your website.
They’re everywhere. We like how the once-static Like buttons on Facebook have been brought to life. In this case micro-animation has made something that used to be cool cool all over again.
But enough about your social life.
A great thing about micro-animations for brands is that it can explain how your product works in your own style and voice.
We asked Alex Goldstein, a creative director at Schwa, her opinion on micro-animations as tone of voice touchpoints:
“‘Monday.com is a good example. Copy like ‘built for a new way of working’ is pretty direct, and the design and font are modern and clean. So we can easily assume the tone they’re going for is fresh and forward-thinking, and jumping on the micro-animation trend emphasises that. Most of the animations also have a specific purpose: they demonstrate a feature in action. So it’s a win-win for tone and content.”
Let’s talk about the tech that makes all this possible. And easy.
Who is Lottie . . . and why your B2B website strategy should care.
Lottie was created by Airbnb’s design team when they wanted an efficient, lightweight way to make animation for their apps, then they released it as open source. (Yay, Airbnb!)
This JSON-based file format boasts mass compatibility, tiny file sizes, and an animation-friendly workflow. It allows animators to work with the software they already know, and delivers the good stuff.
Here’s why Lottie’s a winner:
- Build on what you know: To make Lottie files, animators can use Adobe After Effects, a tool they’re already familiar with, to create and export small animations that are ready to run on websites and in apps.
- No plugins required: Lottie doesn’t require browser plugins. Instead, an official Lottie plugin for Adobe After Effects exports animation as JSON text that you paste into a website’s code.
- Preserve the quality: Despite the tiny file size, you don’t sacrifice image quality because these animations render within the browser. As a result, crisp edges, colours, and frame rates are preserved.
Wait – how small are they? Lottie’s website includes an example of a half a megabyte (598kb) size GIF. A Lottie JSON version of that animation is 89% smaller and higher quality, at only 66kb. They also have an example of their newer dotLottie format, where the image is only 8kb. That’s 99% smaller than the GIF with no perceptible sacrifice in quality!
Word to the wise from Contentsquare: Users become frustrated if a page takes longer than three seconds to load. While Lottie file sizes are small, too many complex animations on a page will increase load time.
- More & better: There is also a third-party plugin for After Effects called Bodymovin, created by Hernan Torrisi, which has different compatibility for effects and expressions. Also, Lottie have also released a separate dotLottie file format. If you want an animation to include an external image, this can wrap up a group of assets but keep everything inside one file.
- Quick & straightforward: Updating and re-exporting a Lottie animation is straightforward in After Effects. Moreover, Lottie has external tools that can make minor tweaks after delivery, like colour changes, without returning to the original. They also have browser-based optimisation tools.
We’re not saying Lottie is perfect for everyone all of the time. The Lottie pipeline is streamlined, but animators need to optimise their After Effects workflow with Lottie in mind. Some things you might use in a regular animation won’t appear in a Lottie file. Lottie list the cross-platform support for various After Effects properties.
- For example, a trim paths effect set to ‘individual’ will display on iOS and Android but not Windows. A trim path effect set to ‘simultaneous’ will display on all supported operating systems.
- If you’re writing JavaScript expressions within After Effects to drive movements, the exporter will ‘bake’ that code into individual keyframes, which increases the file size. So you need to plan for Lottie file delivery in advance, use heavy techniques sparingly, and only animate compatible properties.
What about SEO power? Does Lottie have it?
If animations improve dwell time and user engagement – the very reason for the addition of micro-animations – then their impact on SEO is positive.
We asked Luke Budka, head of digital PR and SEO at Definition Agency, whether Lottie files on websites can affect how a search engine parses the page:
“Lottie’s JSON code doesn’t affect the crawlability of a webpage. A search engine will render the code before parsing the page, and if the animations are numerous and complex, then rendering could take longer, which will slow down the speed at which the page is added to Google’s index. However, rendering, crawling and indexing, almost happen simultaneously these days, so in the vast majority of instances it’s unlikely to cause a problem. Separately, a page full of imagery or video with no structured data markup or text for context, likely won’t rank well, as Google will struggle to understand what the page is about and whether it contains valuable content for users.”
It’s unlikely that search engines will read vector text within animations because the type will have been converted to shape data. So using alternative text tags will be necessary for a search engine to understand the content of an animation.
Micro-animations: What’s not to love?
Which brings us back to us. At TopLine film, we specialise in explainer videos. These are typically much longer than micro-animations, and include everything needed to tell a whole story, from film direction to sound design and the kitchen sink. Often, as part of those, we devise animations that illustrate product features and benefits and present data appealingly. This means we have the in-house animation capability to design, produce, and deliver micro-animation content using After Effects and Lottie.
The short story: micro-animations make your B2B videos better. We can help. Book a call.
https://lottie.host/?file=9e48c81e-13e1-4383-a11a-e20a2e7cd112/vAadBhES3U.json