• advertising / sales support / broadcast & web graphics / corporate communications & training

Classic Flash Ad vs. HTML5/Canvas vs. HTML5/CSS3 Animation.

The demand for HTML5 ads with seamless operations across desktop and mobile is on the rise... or so said the IAB website. What I was looking for was a nitch market where I could quicky create ads for clients and a nice cash flow for myself. The Interactive Advertising Bureau (IAB) has published display and mobile guidelines for advertisers and ad creators as a starting point to build scalable ad experiences. The IAB guidelines (download here) and my desire to test drive Adobe Animate CC was my starting point for the for this Flash vs. HTML Canvas comparsion. Then I considered the browser support for HTML5/Canvas versus HTML5/CSS Animation and hand coded a version of the same ad that uses no javascript only CSS. To start this conversation I also needed to compare PNG images and SVG images an important component of any ad that will only become more important in the future. These results are submited for your consideration...

Scaleable Vector Graphic (SVG) vs. Bitmap (PNG)

Scaleable Vector Graphics are smaller in size and smoothly scale to any size... so for anything other than a picture (like logos) or plain advertising text (Headlines, Sub-Heads, Slogans) SVG lets you pick any typeface (without loading a typeface) and scale to jumbo monitor sizes. In the future anyone working at a professional level will use SVG, plus for pictures srcset/sizes HTML markup along with multiple image sizes for ad creation.

              

SVG   

PNG   

File  Size 

16.9 KB

27.9 KB

Scalability  

Yes  

No   

Effects  

Yes  

No   

Appearence  

Same  

Same  

Browser Support

Loser   

Winner  

Appearence and Scaleability Looking Deeper

The SVG We're Organized Logo on white looks good and automatically scales up or down to fit parent container... very cool. The exact same SVG file loaded on top of a grey container with a glow filter added... still cool. Not as controllable and easy to use at the tools we know in Photoshop... but remember it scales! So like most things better depends on the application.

Creating

SVG images are coordinates written in any text editor and saved with the .svg extention. However, if SVG images go beyond simple shapes or supplied fonts, creating images by writing coordinates is very hard if not impossible. You will want to create your SVG images with a vector editing program like Illustrator and save in the SVG format.

Editing and Effects

Effects can be added to images, text and SVG graphics through filters applied in CSS or the SVG document itself. Filters applied through the CSS stylesheet, ie. (blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia) can be quickly applied or changed through the css filter property. Filters can also be applied within the SVG document itself and combined to create truly impressive effects. Examples can be seen in Dirk Weber's article for Smashing Magazine. Does Illustrator have an SVG/effects/filters/glow button with convenient slider to adjust intensity... No it does not! It has a code snippit entry box that you can save and reuse.

SVG Graphics with no filters

Logo SVG No Effects

SVG Graphic with filters

Logo SVG with Glow

PNG Bitmap

Logo PNG

Classic Flash Ad vs. HTML5 Canvas vs. HTML5 CSS3 Animation.

                                       

Flash AD       

HTML5 Canvas

HTML5 Animation

File Size      

36.8 KB    

110 KB    

84.4 KB    

Scalability  

Yes  

No   

No  

Effects  

Yes  

No  

No  

Appearence  

Same  

Same  

Same  

Browser Support

Loser     

Winner  

Winner  

HTML5/Flash Ad

Flash is great for creating high impact ads with lots of movement then publishing in an all inclustive small web file that loads/preloads quickly and whose design can't be busted by user browser settings like font type/size or zoom. Thats why Flash ruled the web for decades... but Flash is a closed, proprietary system on a web that deserves open standards. Its is also one of the most widely distributed pieces of software in the world, and as such, the target of malicious hackers. Adobe responds with Flash Player security patches and upgrades, but it doesn’t seem to be enough. On top of the security issues flash is a resource-heavy battery suck that search engines and your SEO does not like at all. So even through flash has been heavily used especially in advertising its days are numbered.

 

HTML5/Canvas Ad Generated with Adobe Animate CC

Abobe Flash is now Adobe Animate the same timeline interface, but you can choose to power animation and interactivity with flashes actionscript or javascript. Look at the table above, the Flash ad is less that half the file size of the HTML5/Canvas, plus flash images and code are all included in one (.swf) file requiring fewer server calls. HTML5/Canvas uses javascript to write text elements that are rendered as images by the browser and thus unable to be seen by search engines and SEO, just like flash... so on file size alone flash should be the kickass winner! How is HTML5 an improvement? Because HTML5 sits within the browser framework itself, it can rely on the browser’s cache to load already-visited banners and other content instead of having to load it separately each time. That, alone, is a gigantic improvement over Flash. Additionally, HTML5 allows load sharing across various libraries of data that aren’t part of the original download.

 

HTML5/CSS3 Animation Hand Coded

No Javascript at all... only CSS Animation and HTML5. I originally used browser text (Arial Font), but this scaled only with css breakpoints and the design could be busted with the browser's text zoom button. Than I converted all the text to scaleable vector graphics (SVG) and used the Roboto font and gained infinitely smooth scaleing the ability to use any font I choose for the design. Search engines don't read bitmap or SVG images, so alt and title discriptions are a must, this is just like flash.

 

Please let me know what you think...