Well as the title states, in this post we are going to look into the benefits and differences of using HTML5 and Flash to create and enhance your web projects.

We will cover off and break down a range of possible usage and implementation option and discuss basic scenarios for each. So lets start off with…

CPU Usage

Following tests carried out by Jan Ozer we can see that as far as usage goes, both Flash and HTML5 are very browser dependent, both fairing better and worse on different platforms:

Mac Tests

• With Safari, HTML5 was the most efficient and consumed less CPU than Flash using only 12.39% CPU. With Flash 10.0, CPU utilization was at 37.41% and with Flash 10.1, it dropped to 32.07%
• With Google Chrome, Flash and HTML5 were both equally inefficient (both are around 50%)
• With Firefox, Flash was only slightly less efficient than in Safari, but better than in Chrome

Windows Tests

• Safari wouldn’t play HTML5 videos, so there was no way to test that. However, Flash 10.0 used 23.22% CPU but Flash 10.1 only used 7.43% CPU
• Google Chrome was more efficient on Windows than Mac. Playback with Flash Player 10.0 was about 24% more efficient than HTML5, while Flash Player 10.1 was 58% more efficient than HTML5.
• On Firefox, Flash 10.1 dropped CPU utilization to 6% from 22% in Flash 10.0
• In IE8, Flash 10.0 used 22.41% CPU and Flash 10.1 used 14.62% CPU

(Results taken from Streaming Learning Center)

This says to us that at present, neither option is perfect, in fact we knew that anyway, but it is interesting to discover the specifics regarding which is favored on what platform. This obviously then brings out the age old issue of accessibility and compatibility across the board. So the question begs itself, is either option water tight enough to carry the bulk of your important data driven content through to the mass market? We feel the balance has been swinging more in favor of “Yes” now-a-days and this weighting can only improve as time goes on.

iPad & iPhone

Obviously, and without getting in to the political issues in regards to this battle, a massive flaw now using Flash is the incompatibility with your Apple mobile products. iPads, iPhones and even now the iPod touches are not compatible with Flash, meaning any Flash animation or embedded video you put on your site, solely relying on Flash will simply not show on these devices, so a language such as HTMl5 is an obvious alternative.

Font replacement

Web designers a few years back now went through the font replacement motions of sIFR, using Flash to replace standard web fonts with much prettier ones. The benefits were instantly recognizable visually, but not so in terms of coding and implementation. But now with the introduction of CSS font replacements, and products like Typekit and Fontdeck, we are likely to see less and less sites using Flash to embed fonts, bring in clean HTML and open source fonts!

Animation vs Functionality

We feel that both HTML5 and Flash  have a place in modern day web design, but both have strengths in different areas. HTML5 is great for all the stuff that flash can do like embedding video, smooth transitional effects like fading & sliding and also vector graphic work using canvasing, it will never in our opinion be as strong as some of the high end animations you can achieve through flash.

One of the biggest elements mentioned above which we relied heavily on Flash for in the past is video. Embedding video on a web page used to be a bit of a pain especially on an accessibility point of view, we had to rely on Javascript fall backs and fixes which just made code nasty and bloated, whereas now we can simply include the new “video” tag and with a few parameters we can easily get video on our websites with minimal fuss. There are still a few codec issues with regards to vendors, those of which are explained here, but embedding video has become a much simpler process

But with regards to heavy and complex animations and especially games, HTML5 is yet to prove itself massively over Flash as a choice. The flexibility of Flash in this manner is highly preferable, but then how much of this can be used and utilized effectively on a content driven site or application? I think posing these strengths, creating your illustrative animations and mini movies through Flash and then embedding this video on your site using HTML5 shows that both of these coding languages can work in unison to create a stronger final product.