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

This article is very outdated, I orginally created it because I was looking for a nitch market where I could quicky create webside ads for clients and a nice cash flow for myself. The Interactive Advertising Bureau (IAB) published display and mobile guidelines for advertisers and ad creators as a starting point to build scalable ad experiences. Today the (IAB) website no longer exits, banner and side ads no longer litter the web (a good thing) and most web adverting is browser or social media based. But at the time I had a desire to test drive Adobe Animate, so I created this Animate vs. Flash vs. HTML5 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 Bitmap 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.

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 several filters added in an attempt to match the PNG image... not so cool! 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

For looks alone complicated image and text effects are still best created in photoshop, but SVG images can be alot smaller and repurposed again and again with impressive filter effect combinations easily applied to different text or image elements. These effects can be added to images, text and SVG graphics through filters applied in CSS or the SVG document itself. CSS filters like (blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia) are most often applied to images through the css filter property. SVG filters are usually applied within an SVG document to text or vector like graphics, impressive examples can be seen in Dirk Weber's article for Smashing Magazine.

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

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.