Web animation has come a long way since the rise of animated GIFs a few decades ago. Now, social media and fun-centric websites are using animation in the form of… well, animated GIFS!
Kidding aside, using animated elements in a website has evolved from being a mere visual attraction to an essential feature to improve user experience (UX). The animated images of the current generation may be more modern and useful than before, but we cannot discount the landmark achievement that our Internet forefathers achieved in terms of introducing animation to the online world.
Despite the usefulness of animation in today’s world, some websites tend to overdo this rather beautiful web element. Much like how web designers go overboard in terms of visual style, some developers put too much emphasis on animation to the detriment of search engine optimization (SEO) and the purpose of the website.
If you are currently developing your website, here are some tips on how to use animation and some warnings on when not to use them:
1. DO use web animation to improve site usability
From shaking pop-up windows to buttons that zoom in with a mouse hover, web animation can enhance the experience of visitors in browsing through your site. By correctly putting just the right amount of movement, you can turn any boring and bland page into a much more exciting and potentially engaging website.
2. DON’T animate for decorative purposes
Most web developers still consider animation as a visual abracadabra to make the site pages look great. Web pages in the ‘90s were filled with scrolling marquees and hypnotic animated backgrounds that send people away rather than make them stay. The real trick in using animation is to “animate deliberately”. In other words, putting animation into a web page requires careful thought and not a random idea just to make the site more modern.
3. DO use fast animation
Nobody wants to wait endlessly for an animation to complete its course. In fact, nobody wants to wait, period. In the same way that people want a fast-loading website, it’s also important to make your animations as fast as possible. If you design the animated element yourself, try to reduce the total animation by at least half.
4. DON’T use heavy animation files
Web page speed cannot be emphasized too much, and this is also true for animated media files. Flash websites were the bomb years ago, but the excruciating wait to see the animation loading led to its demise. If your animation pulls down your website loading speed, you have two options: Reduce the file size of your animated media file, or take down the animation completely.
5. DO use CSS instead of jQuery (or Flash)
Using cascading style sheets (CSS) has become quite the norm in recent years for visual styling and even animation. CSS codes are significantly lighter than jQuery and especially Flash.
Web animation is a powerful tool for online marketers, businesses, and anyone who wants to bring the best UX for their site visitors. As long as you use animation responsibly, we will probably enjoy this visual marvel for more years to come.
