A great HTML5 banner isn’t enough on its own to guarantee success. The design and copy of the banner must be of high quality as well. Here are some of the best practices for the design and copy of HTML5 banner ads.

Keep Copy Short

We would recommend keeping the headline copy for your HTML5 banner ad brief and to the point by keeping it to a maximum of 8 words. The viewer of your online banner ad is passing by and is unlikely to read all of the copy in great detail therefore every word is important and if a word is not essential to the message then it could slow down the viewer’s understanding of the message or possibly be ignored completely.

Lead With One Focal Point

Keep to one focal point per banner. This could be a product, a person or even a large number. A banner that contains too many images can give the impression that you are trying to communicate too much and therefore nothing at all.

Treat the CTA Carefully

Place the CTA button in the final frame of the animation, at full opacity and with sufficient contrast to the rest of the animation to be clearly visible for the viewer to act. For more on this, take a look at thebannermen.com/banners/animated-ads/html5.

Stay Brand-Consistent Across Sizes

When creating ads to be used in multiple banner sizes it is very important to keep the font, colour and logo position the same for all versions of the ad. This will stop the ads from looking like a completely different campaign. HTML 5 Ads is worth getting right.

Watch Your File Weight

Also bear in mind the file weight of your banners as heavy files can slow down loading on mobile. Typically try to keep any animated banners below 150KB and test on a number of different mobile connections including on slower connections to check for any loading issues.

Check Your Fallback Frame

Remember that many environments won’t be able to play animation, so your static fallback frame must be fully functional and work as a complete ad. uk/){rel=”nofollow”} including issues of clarity and honesty that will also apply to static frames, see the ASA’s website. com/banners/animated-ads/html5/).

Making good creative decisions at the brief stage will save time in the long run in revising less effective work.