A Closer Look at Choosing Between Flash and jQuery

by in Development on 4th Aug 2010 · Comments

Whether HTML5 will beat Flash or not, it has been one of the most frequently discussed topics in the web design community lately. In the heat of this debate another popular opposition, Flash vs. JavaScript, was somewhat lost. It’s rather paradoxical, taking into account that HTML5 is still in the draft version (even though a working one) and JavaScript, particularly its most popular library jQuery, is a complete and active platform which is widely used in modern web construction.

A Closer Look at Choosing Between Flash and jQuery


In other words, while HTML5, with its innovative and potentially dangerous for Flash "video" and "canvas" elements, is a sleeping menace against Flash (in some areas), jQuery is its quite real and pushing competitor. In this article we would like to look at the current capabilities of both Flash and jQuery and define situations when each of these platforms should be used.

You might have seen lots of articles on web design blogs showing examples of how jQuery can actually replace Flash. However, we prefer to avoid the "vs" perspective as we believe it's not the right angle to look at these platforms from. What would your reaction be if you saw an article on a random blog discussing 10 ways to replace a spoon with a fork? Exactly. Flash has no equals in making rich multimedia websites that involve a user into a whole interactive experience, just like a movie or a game does.

Instead of trying to replace Flash, it’s more effective, in our opinion, to use jQuery in a completely different niche, like creating web applications that are a balance of visual attractiveness and functionality.

Flash or jQuery? Decision Factors

Obviously, the major factors predetermining which tool should be used in the development of a particular website are the purpose of the site and the audience it’s targeted to. Is it a personal portfolio or online store that you are going to create? Is this information, a service or pure entertainment your visitors will come to the site for? After these questions are answered, the idea of what kind of design this should be and thus, what tools are best to achieve it, will take shape in your mind.

Here are some more specific factors you might consider in further evaluation:

How Much Interactivity?

Evaluate the importance of interaction features on the site. Enhanced interactivity is typical of websites with a relatively low level of information consumption, such as promotional and advertising websites, product presentations, music clips, exhibitions of professional skills etc.

These websites rarely offer more than two informational appeals to the users (mostly the name of the promotion object and where it can be obtained), and focus mainly on delivering an enjoyable website usage experience. Among the common elements that can be seen on sites of this type are games, controllable 3D objects, advanced animations and transitions.

When the task is to engage the users via any sort of entertaining experience relying heavily on interaction, Flash, undoubtedly, offers far more options, than JavaScript. jQuery, in its turn, is a perfect solution to give a text-based website some moderate interactivity and subtle dynamics. This is what it’s best to use for, but not limited to. Sleek visual feedback on mouse hovers and clicks and a variety of smooth animation effects created while using jQuery can be vivifying water for HTML/CSS-based sites.

Duchy Originals
Utilizing a nifty jQuery carousel the designers of the Duchy Originals websites managed to display content compactly yet attractively to the users.

Duchy Originals

SoBe Reskin Yourself
Promoting the new bottle design of SoBe beverage, this website brings an amusing interactive experience by engaging the users in taking pictures of themselves and apply digital tattoos. Good illustration of using Flash for an online advertising campaign.

Sobe

How Much Media?

The choice of the platform in large measure depends on how much video and audio content your site is supposed to contain. While there is no big difference in how Flash and jQuery treat photos and images, it significantly matters which base to choose when it comes to work with audio and video content. Although Flash is not a single proprietor of web video playback anymore, it is still the most accessible way to embed and watch video on the web.

A user needs to have Flash Player installed for smooth video playback in all major browsers. HTML5’s most valuable feature, video tag, becomes a decent alternative to Flash. In some respects it simplifies the process of adding video to a site – just wrap the source of the video file, including its width and height parameters in video tag and the job is done. Especially when integrated with jQuery or JavaScript, HTML5 is a powerful web video delivery format. However, there is a serious “but” coming round the corner: in spite of Flash Player, HTML5 video codecs are not standardized yet and it may take several years before HTML5 video is smoothly supported by all major web browsers without developers having to use several codecs for each browser when making a video element.

