A Closer Look at Choosing Between Flash and jQuery

A Closer Look at Choosing Between Flash and jQuery

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.

Comments

  1. / Reply

    Pertinent discution ABOUT this two giants. I’m developing a website and in doubts about what technology use. This article helped me a lot!

  2. / Reply

    Thank you for this solid, well-researched article! As for me, jQuery was always the obvious choice, because of it’s simplicity, lightness for a web page and budget-friendliness .

      • Dave,
      • August 6, 2010
      / Reply

      Dmitry did you even read the article? The point of this exercise is choosing the right tool for the job. You are a guy with a hammer who sees everything as a nail.

        • Matthew,
        • March 10, 2012
        / Reply

        DAVE loved your ‘hammer’ comment. Brilliantly said. By the way, the article is really good and helped me grasp the concept. I would prefer Jquery.

  3. / Reply

    Great article. Thanks for sharing these examples.

  4. / Reply

    Thank you, Julia, for a very informative and hot topic ))). You as usual you show mature analysis and wise conclusions.

  5. / Reply

    excellent article

    • Steven,
    • August 5, 2010
    / Reply

    Libraries/classes/frameworks have undeniably provided an ever-growing number of developers with a range of options to create new and progressive solutions (be they Flash branding sites or more usable ajax shopping carts).

    There progression has also certainly helped increase interest from the public in what developers create, but there is a downside to Flash, Javascript and CSS that people should note.

    With more dependence on libraries/classes/frameowrks, more and more development is becoming less and less efficient – it goes without saying. But seemingly it is happening at an equal rate at which platforms and browsers are also progressing, and thereby compensating for what would otherwise be a noticable leap backwards. Otherwise, we would be caring that 1 line in jQuery in fact requires another several hundred lines in jQuery too (hardly efficient when only a single line of javascript could work, period).

    Now I am not saying I hate jQuery or other frameworks, but instead think people need to be aware that HTML5 and Javascript (and CSS3 – have you seen all those processor-hungry recursive functions you can now get) are no more efficient than Flash … and just like inaccessible javascript and html is being frowned upon now, so should any bloated processor and broadband-intensive code … especially if we want to get more and more from the battery life of portable internet devices.

    We can keep accepting that better browsers and faster broadband will forever compensate for this trend, but the reality is that Flash development has no more problems than Javascript and CSS3, other than that it is used for more processor intensive content such as fullscreen video and 3D animation etc, so of course it is going to be pushing browsers more than other technologies.

    1. / Reply

      Good point, Steve. Thanks for your comment, and I think it could make a topic for a solid discussion. Did you write about this question in your blog or elsewhere?

    • div,
    • August 5, 2010
    / Reply

    Superb Sites. Thanks for the details and post. The sites mentioned in this post will be helpful to get more creative thoughts.

    • Luke,
    • August 6, 2010
    / Reply

    Great article, jQuery all the way!

    • MBO,
    • August 6, 2010
    / Reply

    nice compilation! keep it up!

  6. / Reply

    Finally, someone who actually understands the whole Flash/HTML 5/jQuery debate. I cannot tell you how many people I know have asked if they could build their slideshow or picture gallery or something similar in HTML 5!

    It’s unfortunate that Steve Jobs and Apple have hyped HTML 5 so much–people look kind of deflated when I tell them that they’ll need plain old JavaScript or a library like jQuery for behavior and that the HTML 5 video codecs are still immature and that we’re still waiting for old browsers to die before CSS3 will be viewable by 90+ percent of their audience.

    Good write up–thanks for the careful, detailed explanation and all the examples.

    • dom,
    • August 9, 2010
    / Reply

    I’ve anguished over the “versus” question for some time. However, now with there being so much emphasis on the mobile web and various apps, learning HTML jQuery (and hopefully a decent bit of actual Javascript) seems the better route to go, particularly with the ability to use libraries such as Titanium to code apps with little more than HTML/CSS/Javascript.

    While I may lose the ability to do some of the more sumptuous designs possible with Flash, there are just so many other options Javascript opens up. Just 2 cents.

  7. / Reply

    Good article – we love flash but recently modified our own site to be jquery based, for SEO and mobile purposes

    • pitso,
    • August 17, 2010
    / Reply

    very informational.

  8. / Reply

    Thank you! Finally a well-written, informative & very objective article on jQuery & Flash. I will definitely be keeping this around for reference. :)

    • Jafar,
    • December 30, 2010
    / Reply

    Wow, a real article for the industry.

    By the way you can use Flash Develop for free to make SWFs.

    jQuery lovers are starting to bore me, I’m going with mooTools just to spite them.

    • karthipanraj,
    • January 28, 2011
    / Reply

    Good work.
    Analysing a problem and giving suitable conclusion really needs lot of knowledge. U hav done it well.
    Hats off!.

    • Ann,
    • June 9, 2011
    / Reply

    We’re glad to see such good analysis of these powerful platforms. And we’d like to demonstrate you an opportunity for Flash CMS websites creation. We guess our Flash CMS templates can be of a great use for some of you.

  9. / Reply

    It’s quite creative job, all are really unimaginable!

  10. / Reply

    You made some good points there. I did a search on the topic and found most people will agree with your blog.Keep sharing and posting articles like these.This article has helped me a lot.Keep posting this stuff. Thank you for your opinion.I am totally agree with your view.I hold the same points with you.. Thanks.12

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.