HTML5 banner ad timelines and animation speeds
There is a lot of misunderstanding when it comes to the use of animation in display advertising. People are under the impression that faster is better, but in reality it is easy to make an animation so fast that the user can’t read the message. Conversely, a banner that is too long will be scrolled by before the user has had a chance to read the message or take action.
Match Duration to Placement
In Display ads that are distributed through standard placements (e.g. banners on websites), it is recommended to keep the length of your ad within 15 seconds or less. Retargeting ads however (display ads distributed after a user has already interacted with your brand online) are more effective at 10 seconds or less as the user already knows your brand.
Set Loops Deliberately
The ad networks allow up to three loops in the animation, after which the animation must hold on the last frame of the animation. Continuing animation after the message has been communicated only causes visual noise, stopping after 3 loops.
Time Each Moving Element Carefully
General Timing Guidelines for each element:
- The timing for an entrance of an element would typically be between 0.3s – 0.5s.
- A reveal of text would be anywhere between 0.4s – 0.8s.
- A pulse of the Call to Action would be longer, typically 1s – 1.5s per cycle. Studies have shown that very short animation can often look unnatural or even abrupt, whereas longer animation can distract from the message being portrayed.
Hold the Call to Action
The CTA must be fully visible and static for at least the last 3 seconds of the ad. HTML5 ads utilise CSS and JavaScript timing to lock a frame in all browsers.
Watch Your File Weight
More complex animations have larger file sizes. This is especially important for display banners, as most networks have a 150 KB initial load file size cap for standard banners. To combat this, it’s a good idea to limit the number of moving elements to 2-3 and use CSS transitions as much as possible, as JavaScript can add a lot of weight to a file. There is more on HTML 5 Ads at //thebannermen.com/banners/animated-ads/html5/.
It’s worth getting it right the first time and avoiding the need for further amends.