The situation is similar with using audio on websites and web apps. Therefore, if a site is centered on video as a crucial design element or is intended to contain loads of video and audio files, it’s recommended to use Flash in this case. In case a site supposes some moderate use of video and audio, there is no need to make it entirely Flash: combining Flash for video/audio player implementation and jQuery for the rest of the site design is an optimal solution.

We're all fans
As mentioned above, rich multimedia requires Flash and We’re All Fans website is a proof of this. Here Flash perfectly meets the needs of the interesting social-oriented concept the site represents.

Weareallfans

High Point Village
The High Point Village website includes nimble jQuery tooltips, popups and sliders, but uses Flash for rendering video – a well-done combo!

High Point Village

How Much Data?

The type of a site in terms of the amount of copy presented is one of the main factors determining whether to use Flash or jQuery. For text-based websites that are focused on information consumption jQuery would be a proper option, as it can handle the layout with a large amount of text that needs to change better than Flash. With jQuery you can add the aforesaid unobtrusive interactivity to a text-based website without harming its readability (quite on the contrary, enhancing it!) and information capacity.

It’s not a secret that Flash is best to use for multimedia websites, geared at entertaining and impressing the audience with vast visual and audio effects and deep interaction. This standard is still adequate to stick to. Although Flash gives wide opportunities in work with typography, you may have difficulty controlling the content when there is more than one paragraph of text displayed.

We are Hunted
Being an online music chart, We Are Hunted contains a large amount of frequently updated data, including video, audio and text, so the use of JavaScript is totally justified here.

We are Hunted

Grip Limited
The website of Grip Limited may seem confusing at first sight, but it takes a moment to see and evaluate the beauty and sophistication this site is done with. Take the typography alone! By implementing bidirectional navigation the designers found a brilliant way to utilize the massive amount of content. Draggable area, along with the multi-column layout, creates a feel as if the site is watched on iPhone or iPad.

Grip Limited

How Much Polish?

Today both Flash and HTML+jQuery combo give a designer enough power to create an outstanding visual part of a website design, especially now that HTML5 has solved the problem of rounded corners by adding appropriate properties in CSS. However, the difference still exists, not in the number of capabilities, but rather in time-consumption.

Thus, if the design is supposed to have multitude gradients, layered elements, shadows, unconventional fonts and gradients, Flash would be much easier, thus quicker to develop. You can achieve pretty much the same result using HTML and JavaScript, but definitely more time and, possibly, nerves are required for this.

Alex Buga
No doubt, Alex Buga’s website is out-of-the box. As you see, not only does it have plenty of rounded corners and layers, but it also features a lot of animated elements, which makes it hard to believe there is no Flash here.

Alexbuga

Casper Faassen
Utilizing photography and Flash transition effects on his personal websites, Casper Faassen lets the visitors to his portfolio take a virtual walk around his artistic studio. The site creates an inviting laid-back tone and communicates the artist’s personal brand wonderfully. Probably there is nothing in this design that JavaScript wouldn’t cope with, but from the time consumption angle, Flash is definitely a much more permissive tool in this case.

Casper Faassen

The Budget and Other Factors

Surely, there are many more factors influencing the choice of a platform to build a site, widget or application. For instance, among the primary things to consider is the tool’s resource intensiveness: it takes solid knowledge to create miracles with HTML, CSS and Javascript and it takes solid knowledge plus the purchase of Adobe Flash software to create tools and websites with Flash. Hence, whether you are a designer or a client, think about some intellectual and financial investment you are willing and ready to put in the project. Among other decision factors are the Section 508 compliance (HTML , along with CSS and JS, seems to be better at creating and maintaining online content that meets Section 508) and file size (Flash has potentially larger file size than HTML + JavaScript version of a site). Sometimes it also matters how important the speed of load is.

