How web video can enhance webpage layout

peas and carrors - web video compliments website designLayout is one of the most important aspects of web design. The layout of a webpage determines it’s overall success and is ultimately responsible for how a user experiences a page. Specifically, layout is responsible for how easy a page is to read and to navigate. Web designers therefore have to weigh up aesthetic and practical concerns when designing the layout of webpages.

Web video remains an extremely powerful form of visual communication and can be especially effective when used to compliment the design of a webpage. Video has the potential to enhance a webpage on a couple of different levels.

Firstly, the facts around video can’t go ignored. People are watching more online video than ever before and videos on web pages can increase the conversion rate significantly. At the same time, some stats tell us that only 16% of Internet users actually read written online content word for word. With this in mind, video can be used to present information to users in accessible and compelling ways.

Secondly, in design terms, video can be used to reduce the clutter on a webpage. Video can be used to enhance what is being said with other media (text, images). A web video can literally condense a message in terms of the amount of space it occupies on a page.

Examples of websites that use web video well

1. British Museum

The British Museum uses coded icons to tell the viewer what content type they will be linking to. This is an effective way to organize content and to communicate to visitors. However, their homepage is quite cluttered and they would benefit from having some actual video on the page to reduce the clutter.

British Museum web video

2. BBC Radio One

Radio One does something similar to the British Museum – using icons to communicate the media type. However, with the Radio One site the viewer has to roll their mouse over an image for the icon to appear. This is slightly messier but intuitive enough for seasoned Internet users.

Radio 1 web video

In the example above, Radio One doesn’t display video on the homepage. However, this isn’t always the case. It depends on the show that is airing live at any given moment. In the image below, you will see that they do sometimes integrate a video player on the homepage – often to stream live video.

Radio1 online video

3. BBC News

The BBC News website frequently combines different media forms. They often replace what would usually have been an image with a web video – see the image below as an example. This works well for viewers who like to get their information in different ways. Some people might like to play the video whilst skim reading the article, others may only be interested in one or the other.

BBC-News

4. The New Vimeo

Vimeo is all about video and so we would expect their site to be designed for it.

To launch their new site, Vimeo created the above page. The first part of the page (above the fold) is completely dominated by a large video frame, introducing visitors to their new site with a video, of course.

The New Vimeo
<embed src="http://vimeo.com/moogaloop.swf?clip_id=35514005" type="application/x-shockwave-flash" width="400" height="300"></embed>

5. Uniqlock

Uniqlock are an example of designers going the extra mile to integrate video into website design. Their design is based on a background video (this can be done with HTML5 or with Flash, but most do it with Flash).

Uniqlock

Background videos definitely aren’t appropriate for any website type, but they are particularly good in terms of entertainment and creative/artistic sites.

Considering the customer journey

When deciding how to use video on a website, the most important consideration should be in terms of the customer journey. Different media types, including video, should be used in a way that enhances and supports the journey of the customer; this includes everything from the moment they reach the website to the moment they decide to leave.

Where web presenters are useful

Web presenters/video spokesperson videos are a great example of the use of video technology to support the customer journey. The most common use of web presenters is to welcome and introduce visitors to a site and to present a quick call to action (with the aim of reducing the percentage of visitors who bounce off the website). However, a video spokesperson can be used in more informational or instructional roles (e.g. to explain to a visitor how to use a website).

video spokesperson

Web presenter placement generally takes place after the design of the website. It is rarely the case the websites are designed with a web presenter in mind. therefore we always have to consider the most effective placement of presenters, to avoid interfering with other elements of the web page.

web presenter

Technical issues with integrating video into website design

The difficulty with integrated video, e.g. as a background, is that the performance of the video (and therefore the visitor experience) is dependent on the quality of the user’s Internet connection. Poor connection (or poor hosting) can cause issues with page load speed, causing the video to run less than smoothly.

Website design very much determines technical performance. Culturally, designers don’t see page load speed as their problem, but the fact is, a website that has been designed without consideration of performance, will always be slower than a model that has.

The goal then is to capture the imagination of web visitors without hosting content on your web page (e.g. large file size image/video) which slow down the performance of the page to avoid damaging visitors’ experience of your website.

Can you suggest any good examples of websites that use video to enhance a page?

MWP are a video strategy, production and marketing company with a focus on delivering measurable results.

§ If you would like to learn more or just have an informal discussion over a coffee, then just send us a note. We'd love to hear from you...

Your Name (required)

Your Email (required)

Your Message

One thought on “How web video can enhance webpage layout

  1. Michael

    I agree videos are an excellent feature to have on a website and like your examples. It gave me something to really think about to add to my website. Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>