Website videos: our top design tips

In the last few years, there’s been more and more websites starting to use background videos as a feature design. It’s expected that this trend will only increase as internet connections improve, video codecs get better, and browsers have increasing support for HTML5 video. If designed properly, a background video can have dangerously negative consequences such as, slowing the rest of the page, detracting the user from the content, or even making users feel uneasy due to there being too much movement.

However, if done well, a background video can be a great way of adding that extra layer of thoughtfulness. So, how do we avoid mistakes when it comes to website video design? That’s easy, you should just follow these top tips.

Compress the video as much as you can

There is nothing worse than visiting a website and having the background video stopping and starting. Not only is it distracting, but it is sure to give you the feeling that the whole website is going to load just as slowly. To avoid this scenario, you should compress the video to the lowest bitrate that users would think looks acceptable. It is always tempting to use a high quality, 1080p video which looks perfect, but it is certainly not worth the trade-off for interrupted streaming. Realistically, you should be using a 720p video with a low frame rate of 24/25 frames per second. Every time you create a video you should also be testing a few different birates between 750k and 1250k.

Consider using an overlay to hide artefacts

If you aren’t completely happy with the quality of your video, you should consider adding an overlay on top of it. This can help to disguise the quality. A solid colour, semi-transparent overlay should help a bit, but can look really nice. A patterned overlay is guaranteed to do an even better job, although might not suit certain designs.

Limit the total size and length of the video

A low biterate helps to ensure that videos play smoothly without buffering. However, designers must remember that users don’t visit a website in order to watch the background video. Therefore, you shouldn’t assume that they are happy to download a full 2 minutes of video, which could build up to 20MB of video that they didn’t actually ask for.

Plus, you should also limit the length of your video to 30-40 seconds, or even find a shorter video which loops seamlessly. Even though that seems like a longer video, it could be less than 1MB or 2MB in size.

Overall, background videos can really make your design stand out from the rest. You should just make sure that you do it well. If you concentrate on following these guidelines you are guaranteed to be well on your way.


Leave a Reply

Your email address will not be published. Required fields are marked *