In most cases Flash loads the entire content before displaying it (there are techniques that enable the loading of content on a Flash site progressively, but this requires advanced skills and effort to develop), while HTML+jQuery based sites allow gradual loading progress. So choosing Flash for a king-size website you, in some respect, play with the user’s patience. Last, but not least: Flash does not work on iPhone and iPad. That would be a too obvious thing to mention, but for the new iPhone Packager feature announced in Adobe Flash CS5, which may fool those who for some reason missed the whole buzz on this topic. In short, despite HTML and JavaScript, Flash is currently an outcast both at the App Store and Apple’s mobile Internet segment, which makes the process of platform choice in this case simple to the limit.

FlashMoto CMS Photo Portfolio
FlashMoto CMS implements progressive functionality in their flash website templates, which presupposes ability to preload media assets during the site loading stage. This feature significantly enhances the loading speed of a flash website.

Flashmoto

Jacob O'Neal
On the personal portfolio of the designer Jacob O’Neal jQuery works perfectly for text replacement, navigation and visual experience. The site is dynamic, beautiful and easy to scan through – great work!

Jacob Oneal

Showcase of jQuery & Flash Sites

Below you can find some excellent website designs, showing both platforms at their best.

jQuery Websites

Glasshouse
The portfolio of South African-based studio Glasshouse has been featured in many web design showcases, and it is definitely worth mentioning on the list of cool jQuery websites.

Glasshouse

Thomas Birke
The website of the German photographer Thomas Birke is notable for great use of jQuery in image gallery interface and navigation. The photo website looks sleek and elegant.

Thomas Birke

TLC
A unique approach to interactivity can be seen on TLC Lacrosee website: the header here changes dynamically when you hover the mouse over the site menu categories.

TLC

Scoundrels
The designers of Scoundrels’ website didn’t try to reinvent the wheel with some fancy animation, instead they’ve shown that even a simple rollover effect may result in a stylish and original website design, when done skillfully.

Scoundrels

Middlebury
The official website of the Middlebury College features a clever way to display content with a mouse-responsive strip where each colored stripe represents a story.

Middlebury

Fat-Man Collective
They say, there is nothing perfect, but the website of Fat-Man Collective is really close to being so. Spectacular use of jQuery and a little Flash in this one!

Fatman Collective

Pedro Figueras
On their website Pedro Figueras implements unconventional personalized navigation and a pile of interactive jQuery elements.

Pedro Figueras

Sibley/Peteet Design Austin
The portfolio of Sibley/Peteet design consultancy is surely worth your attention, especially the stunning thumbnail preview effect made with jQuery.

Spdaustin

Duplos by Ricardo Mestre
Spiced with cute illustration and smooth jQuery-powered animations, Rocardo Mestre's Duplos is a spectacular example of single-page website design.

Duplos

Life+Gear
This is a great example of jQuery capabilities in product details page design – a user can actually see flashlight’s functions in action right on the website. This is a proof concept developed by the design studio Digital-Telepathy for manufacturer of everyday-use products Life+Gear.

Life Gear

World of Merix jQuery
on the World of Merix Studio is used for the interactive background which is actually a draggable map displaying the company’s clients all over the world. Excellent job!

Merix

Riot Industries
The design portfolio of Phil Renaud is a wonderful combination of compact layout, beautiful visualization and nifty jQuery effect for image gallery presentation and navigation.

Riot

Appear
A polished design, where jQuery elements for lighting and navigation provide a neat and pleasant look and feel.

Appear

Condiment
A playable element added to the site of the creative communication agency Condiment by means of JavaScript makes this portfolio stand out against the background and provides an unusual and fun way to discover the company’s portfolio.

Condiment

Pixel Baecker
Here comes a cute website design where cartoon illustrations and jQuery animation do credit to the developers.

Pixel Baecker

Bonus: jQuery Experiments

Your World of Text
Love typing? Then you’ll love this experimental app more than anyone – basically it’s a limitless area where anyone can type anything without registration and authorization required. The experiment was built with Django and jQuery and works best in Google Chrome.

World of Text

