Animating the Web: Advantages of Using jQuery on the Web Instead of Flash

Building anything on the Web that was animated and/or interactive used to mean utilizing Adobe Flash, but here in 2010 and beyond, there are some cool tools to replicate those interactive developments without Flash while simultaneously offering some additional advantages.

jQuery is a free and open JavaScript library that is ever-evolving. It allows you to do some amazing things to make your web sites and individual landing pages come alive. If you use the web, you’ve probably already experienced its power at sites like Google, digg, CBS, Netflix, and even at our very own iContact. Some of the more simple actions jQuery offers include hiding and revealing elements (text, images, etc), expanding and contracting elements and horizontal or vertical scrolling elements, to name a few.

Sure, each of these things can already be done gracefully within Adobe’s Flash program, but with jQuery, you’ve got a couple of really cool advantages:

No Extra Licenses/Program – Adobe Flash means you have to own the Flash desktop application to create any sort of Flash piece. But, with jQuery you can build and design using your existing tools you already use to build your website.

Search Engine Optimized – While search engines are getting better at being able to read content within some Flash, everything within jQuery is setup as text, meaning it is completely readable to all the search engines spidering content out there, exposing all your keyword-rich content.

Agile – Another advantage of jQuery being setup as all text, is that it makes it very easy and quick to edit its content. Flash means opening its program, adjusting the content, exporting the file and uploading. With jQuery, a typo is a matter of editing the text file and uploading. Expanding text can be as simple as editing the file and possibly some CSS.

Mobile Devices – Any mobile device whose web browser supports JavaScript should run jQuery. A lot of mobile devices don’t run Flash at all. Apple has flat out said they’re not supporting Flash, meaning your customers on an iPad, iPhone or iPod touch won’t see your Flash web elements.

Graceful Degradation – Even if someone has JavaScript disabled, or they’re using a web browser that doesn’t support JavaScript, most jQuery can be setup so the user can still read the content being controlled normally by jQuery.

Open Standard – It’s nice to support open standards. The jQuery project is open source, and is part of the Software Freedom Conservancy, a non-profit supporting open source software. Flash, on the other hand, is a closed for-profit system, owned by Adobe. While open source doesn’t mean better, it does mean more people have their hands in developing, fixing and improving the product, all in the name of a better product – not a better profit.

Another thing that made jQuery so easy for me to dive into and embrace was that as a web developer/designer, I was already familiar with part of the way it works. The jQuery library utilizes IDs and classes that are part of CSS. To target specific elements on a page, you use the same class and/or id selectors CSS users already know and use.

A good place to get started with jQuery is by reviewing their tutorials page.

While this blog post is meant as an introduction to what jQuery is, there is a lot more to cover, especially about specific implementations. Stay tuned for more posts about jQuery, focusing on real world uses that can wow your website’s users, while simultaneously making it accessible to search engines, mobile platforms and much more.