3 Reasons To Use CSS Animations Instead Of Videos On Your Site

I understand I am going against the grain here but do hear me out.

If you have a SaaS product or you build content for your website explaining its capabilities you have surely considered making explainer videos. Videos are great, they engage your audience, reduce the probability of bounce.

Here are some things to consider.

Anyone who has put videos on their site will tell you that its one thing to create videos for your product but completely another to get users to play it.

People like motion media, but so often they are in settings where they are not sure whether its appropriate to play a video or not. What if some music starts to play ? What if the resolution is too high for their phone connection ?

CSS Animations are nice in that way. They are usually set up to run in a loop and capture the imagination of your visitors instantly.

Many video players come with an option to play the video without the sound. This works well if the sound in the background is just a peppy track, however, explainer videos often have script deeply tied with content. Muting them is equivalent to watching The Daily Show in mute — It will just leave your audience bewildered.

As an alternate using CSS animations to describe the video gets the both of best worlds, leaving the engaged audience to watch videos (with sound and script) deeper into the site.

Finally, lets understand a video from search engine perspective. The only data associated with a video or an image that Google understands and indexes your page against is in the metadata.

All the text, script inside the video is lost for SEO. At this point you are faced with the ugly choice of either repeating the same content (as text) on the page and making it less engaging or just hope that users play the video.

On the other hand, CSS animations are native to HTML. All the text in a CSS animation is part of your page’s HTML and is happily indexed by search engines. What your users see and what search engines see are textually the same.

CSS Animations make a very compelling case as primary explainers for websites. Videos still carry a lot of weight but are currently illsuited to engage first time audience. Placing them deeper in the website while using CSS animations in the forefront could serve the best of both worlds.

Related posts:

The mud tasted of blood and clay. With closed eyes he could see stars flitting just underneath the thin skin on his eye lids. Earth and soil in his mouth a universe behind his eyes and sharp pain…

You probably know what an earthquake is right? And you probably know what a book is. But have you heard of a quake book? A quake book is a book that causes an earthquake (inside of you). It is a book…

With this post I want to share my experience in a sincere way. It’s kind of an open letter to the world. All I’m going to explain here it’s based in my own experience after reading 2 life changing…