Canopy
Another Chrome experiment that displays an interactive vector tree that grows infinitely. You can control the fractal zoomer with your keyboard, pressing certain keys to activate mutating/blooming, pause and create a new tree. Quite an interesting app made with jQuery, JavaScript and Canvas.

Canopy

Flash Websites

Vicente Diaz Penas Portfolio
A photography portfolio is one of those website types where Flash can be presented at its best. The site of the photographer Vicente Diaz Penas is a good example – by clicking and holding a mouse on the image you can view a 3D version of a photo which provides an impressive experience, as if you can turn on the frozen moment in action.

Vicente Diaz Penas

Serenading Unicorn
Serenading Unicorn is the online promotional campaign of a large CPG company. The site is built with Flash as it relies heavily on video and audio presentation. Obviously, JavaScript would hardly perform such functionality as well as Flash does.

Serenading Unicorn

Immersive Garden
Flash is often used for personal portfolios as it enables the fulfillment of the most daring creative ideas and fantasies. Immersive Garden is the portfolio of the interaction and motion designer Dilshan Arukatti, so no wonder that it shows the designer’s skills in Flash in all its glory.

Immersive Garden

Salt Films
This is a striking Flash website, where each detail is done to the T.

Salt Films

Sleepeater
It seems to be a growing trend to use a website for a totally narrow purpose, a music clip, for instance. An interactive music video, like the one on the website below, is another area where Flash can be used most effectively.

Sleepeater

The Digital Invaders
No comments on this one, just head on over to the link and be prepared to get your socks knocked off.

Digital Invaders

Waterlife
The Waterlife website offers different visual effects and interactive features to play with. Plenty of transitions, 3D objects and animations make the navigation through the site a bit cluttered, still it gives a decent notion about the versatility of Flash in web design.

Waterlife

Djeco
Awesome illustrations, lovely animated characters and smooth interactivity make up an exciting flash website that perfectly conveys the brand of the toy manufacturer Djeco. By the way, this is one the few flash websites where the soundtrack incorporates with the visual theme perfectly and thus, is an unobtrusive integral part of a browsing experience. Be sure to visit this site, it will make you smile!

Djeco

Case-Mate: I make my case
It would be hard to find a better manifesto for the Flash platform: I make my case features an excellent use of Flash for the product-customization service and e-commerce.

Imakemycase

Jay Jays Dance Off
Catching the trend, the interactive catalogue for the Australian apparel retailer Jay Jays is fully 3D. So check if there is a pair of 3D glasses left somewhere around, or get one for free at any Jay Jays store. Otherwise, just turn off the 3D option.

Danceoff

An Encounter with Greatness
This website will appeal both to football (soccer) fans and appreciators of the top-notch technology. Amazing content that features three sports legends (Pele, Zinedine Zidane and Diego Maradona) and unique interactive features deliver an absorbing and memorable web experience.

Encounter

Bonus: Flash Experiments

Pencil Rebel
Pencil Rebel is an experimental website created by the Polish designer Grzegorz Kozakiewicz. The site delivers a unique interactive experience based on a variety of media elements and Flash effects.

Pencil Rebel

Sounds of Hamburg
Not less unique, this experience is offered to you on the Sounds of Hamburg website. The site uses a specialized augmented-reality mechanism, allowing the users to literally compose music with the Hamburg citizens.

Sounds of Hamburg

Conclusion

No doubt, both jQuery and Flash are powerful tools that can be used for creating efficient web design experiences. So don't let the "Flash vs. HTML5" or "Flash vs. JavaScript" buzz confuse you and remember that each of the platforms is a tool, and any tool should be chosen according to the goal and resources available.

What’s your experience in deciding when and how jQuery and Flash should be used? Join in the discussion in comments.

Julia May is a freelance writer from Ukraine by occupation and a mix of curiosity, aspiration and appreciation of beauty in all senses by nature. She's also chief editor of her blog PhotoInterview, dedicated to interviews with talented photographers from all over the world.