Ad Horrors, Now Via HTML5!

As a web designer and developer, the more I think about it, the more I fear HTML5/CSS3-based animations.

The biggest benefit people see from this is the option to not have to resort to Flash, Silverlight, or any other 3rd-party plugin to create animations on a web site.

However, I believe the farther we get with our HTML5 animation advancements, the quicker we get to experience more intrusive advertisements.

How many times have you gone to a webpage and seen it completely covered by a Flash advertisement you had to click through to continue reading the full site? Interactive ads are getting more creative and harder to avoid. But, for Flash-based ads, there are browser plugins that can block the ads from running.

How do you handle blocking intrusive ads built with HTML5?

In a previous note, I showed my results converting a Flash-based animation to HTML5 using Adobe Wallaby. Not terrible, but it really isn’t ready for commercial use. Google now has their own conversion tool, “Swiffy.”

Not surprising at all, Google’s test page has two examples of… wait for it… advertisements! Yes, freshly converted advertisements from Flash to HTML5/CSS3. Not only are these types of ads coming, but Google’s assisting in streamlining the process for everyone.

And I’m not just talking about the “professional” ads featured on Google’s Swiffy test pages. Imagine a world full of half-screen ads that are similar in function to the CSS Nyan Cat Demo by Michal Budzynski.

The horror!

Speaking of “professional horrors,” while we (ahem) benefit from these advancements by not having to worry about 3rd-party plugins, the tradeoff is that we now have to use horrendous, ugly code just for a simple advertisement. With the Nyan Cat demo, Michal’s put a note on the page saying the animation uses “81 DOM elements, 688 lines of pure CSS and one JavaScript function for looping audio.” That’s quite a lot of code for an infinitely repeating, half-second of animation.

Let’s take one of Google’s ads for another example. Google is currently using an iframe to show the ad (which, I assume, will be Google’s delivery method through AdSense if/when they start doing so), located here. Go ahead and view the source.

The good news is the page only uses 17 lines of code.

The bad news is that line 8 is a JavaScript command for “swiffyobject” that spans to pages. That code can only be properly read by the Swiffy runtime .js file in line 6.

I guess you would disable JavaScript to easily block that content. But, that would only help blocking Swiffy-created ads, not ones that are (shudder) coded inline with the content. Plus, common… who’s really going to disable JavaScript on their browser just to avoid ads? Do you like having 90% of the Internet not work?

At least with the annoying Flash ads, they only took up a few lines of code and were easy to block. Now, the future is looking scary. If this is the future, I want interactive ads to stay using Flash.

Brace yourselves…