It's interesting to look back on Jakob Nielson's 1999 list of 'Who Commits The "Top Ten Mistakes" of Web Design?'.
While most issues are still entirely relevant – frames, slow download times, orphaned pages – others we've moved on from. In 2016, looping animation is no longer considered an automatic usability fail.
In recent years, animation appeared in website design as interactive buttons, followed by menus. The latest trend is to employ moving backgrounds to create interest and prolong audience visits.
However, companies must be careful in their efforts to apply these features to their sites – there are a number of pitfalls that can decrease user satisfaction and slow operations. Let's explore websites that have been successful with video backgrounds and why they work.
Mobile-Friendly Nerisson
When building a website, it is vital to consider what it will look like on a mobile device. Mobile operating systems have come a long way and are able to support a large number of features.
However, phones still do not have the capability to host background video properly. In some cases, blank play buttons appear, while other site backgrounds will not load at all. Rather than attempt to use video background on mobile devices and risk unfortunate results, it is wise to accommodate each mode of engagement differently.
[caption id="attachment_141757" align="aligncenter" width="630"]
Website: http://www.lighthousebrewing.com/[/caption]
Nerisson executes the transition from desktop to mobile flawlessly. Their website design contains subtle movement that creates a better sense of engagement. When users move to mobile devices, these animations are replaced with still images, thereby maintaining the integrity of the site.
Using JavaScript, your site developer can access the user-agent settings and remove the video from all iOS and Android devices.
Clearly Stated Y.CO
It is important to consider how legible text placed on top of background films will be. Choose colors that blend with the overall site design but do not appear in the video proper. Feature these tones in fonts that need to be read over moving images, as the contrast will make them readable.
If there are no colors fitting this description, employ a text shadow box to distinguish writing from the background images. Y.CO's website stands as a great example of this technique in action. Their videos are clean and engaging, while writing is clear and legible.
[caption id="attachment_141758" align="aligncenter" width="871"]
Clearly Stated Y.CO[/caption]
The Y.CO website also demonstrates that dramatic design choices are not always necessary to achieve contrast. By employing bold, uppercase white letters, they achieve a sophisticated and clean look while clearly conveying the necessary information.
Ease-of-use is a major contributing factor in audience satisfaction, and clear, highly-legible text is central to this.
Minimalist EagleClean
It is sometimes tempting to go overboard with new trends. Designers must keep the given brand identity in mind and add elements that make sense for the specific company. Some sites are using video backgrounds beautifully, while others do too much. EagleClean has achieved a balance between engagement and subtlety.
The EagleClean website features a black screen with white and yellow writing. A yellow-gloved hand emerges from the lower right to 'spot clean' the inside of the user's screen. The hand then retracts and you don't see it on the homepage again. This maneuver adds a touch of humor and interest to the page, without breaking the brand identity. One fact which draws our attention is that this great site with awesome effect has been built in Flash which is not good for search engines.
As EagleClean is a cleaning service, a straightforward and clear website is fitting. The company successfully added video without detracting from its purpose or personality.
If continuous video makes sense for your company's website, embrace it. Media-rich websites tend to increase the time users stay on the page.
However, steer clear of shaky footage or too many quick cuts. It is important to enhance the user experience without distracting from the statement your site makes.
Continue reading %The Movement Towards Motion in Website Backgrounds%