Video in web design was anticipated to be a top trend in 2016, and what was once thought of as impossible is now a widely-consumed concept by users in certain industries. Video is designed to captivate the user emotionally so this trend mostly applies to travel websites, hip startups and e-commerce stores selling luxury items.

In short, video can bring a sensual notion of a time and place that still photography can struggle to match.

Airbnb’s video-based header Airbnb’s captivating video-based header depicts how “at home” you can feel by choosing an Airbnb over any other type of accommodation.

But video can be heavy, in terms of both of megabytes and screen real estate, and it should be used with extreme caution. Let's take a look at some of the ways that we can make websites with video more accessible to the average user, and much more accessible to the more-common-than-you-might-think disabled user.

How Much Real Estate Should Video Acquire?

Video can be a high-risk web component, but it isn’t hard to maximise its effect and optimise its user experience. Most of the decision-making comes down to “how big should it be?”, and the answer solely depends on exactly what you’re using it for.

Ambience Videos

While most “hero” headers tend to use big background images, videos are becoming more commonplace too. How these differ from “explainer” videos is quite clear. Ambience-style videos don’t take a central focus on the webpage; the colours, speed, tone, mood and overall impression subtly induces emotional feelings, leaving the user with a desire to keep reading and scrolling.

Ambience videos are usually full-screen, and in-turn of lower quality; this is to keep the webpage size low and the loading times fast. Sometimes they’re blurred or even abstract – as long as they make you feel the way the website wants you to feel.

Ambience videos

Here’s an example: a travel agent website selling luxury island holidays may want you to feel adventurous, so their video might slowly transition between various scenic island destinations with soft lighting and relaxing hues, making you feel as if you were literally right there in the moment. It can make all the difference between “Ah! Yes! Please!” and “Ehhh, maybe someday.”

Explainer Videos

Explainer videos (which are smaller/not full-screen) have been around since as far back as I can remember. Historically, they’ve converted very well and they’re usually set in the middle of the hero header, but other emerging trends (like card-based design) have allowed us to use video in smaller, more modest ways.

Explainer videos

Facebook videos are now set to autoplay but no sound will be appear unless you imply in some way that you’re watching the video, such as full-screening or interacting with the video.

I adore this kind of non-invasive functionality and we’re now starting to see it in effect with card-based designs, meaning compact, user-friendly videos that can be combined with text alternatives to satisfy a wider crowd. And that’s a huge deal.

HubSpot’s card-based videoHubSpot’s multimedia card-based approach.

Autoplay functionality helps those with motor disabilities to interact more easily with video media, but the overall reduced frame of the component means that we can sum up the video in text side-by-side, sort of like visual alt attribute. Video doesn’t have to be invasive anymore; it can heighten the experience without warding off users with simpler needs.

Multimedia websites allow catering for all types of users.

How to Handle Sound

Deaf users (like myself) are immediately turned off when they see video, much like the average user is when sound begins to blare through a quiet office (much to the dismay of irritated colleagues!). Sound control makes everybody happy, but auto-mute or text alternatives aren’t the only way to handle it…there’s subtitles too. But beware, you run the risk of users not knowing there’s subtitles and clicking the back button anyway.

Quality vs. Performance

Video is expensive. It costs a lot of megabytes, so only when the internet became faster over time did we begin to consider it as a viable type of media for the web. Sadly, internet speeds still have a lot of work to do (especially on low-bandwidth mobile devices), and this is where the inevitable question, “do we need to use video, or are we trying to be trendy”? needs to be asked.

If your website isn’t aimed at huge first-world markets, I wouldn’t consider using video components at all. A large statistic of the world still isn’t connected to the internet and many of those that only have access to slower connections.

Where to Find Great Footage

Stock video is actually quite easy to come by. Perhaps not as common as stock images, but that will change as we become more accepting of video. Pexels is the most well-known source of free stock videos, but I have to say that Adobe Stock trumps on quality.

Here’s some other alternatives:

Conclusion

Because video is a type of media, it can only move forward as new web design trends appear on the scene. More trends equals more web components, which means new ways to implement the media. Video will surely advance further than this in 2016, but how? Leave your ideas in the comments below, I’m interested!

Daniel Schwarz is a full-time design writer and digital nomad. When he’s not writing about design and code, he’s actually doing it (sometimes) at Airwalk Studios, a creative studio of which he’s the founder. 24 years of age, originally from London.
  • http://clarebrace.co.uk Clare Brace

    I think your points regarding the use of Video as a media / content type are completely valid, it’s great to see an article advocating video as a way to improve experience with video content.
    Video will help to improve the overall experience by offering an engaging form of media for the user. Although, with Gear VR, you could argue 360′ video is now the way to enhance a users experience.

    • https://mrdaniels.ch/warz/ Daniel Schwarz

      I haven’t heard much about Gear VR. What’s the hype? I hear it’s cheap!

      • http://clarebrace.co.uk Clare Brace

        The 360 Videos by GoPro were really great to watch. I think even without the headset, 360′ videos offer a more immersive experience which is accessible to anyone with a smartphone. The Gear VR itself looks amazing and functions really well. The only downside being it only works with Samsung.

  • Malachi

    Thanks for the article, Daniel! Video CAN be an addition to a site, in terms of setting a mood or giving an idea, as long as it doesn’t distract or becomes one of the many eyecandy that so many sites have that simply do not add anything to the site’s purpose.

    • https://mrdaniels.ch/warz/ Daniel Schwarz

      Eye candy – sadly that’s the core reason for using video still, but I think we’re getting there in terms of making video accessible and valuable.

  • M S i N Lund

    Most of those examples looks like absolute shit, when viewed on another screen than the one the designer used.

    On airbnb, for example , i see a huge low rez sliver of the lower part of something moving around.
    I guess it might be a huge gif-animation?

    Looks like someones cat-blog.
    Do professionals actually build crap like that?

    I haven’t looked at it on my ipad yet.
    Im guessing it looks great there, and that the company who built it are using ipads as their main workstations?

  • http://www.cygnet-infotech.com/ Hemang Rindani

    Amazing article. The details are so minutely described about how to handle a video to attract users. The criteria of quality vs performance is interesting and acts as a major factor. If the quality is too high, it effects that page loading time and ultimately harms user experience however while compromising on quality, it must not harm the video performance. To handle video’s efficiently, there are number of tools available with enterprise web content management services, like there is VideoPress for WordPress and Digital asset management tool for Sitefinity CMS which can manage the working of video’s effectively and effortlessly. Using compressed files will be beneficial.

    • https://mrdaniels.ch/warz/ Daniel Schwarz

      Aw, thanks! Performance vs. quality, that’s the real question isn’t it :p

  • https://mrdaniels.ch/warz/ Daniel Schwarz

    You’re welcome. It’s a nice site!

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!