Adobe Creative Cloud

February 9, 2016 /

Video in Web Design: Does It Make Sense, and How to Use It?

There’s no point arguing … most people prefer video to text.

Subconsciously, we all know this to be true. Just look at how many people love to spend their afternoon by the TV vs. the decline of the newspaper market (in 2012, newsroom employment in the US fell below 40,000 full-time workers for the first time since 1978 [1]).

But possibly the most astonishing piece of statistics comes from YouTube. It’s reported that 6 billion hours of video are watched there every month [2].

So why that’s the case? Why we love video so much? And more importantly, should web designers follow suit and make video an integral part of their designs? If so, how?

Why video is such an attention-grabber?

One word, evolution.

Granted, I may be oversimplifying things, but that’s basically what it comes down to.

In short, video gets our attention. No matter if the video in question is of high-quality or not, it will get attention more than a static picture would. In fact, if you’re standing in the Louvre looking at the Mona Lisa, you will still turn your head when a teenager next to you fires up a YouTube video on their phone.

Through years of evolution, movement equalled danger. Not noticing something moving towards you – like a tiger sneaking up on you – had dire consequences.

That’s precisely why the human eye and brain are fixed on everything that moves. And whether it moves in real life, or on a screen makes no difference.

Taking all this into account, it’s hard to argue that video can’t be an incredibly powerful design tool. It’s already compatible with our brains more than any other design tool that’s static.

Add to that better and faster internet connections that we have these days, and better overall mechanisms for handling videos in web browsers, and we have perhaps the perfect mix of circumstances to start utilizing videos in our current web design projects.

What kind of videos to use

There’s literally an endless spectrum of videos available that you can use in a website design. Starting from just small snippets, to almost full-length clips.

And you have similar freedom when it comes to the purpose and the type of the videos too. You can use everything from simple background videos, to full-blown product demos, to tutorial-style videos.

However, there are some guidelines that you should keep in mind. Despite their evolutionary compatibility with our brains, the video technology still imposes some restrictions on what can be done.

Use videos to tell a story

Sorry to sound cliché, but if an image is worth a thousand words, then what a video is worth? A typical second of video footage is 40 frames. How many images is that for a 1-minute video? You do the math.

But let’s set this poetic nature of video aside, and focus on what actually works.

First of all, videos are perfect for portraying things that would otherwise be very difficult to describe by means of text.

Some examples:

  • Videos are great for presenting physical products – something that can be held in hand.
  • Videos are great for tutorial and how-to content. Showing things is always going to be more instructional than talking about them.
  • Videos are the perfect vehicle if you’re looking for an emotional response from the viewer.
  • Videos are great as a selling tool. According to Hubspot, 52 percent of marketing professionals name video as the type of content with best ROI [3].
  • Videos serve great as a tool to visually represent the style of the product/business/person that the website is about, without necessarily talking about the thing in question. In other words, videos present the lifestyle associated with the thing. In some niches and scenarios, this can be more effective than talking about it explicitly.

Video quality. What’s good-enough?

Regardless if you’re using background videos or foreground videos, there’s just one, yet crucial, rule:

If you force the visitor to watch a video, it best be awesome!

And this stands for both technical quality of the video, and its overall widely understood production quality.

The technical quality principle is pretty self-explanatory. The video you’re using in your design needs to be of sufficient size – so it looks good on any HD screen. It also needs to be compressed enough, so it loads fast (more on that in a minute), but not compressed too much, or you’re compromising the viewer’s comfort and making them feel uneasy.

Then comes the production quality. This is all about things like lightning, the script, the montage, and everything else that goes into video production.

I’m not a video expert by any means, so I won’t try giving you any how-to advice on that, but just look at the video at Harvest. It’s really the perfect mix of good script, good production, and overall great viewing experience, while also conveying a story about the product being promoted.

harvest 2

Technical limitations and bandwidth

While images we have pretty much figured out at this point in the web design industry, working with videos can be problematic.

Mainly, even a short video can still be huge in file size. There’s also the issue of file format and compression that might not be fit for the web. And if that’s not enough, not all browsers are ready to render some of the newer and more optimized video formats.

There are basically two ways of getting around these problems:

  • Use only tested codecs and video compression mechanisms. For example, working with H.264/MP4 or VP9/WEBM is rarely a bad choice, as most modern web browsers support them.
  • Host your video on YouTube or Vimeo and only embed it in your design from there.

The latter is perhaps the best way out of the whole video-on-website thing. Having the video hosted by another platform solves the bandwidth issue (for instance, YouTube is capable of handling any volume of traffic and they don’t bill you for it), and it makes the video accessible on all browsers and devices as well.

The only downside is that embedding videos might not always be in tune with what you want to achieve with your site design. Plus, you need to customize the video player itself, so that the visitor can’t flock to YouTube too easily right when they finish watching the video.

If you do decide to host the video yourself, however, really make sure to not compromise the site speed. The best way to save yourself from that is to measure the speed prior and after adding the video, and then optimize accordingly.

This brings me to potentially the toughest challenge with videos in web design:

What if your client wants to use a video that just doesn’t cut it?

