HTML5 vs. Flash

Challenge is not over, but is it a war? Let's write down some ideas you might have already taken in count to think before deciding html5 "OR" flash (inside quotes because actually it should not be an OR)

Considerations

It is really important to know the first difference: HTML means HyperText Markup Language (a language), and Flash was a famous product of Macromedia, ate by Adobe, for web browsers (a plugin). To compare "languages" we could take HTML5 vs. AS3 but that wouldn't be fair, because HTML5 is kind of "xml" structuring for websites (remember: markup) and AS3 is some kind of "magic" programming language which could be compared to JS.

Due our humanity condition we cannot warrantee an objective comparison, but we could slide away the cliches. Nobody is going to lose her/his job because a new technology appears, come on!

HTML5 is currently as Draft on the W3.org specification. What does it mean? That this analysis should not be read as final work. I, and probably you too, hope that by 2012 the documentation will be complete and lot of missing features in javascript engine, added. Also I hope somebody improves the experience with rendering, you can still hang the browser.

We should never forget about usability AND accessibility in the process of interaction design and developing.

HTML5

This Brand new technology, easy to learn and use, is even easier to modify than .FLA or .SWF files. Also almost all animations that were made in Flash in the past, can now be done with JS+HTML5+CSS3, but it could be heavier to do it in this way. This influences not only to the size of file(s) but also to performance.

Styling a form wasn't possible without JavaScript, but with the contenteditable attribute you have a range of possibilities in your hand. Also new types of inputs, such as email, number, range, et cetera1.

User will need not only a browser that supports HTML5, but also full CSS3 support to compliment the language itself. Same concept applies to JavaScript engine.

It's free (beyond the copyright with embedding fonts and audio / video codec)

It's mobile friendly: HTML5 is being used to develop iPhone, iPod, iPad and Android applications. Isn't that interesting?

Drag and drop: actually isn't HTML5 but it's really nice to drop desktop things in the browser, like in the new GMail Attachment way. Is that possible in Flash?7

Flash

File size is compressed, so the package is lighter than the sum of IMG+JS+CSS+HTML+Others (i.e. TTF, SVG)

Hardware optimization: at the moment JS is consuming a lot of memory and can easily kill your browser process. If you have a really big JSON object you will se the limitations of javascript, plus there does not exist some kind of native relational array (dictionary).

Only ONE requirement: The Flash Plugin. Supported on mobile thanks to Android 2.2 codename FroYo

Flash Builder 4.0 inside the Creative Suite 5 package of Adobe, is an interesting (but expensive) option: it gives hope to actionscript developers.

May be harder to someone to crack your application.

Things you can do in Flash but, at the moment, aren't possible in HTML5 / JS / CSS3:

  • Augmented Reality
  • 3D (Flash PaperVision) or simple 3D (JS does not have the Z axis)6
  • A real OOP different than "prototyping"
  • Access to microphone and webcam4 Actually, they have announced it will be possible.
  • Blending modes: multiply, darken, overlay, lighten, et cetera.
  • AMF2 We could use WebSockets or even AJAX.
  • ByteArray (binary data)
  • BitMapData, closest thing is canvas / VML, but it isn't really at bit level.
  • Use of GPU

"...Seriously, Javascript ALMOST get Flash speed..." Ricardo Cabello in Chrome Experiments, and Woork also defends Flash

Conclusion

At the moment, HTML5 is green, young, and everybody wants to work with it. Flash have years in the net. Allthough, as first said, Flash compliments3 HTML5, in my opinion Flash obviously will have some extra years of life and HTML5 will NOT replace him. Sorry to dissapoint you guys. We need to know pros and cons of each one.

External Links

HTML5 Archives

HTML5 Examples

Best Practices

Recommended Books

Contributions

Link resources

  1. Dive into HTML5: Form inputs
  2. AMF
  3. Flash hugs HTML
  4. HTML5 Media Capture: microphone and webcam on draft
  5. HTML5 Globals
  6. 3D by MrDoob is a plugin that allows to simulate 3D in the canvas object, but: 3D is still not native and I couldn't find such a thing for VML. But also I would like to see how you could do one of these sites without Flash, and what will be it's performance.
  7. Drag and Drop for IE

Thanks

To everybody who reads, likes and / or shares this post. Most of all, to every single web developer.

To my inspirational developers: Remy Sharp, Henri Sivonen, Jeremy Keith, Jeffrey Zeldman, Bruce Lawson, Mark Pilgrim, Ian Hickson, Anne van Kestern, Lachlan Hunt, Freddie Vega, Jeffrey Way, Fede Campo, Manuel Razzari, Dean Edwards, Antonio Lupetti, Ricardo Cabello and ...