Why, when and how to use video and animation on your website

The use of moving media (videos and animation) is a tricky issue in digital sustainability. 

The basic problem is this:

• Sustainably designed websites should be low weight, optimised, efficient and engaging, without being joyless and dull (unless that’s the idea). They should tell stories and/or provide solutions to problems.
• When behaviour change and alternative ways of living, working and consuming are being encouraged, storytelling is essential. Effective and engaging storytelling can be enhanced with motion, animation and video.
• Anything that is animated or moves on a site means higher data transfer, more storage use and energy cost than an alternative static element.

Balancing the cost and effectiveness of moving media is a tightrope walk. Video and animation has its place in digital design but what is that place and how best to implement it?

I posed this question to our design and development teams at Wholegrain who weighed in with their thoughts. Hopefully their ideas will leave you reeling. (I promise this is the only video format pun in the article)

Video is everywhere online. Big tech lying about engagement metrics might have played its part in this. In spite of this, the use of videos and animation needs careful consideration and justification. 

If you try to find what constitutes justification, the answer is often “it depends”. So far, so illuminating. In the absence of any solid metrics or definitive answer, we can view the issue through a user centric and digital sustainability lens. 

First up, consider the branding of the site in question. Motion and video should be relevant to the look and feel of your site. From a branding point of view a static digital presence might help you stand out from an animated and attention seeking crowd. From a user point of view, animated elements on an informational site like gov.uk could be distracting.

What about from a digital sustainability point of view?

The “Handbook of Sustainable Design for Digital Services” offers some guidance here. They say that “videos and animations only be used when they add value to the user”. If the message can be conveyed in an engaging, accessible way in a static format, this should be prioritised. You can remove videos that are “not useful for understanding the service”. While I broadly agree, this may be too much of a hardline.

User research is a key part of this. Adding video explainers to a site won’t work if the audience isn’t likely to engage with them. You risk adding to the load time and carbon footprint of your site without increased engagement. This would make the digital sustainability gods unhappy. Not to mention your impatient users. 

Audience demographics and subject matter play a big role here too. Friends of Wholegrain, Earth Minutes, deliver youth focussed climate communications. They will tell you that younger, digitally native users are more engaged with video and interactive media. I (a 40-something-year-old man) get my sustainability truth bombs from BlueSky but my 16 year old niece is more likely to get them from TikTok.

Essentially, video and animation can be justified where value is added,purpose is driven, ethical conversions are improved and behaviours are more robustly changed for the better.. 

What next?

Start by respecting your user’s choices. Animations should respect the accessibility decisions of a user’s browser. Your site code shouldn’t force animations when a user has “reduce animations” settings in place. For videos, autoplay tends to be a no-no from a user and sustainability point of view. There can be exceptions to this which I’ll detail later in the article.

Wholegrain sites put the user in charge of whether they see a video or not. Our Standard Operating Procedure is to initially replace a video player with a banner image or thumbnail with a play button over the top. The video only plays when explicitly requested by the user. This puts them in charge and reduces unnecessary data transfer. This C40 Cities page is a good example.

Accessibility considerations should be a foundational aspect not an afterthought. W3C suggests that you:

1. Start by understanding the needs of your users with disabilities.
2. Use this knowledge to inform the planning stage. Ensure that accessibility is embedded from the start rather than retrofitted at the end. 
3. This careful planning means provision for audio description, closed captions/subtitles and transcripts are included in the budget and process.
4. When the content is ready to go live on your website ensuring your media player is accessible to users.

Now all our users are firmly in control of their experience, it’s time to look at optimisation and efficiency of the content. I’ll approach this on a user experience basis, providing common use cases and how they might be more sustainable. 

You run a sustainability focussed citizens organisation. You want to help people apply political pressure to the Government on time sensitive issues. A key priority of the site is to help users to contact their MP to complain about a third runway at Heathrow.  

Solution

Content hierarchy, design and layout all play vital roles in helping users find key content on a web page. However a carefully crafted video snippet or animation can effectively attract a user’s attention. The increased data transfer and CO2 associated with an animation can be justified given the intended outcome. 

In this case format and file optimisation are key. As with images there are modern, more optimisable formats that can do a job here. While animated .gif files are everywhere online, there are smaller file formats that do the job more efficiently. 

Using a .mp4 or .webm in place of a .gif file can mean a file size saving of around 90%. You get the same effect with less storage and data transfer.

gif – 720kb

Optimised MP4 – 78kb

webm – 81kb

Now it’s just up to Rachel Reeves to listen to your users.  

You run a climate action group in the US opposing the government’s damaging policies. Your user research suggests that video is more likely to activate the younger members of your community. An engaged community will take vital action.

Solution

The majority of the time autoplay videos are neither useful nor sustainable. I’d argue that scenarios like the one above present exceptions.  In these cases it is vital to embed the autoplay videos in the right way.

As with any media on your site, files should be highly optimised. You could do this by: 

• Using video compression software to optimise the video codec to v265 rather than the less efficient v264
• Removing audio tracks for short snippets
• Reducing default resolution.

You can do this using online services such as CloudConvert or desktop software such as Handbrake.

You can see an example of highly optimised and low weight autoplay videos on this site https://osstudios.gg/ built by former Wholegrain developer, Josh. 

The climate crisis. It all seems a little bleak doesn’t it? Except that there are joyful, positive and practical solutions that exist right now. They just need a little bit of love and promotion. Your website wants to do just that and some playful animation is just the thing to bring the right tone.

Solution

Modern CSS, HTML and lightweight JS mean that low weight animations are achievable. The options available are wide ranging.

You could use:

• CSS powered cross fade animation of multiple optimised images
• Playful CSS animation in place of a gif,
• javascript powered atmospherics or interactive animations.

There is a world of creativity available to you.

• Video and animation is more data and energy intensive than static web elements. They should be used carefully.

• Ideally video should only be used when other mediums can’t fully explain a concept or service and where value is added to the user. Defining this value can be tricky. 

• Planning for accessibility is key. If you do use video or animation it needs to be user led and accessible to all your users. 

• Where the use of video and animation can be justified make sure that you use highly optimised formats.