Strategic Insights – We’ve Got Ideas

As someone who works on the web on a daily basis, I know I’m supposed to affect an aloof, jaded attitude towards the eye-candy aspect of the web.  A sort of “been there, done that” vibe.  I should probably be saying “Sure, that’s a nice example of a fully interactive user-defined multimedia interface – if you like that sort of thing.”  The sad fact is, more often I’m like an ADHD kid off his medication – easily distracted by quick movements or something shiny.  I still find myself fixated on even the simple aspects of online animation – repeatedly clicking on drop-down menu navigations while chanting softly “menu goes up, menu goes down…”

Surely there can not be a more quintessential example of a cheesy animated .gif than the infamous bouncing ball.

But because of this fascination with online animation, over the years, I have tried to keep up-to-date with the latest technologies and techniques for creating animations for the web.  Years ago, options were limited.  Of course there were animated .gif files, but as the digital equivalent of flip-books, they were inherently restrictive and not especially interactive.  Or you could work with java applets, but those involved an unfamiliar programming language to learn, the cpu requirements were often unrealistic (for the time), the viewer needed the correct version of java on their machine, etc.  The results for java were fairly hit or miss.

For easy web animations, Macromedia Flash (later bought by Adobe) was pretty much the only game in town. Used primarily for simple animations based on motion tweens, Flash was easy to learn, didn’t require a heavy-duty processor and was widely supported even in its early days.  Flash enjoyed quite a heydey as the default for online animation and quickly and continually expanded its capabilities to become an object-oriented programming environment capable of complex animations, pulling dynamic content from external sources, video and audio playback, 3D animation, etc.  For a while, there was a trend for building out entire websites completely in Flash, full of motion and interaction and shiny bits and baubles.  Needless to say, I fell in love with it and used Flash at every opportunity for several years.

Then came the advent of three little letters which caused me to question my Flash fixation – SEO.  Google and other search engines came on strong and suddenly everyone was concerned about Search Engine Optimization – where does my site rank?  Flash is strong in many areas, but a core weakness has always been that the content inside flash apps is largely inaccessible to Search Engine Robots.  So, with few exceptions, the entire body of content on full Flash websites is basically invisible to Search Engines.

Now, there had been an alternative to Flash that had been quietly simmering in the background that suddenly seemed a lot more appealing – javascript animation (not to be confused with java applets – I never understood why the two were named so similarly when they had nothing in common).  Several competing and cooperative javascript libraries appeared on the scene, which allowed web developers to take standard SEO accessible HTML content and animate it using client-side javascript code.  Some of the early javascript libraries were MooTools, Scriptaculous, and Prototype.  I used each of these for various projects without favoring any of them.  There were some cross-browser issues, but for the most part, I was able to achieve simple animation effects with relative ease and without sacrificing SEO.

Then I happened upon jQuery and fell in love all over again.  The jquery javascript framework was lightweight and easy to code for.  It has an ungodly amount of developers providing open source examples and tutorials and more extensibility plug-ins than you can shake a stick at.  I was up and running and animating within a matter of minutes – all while maintaining SEO friendly site content.  jQuery has become my defacto javascript animation tool – I use it for accordions and tabs for better organization of page content, slideshows for product galleries, drawers for hiding and showing page elements, navigation dropdowns, etc.  And these applications just scratch the surface of its capabilities.

Now, to be fair, there are a number of things that jQuery – or any javascript library –  isn’t great at and Flash still takes the prize.  Javascript animation is generally fairly simple in nature and is more often used for User Interface elements rather than complex, image heavy animations.  There are definitely instances when one technology is a better fit than the other.  Still, there are areas of overlap that used to be dominated by flash animation and now can be handled rather easily by jQuery.  Check out the following comparisons as offered by DLL at LogicPool (http://logicpool.com/archives/30).

The Pros & Cons of using Flash vs Javascript:

When to use Flash vs Javascript:

The available applications for  jQuery are growing daily and I look at it as in being in an adolescent stage of development, much as Flash was when it was primarily used for tweening animations.  Given another year or two, jQuery will certainly gain more ground and expand its capabilities.  Flash will likely always have its place, but even now there are jQuery scripts being used to control flash apps. (Has the student become the master?)

Designers, developers, end-users – what do you think?  Has Flash had it’s time in the sun? Are the growing capabilities of javascript animation the better alternative and will they eventually be advanced enough to overthrow Flash as the dominating force in online animation?  Or should we relegate javascript animation to niche User Interface elements and stick to Flash for the major eye-candy?

I’ll be eagerly awaiting your response.  In the meantime… (menu goes up, menu goes down, menu goes up…)

Chris Griffin
Assoc Creative Director
Strategic Insights