What are some tips when designing a website with video in the background?
- Consider video length
- Keep the volume low or muted
- Don't autoplay with audio
- Remember your mobile users
- Produce a video or use quality footage
- Take notes from the pros
Why are designers choosing to build a website with video?
Web design has certainly benefited from the creation of HTML5, especially since it simplified the process of applying video backgrounds to sites.
When done right, a website with video can look both artful and stylish. In fact, interesting videos are stealing the show on many websites, even when the videos are not a website's main source of information (policies, products, and services are often expressed through traditional images and text).
In other words, videos may be a more eye-catching medium than photos or font, regardless of what they have to say.
The purpose of web design is storytelling; web designers want to convey a message. No matter what kind of site it is, the designer makes an effort to speak to visitors, encouraging customer interaction and user stimulation. The longer a visitor stays on the site, the better.
The amount of effort put into good storytelling is the difference between a decent website and an excellent one. And what tool promotes good storytelling more than video content?
Well-made video content.
Today we'll cover some practical tips for designing a website with video. Let's get started.
Consider video length
Inserting a background video? Remember, it's going to loop. This means, if your video is too short, it may be jarring to the visitor. On the other hand, if the video is too long, your users may feel bored and move on.
We recommend a standard length: between ten and thirty seconds.
Keep the volume low or muted
When designing a website with video, it's important to address one of the biggest and most commonly made mistakes: video with no sound options for the viewer.
Therefore, when you implement a background video, make sure there is no audio on. (Or if there is audio, it should be very low.) Instead, offer your user an option to turn on audio or keep it off.
Visitors to the site should be the ones to decide audio options, and how loud that audio should be. If you can, exclude sound completely and let pictures tell the story.
Don't autoplay with audio
Start by Googling—quickly type in a search for “autoplay with sound” and see what comes up. The first responses you’ll see are desperate attempts to disable autoplay or searches for pausing autoplay videos. (One more reason to strip sound from your background videos!)
After all, nobody likes being in a quiet coffeeshop, browsing their computer, only to have loud, unexpected audio start blaring as soon as they visit a site. This is a surefire way to lose users.
Even still, autoplay can be a good option for video websites like YouTube and Vimeo. Autoplay can also be a visually appealing choice for creative sites, as long as the audio is off.
Remember your mobile users
Web designers should be aware that background videos are not suitable for every type of device. Therefore, they need to provide alternative solutions for mobile/tablet users.
Consider, for instance, a time when you tried to access a favorite site on your phone, but it didn't work. Maybe you couldn't find the menu, or maybe the formatting was completely wrong. Mobile and desktop are very different, so make sure you design with each kind of device in mind.
Produce a video or use quality footage
We all know creativity garners attention. This is why you should use your own skills, devices, and ideas and produce a video. If this isn't really your thing, there are numerous low-cost videos available online.
If you're pinching pennies, there are also plenty of great stock footage sites you can use, like Pond5, Videezy, and Vimeo Stock Footage. Keep in mind, however, that designers looking for specific, quality content may want to consider a video budget.
Take notes from the pros: websites with awesome background videos
Now that you know what a good website with video looks like, let's see some great background videos firsthand. The videos below show outstanding video application efficiency.
Creative Design/Agency sites
Creative design and portfolio sites—like those of design agencies, artists, and musicians—can provide a lot of insight into what makes a good video background.
These websites typically let the videos speak for themselves, offering minimal text and photos. This is design storytelling at its best.
Shopping and eCommerce sites
Online stores, specific e-commerce sites and landing pages are also quite experienced with video backgrounds.
These sites not only have the goal of presenting a product (or a niche), but they are also trying to persuade shoppers to buy their goods or services. (You see this less with corporate heavy-hitters like Amazon and eBay.)
When background videos are employed by e-commerce stores and platforms, it's to establish a strong connection with users and to provide them the ultimate shopping experience.
These videos can either be placed in the site header, or somewhere below the fold, on the product landing page.
A few things to remember
Video backgrounds were not meant to be applied on every website.
Take a news or magazine site, for example. Videos could be detrimental to UI, and the video could potentially be in poor taste if the user is looking for immediate information.
Meanwhile, videos can be excellent tools for improving UI on websites where interaction counts more than the interface. In fact, videos are simply perfect for conveying thought-provoking or emotional messages.
Why do websites need videos?
Videos are a perfect way to greet users and introduce them to your site.
They can also be an organic method of introducing new products or services. Videos can give a subtle explanation of where your company stands on policy, team, and production. Videos are excellent for all kinds of first impressions.
If properly done, videos can be information goldmines. They can tell your visitors everything they need to know about your brand, product or service, all in an easy-to-digest format.
You can incorporate a lot of information (e.g. your company's story, FAQs, etc.), and you can make it look attractive and interesting.
Apple’s Mac Pro page is a wonderful example of this, offering perfect explanatory videos. This series of well-made, short videos explains each of Mac’s new brilliant components.
Ever since 2005, the master of video websites, YouTube, has raised the standards of video entertainment. What began as a simple share-platform has now grown into a business giant, with celebrity channels and a content-streaming platform.
Each video has same purpose: to advertise, introduce, entertain and motivate viewers to become loyal customers, subscribers, or viewers.
It's a related process. Entertainment is based on viral campaigns, and viral campaigns are often based on videos.
Express your energy
Good quality and an expensive name are no longer central to a brand's success. If you want your company to have universal appeal, it has to offer joy, creativity, and authenticity. You have to show customers that you love your brand the way you're asking them to.
Attractive videos can reveal a brand’s passion and they can underline commitment to constant development.
Think about it; that's exactly how you feel when you check out the videos of successful fashion brands, car producers or creative agencies. They simply radiate with elegance, personality, and style!
Think about performance
It's very important to estimate whether you can afford to have a background video or not. On one hand, a website with video can do remarkable things for your site's allover image. On the other hand, video is very likely to reduce your website speed, so decide if it's actually worth it.
Consider your brand's image, your target audience, and go from there. Luckily, if you do choose to have a website with video, there are plenty of great examples to look to, as well as advancements to help you do it in the simplest possible way.