In 99 percent of the cases, you’re designing a website for a client. That client has their goals and their requirements, but they also often have other promotional material that they want to use on their new site. Images, product pictures, team photos … those are okay, and can always be placed somewhere on the site, regardless of their quality.

Videos, though, not so much.

One of the most common problems that we face in a client scenario is when they show us a competitor’s website, point to the video they’re using, and say that they want something just like that. But then, they send a video that’s either way too large in file size, way too long, or worst of all, of really poor quality.

Using a video like that simply won’t cut it. It will not only not have the desired effect of engaging the visitor, but will possibly alienate them or even make the whole product/business look silly and unprofessional.

The most obvious way out of it is to shoot a new, high quality video. But there are other solutions if the budget isn’t there:

  • Have an autoplay slideshow in place of the video. Create it from a handful of quality stand-still frames from the original video, or from a set of product images.
  • Use the parallax effect in place of the video altogether (more on that in a minute).
  • Use slide-in or scroll-triggered animations that look somewhat like a video, but aren’t.

Check out the scroll-triggered animation by our own Adobe Portfolio:

portfolio 2

Foreground video or background video?

The two most common ways of using video in website design is to either (a) make it one of the main foreground elements of the design, or (b) treat it as background that only reinforces the main message.

Depending on your goals, one is going to be more suitable than the other:

Foreground videos are great for demos and telling a story with the video. In other words, if you want to present something that’s the actual topic of the website then a foreground video will help you with that.

That being said, a foreground video doesn’t need to be visible right away. You can, for instance, do what Nest does on their homepage. Instead of displaying the video embed right away, they use a link saying “Watch the video” that triggers a pop-up.

nest 2

Background videos are perfect for situations where the video itself is only vaguely related to the topic of the website, and instead of presenting a given product itself, it helps convey the feeling/lifestyle/emotion associated with the product.

This can be done effectively on websites where there’s no need to emphasize the content, per se. For instance, a musician’s site could use a background video showing someone working in a studio (recording, playing an instrument, etc.).

Or to give you a nice example, take a look at the homepage of CouleeCreative. It’s an agency that chose to use a fun team video that conveys a really positive vibe, instead of going for a cliché workplace clip where all you see are people by their computers.

couleecreative 2

Videos in parallax backgrounds

One more trend we should discuss separately is using videos inside parallax background blocks. Those are kind of a new in web design. The whole principle is to create an illusion of depth of field and use a background that’s multi-level.

In the classic case of parallax (if we can call something like parallax “classic” … a stretch), what’s placed in the background are static images. Then, they are put in motion through the nature of the parallax effect itself.

But a more interesting way to handle this is to use a video as the parallax background. In that case, the video plays even more of a side role than it does in a classic background. The video inside of a parallax background should only aim at conveying feelings and emotions, instead of trying to represent a product.

Here’s an example by ThemeIsle and their Zerif Pro:

zerif 2

You can see the video right in the first parallax block. Great way to make your design unique.

Autoplay videos?

Probably the most polarizing thing about online video.

So, autoplay or not?

The answer is two-fold:

  • If the video isn’t visible right away – if it acts as a pop-up under a “watch video” link – then obviously it can’t be autoplayed.
  • If the video is visible then … wait for it … yes. Do autoplay it!

But hold on, please don’t give me that look if you hate autoplaying video.

What you actually hate isn’t autoplaying video … it’s autoplaying audio.

So what I really want to say is that if you want to put your video on autoplay, make sure that it’s muted. Alternatively, you can monitor the mouse cursor position. If it’s over the video or somewhere near, you can play the audio as well.

Full-screen or not?

There are different rules that we need to abide by if we want to use full-screen videos vs. videos that sit inside smaller containers. Let’s list them quickly:

  • Full-screen videos need to be simpler and shorter than smaller videos. This is mainly due to bandwidth and load time limitations. If a video is a long high-quality production then it will take a lot of time to load, which can compromise the viewing experience completely.
  • Full-screen videos work better as backgrounds. Just like you wouldn’t have an image background that’s not full-with, the same rules apply to video backgrounds.
  • Videos displayed in their own containers can be of any length (within reason) and can present the product/business in question in any shape or form. This means that they’re also somewhat independent of the actual website design.
  • Full-screen video backgrounds need to loop cleverly. Quite simply, the loop needs to be seamless, and it shouldn’t disturb the eye. Moreover, videos that are around 20 seconds long tend to work best for looping. Any shorter and the loop is too obvious. Any longer and most visitors won’t even see the whole video. Also, the bandwidth limitations are at play here too.

For a good example of a full-size background video, go to Toggl. It’s a time tracking tool. They have a nice way of showcasing their tracker through a series of short scenes looped together into a nice video.

toggl 2


So to answer the main question: Does video make sense in web design?

Yes, absolutely!

But the devil is in the details. Video will only perform well and not alienate the visitors if it’s of high quality and provides an overall pleasant experience on its own.

If that’s taken care of then you can use videos for basically anything. From e-commerce, to product demos, to team videos, to parallax backgrounds, and anything else in between.

Most importantly, good video lets you connect with your buyers on whole another level. This is something very difficult to achieve through static text or images.

References: 1, 2, 3.

Join the discussion

  • By allan - 12:28 PM on April 7, 2016  

    well done!