I decided to go ahead replace the Flash header at the top with the Kwicks JavaScript version after I ironed out the kinks. The menu now works in IE and the whole width of the menu tabs is clickable.
The whole thing validates and is smaller than the original Flash version.
For the most part people tend to use a mix of JavaScript and Flash to construct visual site effects CSS and HTML can’t provide alone. However, with the advent of JavaScript libraries allowing easy access to JS based effects, the playing field has tipped to using one method or another. JS libraries are not without detractors; for example, “Why JavaScript libraries stink” points out that “1. Most libraries are bloated. The user may load a full library for effect, but in many cases the effect could be achieved in a few lines of code.” A valid point and I’ll leave the libraries debate open for now but remember that the Flash browser plug-in is not a built in component of any browser and cannot be customized to load only what is needed. All major browsers support JS natively and in recent months there has been a push to claim the JavaScript speed crown. Another reason to consider using only JS? The emerging mobile phone market. Even my now discontinued SGH-A717 runs JS.
The subject intensifies with the topic of SEO, search engine optimization. Flash only sites have long been the bane of SEO. Often only the top level of a Flash site will be indexed or worse. In an effort to index content a search engine will link directly to a .SWF. A user does get access the content but the direct link opens a distorted version of the site the designer intended. It would be pretty easy to write off Flash there but I made an interesting discovery recently, SWFaddress. It is worth noting that poorly implemented JS will also impede SEO but it is usually less of a factor.
Ultimately both Flash and JS are going to be around for awhile no matter what. Neither system easy trumps the other. How did I get on this topic? I picked up jQuery not long ago to see if I could replicate my Flash header in JS. I succeeded but found a much better implementation in Kwicks for JQuery.
A couple of notes about the above example. This plug-in is currently coded to expand the size of the list element rather than the link element. When the image is expanded only the original image size is selectable, although I might have screwed up the implementation. Also, compare the JS version above to the version at the top of my site. The JS version definitely feels smoother to me. The Kwicks jQuery version is about 220KB overall while the Flash Player loads to around a meg plus and a 80KB .SWF file.
For the animator in me Flash is the intuitive answer. I can load up Flash make a bunch of graphics and output an animation with a short turnaround, only have to do a minimal amount of scripting, and know it will look the same in every browser. As I move in-depth into web design, the answer quickly changes. Between the possible speed improvements, optimized SEO, and the promise of mobile development, JavaScript looks like a worthy time investment.
One major piece of advise for feature rich user interface development, plan out what you want then look around for similar implementations. Flash, JS or other, many ways of interacting with a website have already been developed and reinventing the wheel wastes time.
I thought I would post a small update while I’m around the scanner and do a little introduction. This is the main character from my film.
The Kid The pre-production is going slow and steady. I have completed designing the major portions of the film; the two main characters, the set, and the “look and feel.” The final step is to put together an animatic. In normal production there would a series of storyboards, as seen on many a Pixar DVD, but with a project this small I don’t need to produce as much conceptual artwork.
Example Storyboard With a larger project, and a larger team, more information has to be passed around so more conceptual work is needed to clarify the look of the film. As it is, all I need is a sketchbook and a spare few moments. Point of fact, the image to the left was drawn on the M train going to Brooklyn.
More updates to follow, stay tuned.
