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.
More reads
HiP Infographics
Some of the many infographics we created for HiP Property, showing the state of ICOs and competitors. Complicated but fun these did really well in the campaigns we ran based around them.
Pantene ‘Make a swisssh’ hub
A vast online campaign aired across the Hearst network to promote Pantene, in conjunction with Cat Deeley. User uploaded content, games, a social hub…