Increase Engagement and Catch Attention
Videos and animations can be a great way to increase engagement and keep attention on your website. But, that won’t matter if the page doesn’t load before the user clicks off.
The key is to use the right file formats and make sure you don’t go overboard on the animations. You don’t need to animate everything on your website.
Videos
Videos are great when used to demonstrate a product or if you want to display a more credible testimonial from your client. But, you have to be careful with how you add them.
Best practice: Upload your videos to YouTube or Vimeo, then embed them in your website
Videos usually have pretty large file sizes, you’ll want to avoid hosting videos on your own website’s servers.
Can’t upload to YouTube? Use WebM
If, for some reason, you can’t embed the video and you have to upload it directly to your website, make sure you use the right file format. Use the WebM file format and make sure you compress your videos before uploading.
If your video isn’t currently in WebM, you can convert it to a different file format using Cloudconvert.
Animations
Animations are a great way to direct user attention to the most important areas of your website, or encourage them to keep scrolling down a long page. But, each animation you add is going to add additional loading time to your page.
When To Use Animations
- Draw attention to a specific element.
- Demonstrate how a product is used.
When To Not Use Animations
- On every single element of a page.
- On mobile devices.
Types of Animations
CSS/JavaScript
CSS and JavaScript animations can be used for simple movements, like making an element or button “Jump”. You can read more about these types of animations here.
GIFs
GIFs can be used to show animated characters, but they can load slowly. It’s recommended to use MP4 or WebM instead of GIF.
