HTML5 made easy at Morrisons
What the hell is HTML5 and why do I care?
Got an animation to do that you just can’t do in Flash? Wonder why Chrome and Firefox started blocking SWF files? This sudden ditching of the much maligned file format has caused a scramble to convert everything to HTML5. Luckily there’s an easy way to create animations with HTML compliancy – Google Web Designer.
Most online banner advertising is created in Flash so this sudden move to HTML5 has created a big ripple in digital advertising. If you can picture headless chickens running around not knowing where they are going you would have a pretty good idea of what is going on.
Contracted and tasked by M-Digital (the digital arm of Morrisons) to lead the digital design team during this ‘revolution’ and oversee the migration process from Flash to HTML animation, I helped conduct a study programme with our subject being: Google Web Designer (GWD).
Why did we choose GWD?
I created a number of slick animated banners in Google Web Designer and after trialling the software and getting over some of it’s quirks it became apparent that there is huge potential in this Beta programme. And obviously it was made by Google.
Google probably still have quite a bit of work to do before this package becomes certified. It did take considerable willpower to get results, the programme suffers from a clunky non-designer oriented interface and outputs some ridiculously large file-size outputs – much like Adobe Edge, but if you can overcome this the output animations look slicker and ran smoother than SWF’s.
But what if you can only use Flash?
Ad servers are using a conversion process to convert their clients SWF to HTML. This is not going to carry on forever apparently. There is a slight issue with ghosting frames especially on handheld devices but it does seem to work and has given the industry some time to switch.
So how does an SWF file work?
Well basically it’s like a video file and it plays a sequence of frames kind of like ‘stills’. The big advantage of SWF file formats is the compression it uses. Files are created using Adobe Flash and quality settings are used to increase or decrease filesize which is necessary to produce assets for advertising purposes (low file sizes).
How do HTML5 animations work?
Every graphic object on the canvas is animated using code (html and jquery mostly). This means that instead of one ‘HTML5′ file output, Google Web Designer will output all the graphic assets and code snippets together in a folder – the execution file is the index.html file which ‘calls’ all these assets and snippets into play. There are no still frames and everything is ultra smooth because of this.
Common misconceptions about HTML5 animations
So people think “Hey it’s an html file so the animations must be a lot smaller than SWF files right?”. This is nonsense. The fact that you are storing all the assets uncompressed and on top of that, creating an entirely new HTML file with thousands of lines of code (which is often a lot larger than the assets combined), throws this assumption completely out of the water.
HTML5 file sizes are really big and wont go through ad servers!
This is fact. In our findings we discovered that our GWD HTML5 output file sizes were a lot bigger than SWF output sizes.
We did some 300×600 pixel SWF banners in Flash that were output to 40kb, which is pretty much an industry standard flash banner file limit for most ad servers. We lovingly recreated this banner animated in Google Web Designer and we output an HTML file that was 93kb as well as combined image assets totalling another 53kb. Hey that’s 143kb! Over 100kb more than an SWF.
So how do HTML5 files get through ad servers exactly?!
Ok so this is a slight problem. A 93kb HTML file clearly will not get through most ad servers. So what Google ad servers are doing is putting a flat ‘end frame’ at the 40kb limit through first and then the rest of the assets go through as ‘polite loading’. Might look like the ad is fully loaded for a fraction of a second on load but it overcomes the impossible.
You can see it’s super smooth.