Best Practices When Incorporating Video Content into a Website
Videos can be an extremely powerful tool when they are incorporated on websites and can provide a huge boost to traffic, engagement levels, and much more. While there is no doubting the potential of videos, in order to truly tap into it your website’s design must be able to harness its strengths while at the same time limiting any potential drawbacks.
Make no mistake, as much as videos are powerful, they are not infallible – and do have drawbacks. Some of the most notable issues that you may run into involving videos include the fact that they take up a lot of screen real estate, can substantially increase loading times due to their size, and may divert attention away from other important elements. Because of that, it is important that if you incorporate video content, you try to stick to these best practices:
- Include alternative elements with important information
As much as many people love to watch videos, there are some that do not. More importantly the behavior of users when they encounter videos differs, and some will play it immediately while others read the surrounding text. Because of that, serving up a video as a sole source of important information is inadvisable and it is best to pair it with some other elements (i.e. text or images) that will be an alternative source of that information.
- Always give video a prominent position above the fold
Videos act as a natural center of attention, and should always be given a prominent position above the fold – normally right below the headline. Not only will this maximize the likelihood of them getting views, but it will also stave of the unwanted scenario where users end up annoyed when a video begins to play without their knowledge. In the less likely event that your video is not meant to be at the top of the prominence pecking order, you should make sure that your design elements have a hierarchy that takes that into account.
- Think carefully about auto-play and auto-mute
Having videos play without consent is often an annoyance, which is why auto-play is often a controversial feature. That being said, in some cases that annoyance can be mitigated if at very least the video is muted until users actually click on it – as is the case with many social media platforms nowadays. Of course, it is possible to not even load the video or player but instead use a screenshot tool for Mac to create a placeholder that will only activate the video when it is clicked.
- Keep the loading times as low as possible
Juggling loading times is the unfortunate reality when incorporating video content of any kind, and it is an area that can be very involved. Assuming it is general video content, then you should consider using responsive design to adjust the resolution of the video based on the screen size of the device. Similarly, you may want to embed your video as opposed to self-hosting it, as that can also help with load times. Frankly, there is no ‘simple’ solution, and in some cases if other elements are bogging down your website as well you may want to trim or optimize them as well.
- Make sure users have control over the video
At any given point in time the user should be able to pause or stop the video, or resume playing it as the case may be. It is important that those controls are prominent and easily noticed – particularly if your design doesn’t have the standard player controls located right below the video. That being said, the fact that that location is such a well-accepted standard for controls is something you should take advantage of, and is the best position for controls because it is the first place users will look for them.
As you can see, these best practices are intended to make sure that your website is able to fully maximize the potential of video content while not letting it encumber or annoy any users. Some of it may be subjective and situational, which is why if there is no obvious choice then your best bet would be to try out different approaches and test them against one another to see which suits your website and audience best. All in all, however, you should have a clear idea of the overall best practices when incorporating video content, and can look to your website to see how it can adopt them.
You may also like:
- Website Search Design: Best Practices
- Website Navigation Best Practices for Web Designers
- What We Can Learn About Website Design From Video Games
- How Screen Recording Can Be Used to Create Different Types of Website Content
- How to Design for Long-Form Content
- Vimeo! The Best Video Host For Web Designers
- How to Leverage Content Personalization to Drive Sales
- 20 Brilliant Photoshop Video Tutorials to Improve Your Skills
- 10 Tips for Creating an Animated Explainer Video That Wows
Subscribe to our RSS feed!
Popular on Web Design Dev:
- Free Wix Website Templates
- 20+ Portfolio Website Templates for Architects
- 20+ Portfolio Website Templates for Artists
- Creative Resume Templates for Web Designers
- Web Safe Fonts with CSS
- Best Free Tumblr Themes
- 20+ Free HTML Templates
- Professional Free Bootstrap Themes
- Best Shopify Themes for High Conversions
- 20+ Events Production Website Templates