In the past we have experimented with flash banners for The FA, whose network of served sites are somewhat different to other media outlets. Now of course the industry has moved quickly to kill off, finally, ye olde but very successful flash banner format. So our new banner sets come in HTML5 using the rather good Adform HTML5 studio.
HTML5 banners come with a new set of problems but also opportunities. Not least of these is our familiarity and comfort with how Flash works and the differences between this and html. It is often forgotten where flash came from and why it came to prominence, as we are up to version X and Flash has come a long, long, way, not to mention gaining a really bad reputation along the way. Flash was a way to get designs and vector shapes viewing the same regardless of browser. More importantly still it was a way of embedding fonts from a designer’s machine into a banner or (The horror) a full-page splash screen. And it does this all efficiently – using only letters it needs and squeezing those graphics down those old 56k dial-up connections. Like their ancestor the gif, flash has been a victim of its own success and its origins have been forgotten.
One of the successes of flash is file size. And here lies our first problem. HTML5 Canvas needs over 100kb of JavaScript library files to run before we create anything else. Part of the learning curve was trying to get around loading these externally from a CDN. Standard libraries, we have found, don’t now count towards that final file size figure. But fonts do…
Just as with html, fonts are used externally, or as is usually the case sourced directly from the user’s machine. On websites we generally load in that font from TypeKit or GoogleFonts, but this is not an option with HTML5 banners due to file size once again – a font file is generally at least 50k when the spec is 60k in total. So with banners we either convert to shapes or as of old use standard machine-loaded fonts. Either way the shifting around of fonts on various machines is really exaggerated in small banner spaces, in a way that is not noticed on websites.
But there are some as yet untapped advantages to html5 banners. Firstly it could require less sizing, as just like websites html5 banners can be set to responsive width. In theory one banner could fit all sizes. Secondly we can do more and more dynamic things based on databases and JavaScript. This was always possible with flash but not always within the confines of the media serve.
ps. The below images are ye olde gif versions.