In the past couple of years internet speeds have increased exponentially and browsers have gotten better at supporting HTML5, video has become the new normal. It’s not just for advertising and informing the audience anymore, video has fast become a web design element. We are seeing more and more background videos on websites, but not all background videos are created equally. They may be cool and interesting at first, but if they are not executed well people will be abandoning your website faster than they would abandon the titanic.
We don’t want this happening to you or your website, so we made a short list of how to make your background videos not…. well…suck.
Compress
We live in a very fast-paced world, obviously. So imagine going to a super cool looking website being blown away by their background video when all of a sudden it just stops, then starts, then stops, then starts, you get the idea. This awfully annoying lag shouldn’t happen if you compress it before you add them to your website. Yes, it’s tempting to always use the highest quality you can possibly get, but it’s not best practice. Instead of a 1080p video go for a 720p one.
Pro Tip, if you’re not super impressed with 720p quality, try adding an overlay to mask any imperfections.
Fade
Your video should be like the haircut, it should slowly appear to the audience. The point of a background video is to be pretty but not distracting, a slow fade should keep the element of distraction down to a minimum. Another way to minimize distraction is to stick with images that are not full of action as the more action it has the more distracting it will be, stick to small movements, the smoother the better.
Looper
You may want to consider how long your video is going to loop. Best practice would dictate that the length of your background should be 15 to 25 seconds. Now, most designers put it on a loop so that it plays a few times while people are checking out your page, but consider putting a limit to how much loopage happens to the video. If it plays on an infinite loop you run the risk of slowing down the audience’s computer. No one wants that.
Contrast
Any graphic designer will tell you how important contrast is when you are looking to make an impact. In theory, the video should build a heavy contrast between it and the page text. If there is text over it you’re going to want to make that text readable. The beautiful thing about a background video is that the right one can brighten dark text or darken light text, maybe both the words and the video pop!
Mute
Remember up there when we said that a background video shouldn’t be distracting? We weren’t kidding. A distracting one defeats the whole ‘background’ purpose. You may want to either take the sound ou completely, choose video without sound, mute it on the website or at very least give the user the option to turn the sound off. This isn’t a website from 2001.
Of course these are not the only tricks that can help make the most of your background videos. If you are weary of trying to figure out the intricacies involved with making a kick ass website with an awesome video, call us, the professionals. We’ve done this a time or two and we swear, well-executed background video really does make for one stunning website.