As internet broadband speeds have gotten better over the years, we’ve seen text, images and now videos becoming progressively more consumed as forms of content on websites. One design trend that has emerged from this is using looping video backgrounds through html, javascript, flash, or some other means in stead of just an image. This can still have a highly impressive and visual impact on your users in 2015, however, there are some things to ask yourself before committing your web design and development teams to creating this form content layout.

Does the video enhance the message of our content?

The whole point of doing anything on a website is to create useful content or information that is easy to find and digest for your target personas or users. This is the ultimate goal of User Experience. So you need to make sure that the background video that is looping behind your content reinforces the sentiment, the feeling, and/or the reaction that you want to illicit from your user. For instance, if you are selling dog food that is organic and created specifically for senior dogs and their sensitive stomachs, the last thing you want is a general video of the product itself or middle-aged dogs running around. Find the message in the product that highlights the feeling you want to share with the user and make sure your background video specifically supports that.

Do your consumers have the bandwidth, devices, and internet habits that support the case for using background video?

Video files, even when compressed down, can take anywhere from 5-10x longer to download than an image background. Make sure your data, bounce rates, and overall analytics support an average time on your website of at least 30 seconds or longer. They’ll be more likely to stick around and see the visual show if we know the average person sticks around.

Tablets and mobile devices also have trouble displaying background videos, so if you have a heavy user base that is mobile, then using a looping html background video may just add more load time to a page that the majority of your people will never see. Checking your Google Analytics to see what portion of your traffic is from devices other than desktops is easy and something you should definitely check before committing to this.

Do you have the technical capabilities and platform to do it?

While using background videos is not rocket science, you still have to make sure that you are using a platform, theme, CMS, template, etc, that has it built in and tested for you. If you’re a developer, then great, you can figure it out on your own. But for the explosion of new digital marketing managers, non-coders, and content managers alike, they need solutions to do this right. Here’s a couple things to make sure your solution has to do background video.

  • Hosting with enough bandwidth per month (you don’t want to exceed your limit if you’re on a cheaper plan).
  • Coded for all modern browsers including Chrome, Safari, Firefox, and the newest versions of Internet Explorer (IE11+).
  • Graceful degradation (a.k.a. it has a backup plan if the video fails). This is usually a background image that shows if the video fails, or in the worst-case scenario, a backup background color.
  • Support for more than just MP4. MP4 is great and you should use it, but you should also make sure you have another format available to you in the template, theme, etc, for WEBM or OGV.
  • Make sure your videos are not large in file size. I typically recommend 2MB – 8MB for a video size, though I would get it as small as you can without using too much quality.

Background video is really cool, but it can get out of hand very quickly. Hopefully these questions will help you make a more informed decision about whether to use it on your website.

Hubspot COS Template with html video background template

 

Subscribe For Updates

If you want to stay up-to-date with all our content on Hubspot Design and Development, please subscribe. We value your email address and will not SPAM you with frequent updates.

You have Successfully Subscribed!

Pin It on Pinterest

Share This