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.
Utilizing a nifty jQuery carousel the designers of the Duchy Originals websites managed to display content compactly yet attractively to the users.
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.
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
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.
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!
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
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.
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.
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.
The Budget and Other Factors
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.
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!
Showcase of jQuery & Flash Sites
Below you can find some excellent website designs, showing both platforms at their best.
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.
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.
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.
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.
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.
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!
On their website Pedro Figueras implements unconventional personalized navigation and a pile of interactive jQuery elements.
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.
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.
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.
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!
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.
A polished design, where jQuery elements for lighting and navigation provide a neat and pleasant look and feel.
Here comes a cute website design where cartoon illustrations and jQuery animation do credit to the developers.
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.
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.
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.
This is a striking Flash website, where each detail is done to the T.
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.
The Digital Invaders
No comments on this one, just head on over to the link and be prepared to get your socks knocked off.
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.
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!
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.
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.
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.
Bonus: Flash Experiments
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.
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.
What’s your experience in deciding when and how jQuery and Flash should be used? Join in the discussion in comments.