Debating HTML 5 and Flash? Get educated first!

You’ve probably heard a lot of noise in the press, blogs, twitter, etc. about HTML 5.  You’ve probably also heard how its new video and animation capabilities combined with other cool HTML 5 features is going to be the death of Flash, right?  As a technical evangelist for Adobe, I obviously know a lot about the capabilities of Flash, but I also have invested a lot of time getting up to speed on HTML 5 so I could fully understand the debate and separate fact from noise.  I’ve been in this field long enough to see several religious technology debates come and go, so I tend to be very pragmatic when it comes to technology shifts.  I’ve also learned over the years to stay very educated on key topics, deal only with facts I can confirm myself, and rely on neither marketing BS nor sensationalism in the press.

I’ve been involved in web development since the early betas of Netscape.  I’ve used Java Servlets, JSPs, ASPs, Perl/CGI, PHP, ColdFusion and other means of dynamically generating web content and have always worked to push browser capabilities to the limit.   From day one I was excited about what web browsers could do, but like many web developers, I was almost instantly frustrated by the limitations and the painfully slow progress of web standards.  It has taken 15 years to reach the capabilities reflected in the HTML 5 spec.  These features should have been in HTML 2 or at least HTML 3!   Many other standards have innovated dramatically faster, so for me personally, HTML 5 is at least 10 years overdue!

The Flash/HTML overlap – Would you replace your <IMG/> tags with Flash?

Flash was added to our toolbox to extend the capabilities of web developers beyond what HTML provided.   It basically has helped developers fill the gap that exists between the desires of our application design and the capabilities of existing web technologies.   The intent of Flash has never been to compete with HTML.  The intent is to help developers realize the goals of our applications.  If HTML and related technologies provided everything we needed, Flash would not exist.

As complementary technologies evolve, there are inevitably overlapping capabilities.  Adobe has never promoted the use of Flash to do things that HTML can do without Flash.  Have you ever heard anyone promoting the use of Flash to display images?  You could replace all of your <IMG> tags with Flash but why would you use a plugin where no plugin is really needed?!   Although Flash would do a great job at displaying your images and even provide some unique features, it’s very unlikely that you need these features so you would be nuts to use Flash!  If Adobe told me to promote this idea, I would move to the Lightroom team! 😉

This is a trivial example of where there is overlap, but because web developers fully understand the requirements and capabilities of displaying images, it’s obvious which technology to use!   The currently debated overlapping features are a bit more complex resulting in confusion for many.

HTML 5 increases the overlap

I remember the first time I saw DHTML used to make cascading menus (2002 I think?), I was impressed!  I could build UI controls that respond to mouse rollover events, dynamically display dropdown menus and all sorts of cool things.  Amazing!  Although this could already be done with Flash, it was nice to see HTML technologies evolve to this level.  (I’ll skip the history lesson about the huge pains we went through to make sure this new coolness worked on multiple browsers.  It was a mess until JQuery and other AJAX frameworks evolved!).

If you look at what HTML 5 is bringing us, you’ll see that the overlap between Flash and HTML 5 is indeed increasing.   HTML 5 introduces animations, drawing capabilities, video, audio,  and many other things that we usually rely on Flash to deliver, so yes, the overlap is obviously larger in many ways.  However, there is a high probability that the overlap is probably not as big as you may think.  Let’s start with the obligatory video debate.

The center of attention in the current debate – Video!

Now I’m going to say something that might surprise you.   If your video needs are met by HTML 5 and your target audience has an HTML 5 capable browser, you SHOULD use the new video tag instead of Flash!   Like I said before, why use a plugin for something that a plugin is not needed for!?  It’s no different than my <IMG/> analogy above.

However, before you draw any conclusions about video… be sure that you completely understand the implications:

1: Does your target audience have an HTML 5 compatible browser capable of viewing your video?

If not, I can assure you that they almost certainly have Flash, therefore, it’s an obvious choice for playback of video on non-HTML5-ready browsers.  Read my prior article, “HTML 5 and Flash – A Reality Check“.  Are you surprised to see that more people use IE6 than Safari?  I was!  Of course there are new devices that support the HTML 5 video tag and some of these new devices do not have Flash support for various reasons (no, I’m not going there), so it basically creates more work for us developers to support 100% of the audience.  Now we find ourselves writing code that handles video playback differently based on the user agent.  It’s reminiscent of the early 2000s and I believe that it’s going to get worse before it gets better because the number of devices, browsers, screen resolutions, OSes, etc. is dramatically larger than ever before.

2: Do your video requirements go beyond simply pointing to a video file with the new video tag?

You would be surprised at how many customers have much more complex requirements.   Here are a few comments made yesterday by John Harding, Software engineer at YouTube on the YouTube blog that illustrates my point:

“It’s important to understand what a site like YouTube needs from the browser in order to provide a good experience for viewers as well as content creators. We need to do more than just point the browser at a video file like the image tag does – there’s a lot more to it than just retrieving and displaying a video. The <video> tag certainly addresses the basic requirements and is making good progress on meeting others, but the <video> tag does not currently meet all the needs of a site like YouTube”

The article goes on to explain multiple technical reasons why Flash will continue to be the video player for YouTube.   You can read the full article at http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html.  Hulu recently made a similar blog post –http://blog.hulu.com/2010/05/13/pardon-our-dust/ that mentions a few other interesting points.   Although HTML 5 provides video playback, many customers find a gap between their requirements and what HTML 5 offers….so once again, Flash fills the gap!

Did you know that there was such a vast difference between the capabilities of HTML 5’s proposed video tag and Flash?  Have you really looked at the complete feature set of Flash video?

Assuming the HTML 5 video format war finally gets resolved (it has a long ways to go), we will indeed see more videos delivered by the browser without the use of Flash, and that is the way it is supposed to be.  However, when you need advanced video capabilities, you will find that Flash once again complements HTML very nicely.

Video is just one aspect of Flash and only one aspect of HTML 5.  I used it as an example of how disconnected people are from the reality of the debate.

As HTML technologies expand, so do the capabilities of Flash

The ever increasing overlap between Flash and HTML 5 is just one part of what’s happening right now.  The other part that is seldom mentioned is the continually increasing capabilities of Flash.   As HTML 5 is slowly realized, Flash continues to innovate at a very fast pace so that it can continue to fill the gap between what HTML technologies offer and what developers want to build.  You should see what’s coming in future versions!  Flash will continue to complement HTML and help developers realize capabilities not possible otherwise.  Can Adobe continue to innovate to fill the gap?  Can Flash evolve fast enough to continue complementing HTML?  You bet.  I’ve seen it!  Eventually, we will be debating HTML 6 vs Flash Player X and we’ll see whole new set of hot topics. Fun times!

Get educated!

Spoken in my stern teacher voice — It is impossible for you to evaluate the future of HTML 5 and Flash unless you are fully educated on both technologies.  I keep meeting developers who have a decent understanding of HTML5 but think Flash is nothing more than simple video and animated ads.  I also meet developers who have a decent understanding of Flash but think HTML 5 is only about adding video, audio and canvas tags to today’s HTML.  In both cases, the person is VERY misinformed and is lacking the required education to make any future-looking statement about either technology.  However, both uneducated groups tend to be very loud!  It reminds me of a political election where people vote based on what they have learned from political ads!  STOP IT!

Whether you are debating technology or politics, it’s an absolute requirement to be equally knowledgeable on all topics involved.

Where to learn more

Hopefully you are now inspired to learn more.  Below are the resources I found while learning about HTML 5.  I’ve also listed some resources about Flash and related technologies.  Go read everything below and let’s have an intelligent and fun discussion about the future.

HTML 5:

  • Google’s http://html5rocks.com – fantastic resource with tons of live demos – my favorite resource for showing off HTML 5
  • Microsoft’s IE 9 test drive home page – includes some very impressive HTML 5 demos – http://ie.microsoft.com/testdrive/ – it’s great to see Microsoft innovating around HTML 5.
  • Apple’s Safari technology demos – some impressive demos of HTML 5, but a bit too “Apple owned” feeling – http://developer.apple.com/safaridemos/ – the original demos only ran in Safari but now also run in Chrome.
  • CanvasDemos – an entire site devoted to the new canvas tag in HTML 5 – some very impressive stuff – http://www.canvasdemos.com/
  • HTML 5 Test site – gives your browser a HTML-readiness score and list the capabilities.  Each listed capability is a hyperlink to the HTML 5 spec – http://html5test.com/
  • HTML 5 Readiness site – shows current status of most modern browsers (anything not listed has no HTML 5 support) – http://html5readiness.com/
  • HTML 5 Demos – a decent set of HTML 5 demos – http://html5demos.com/
  • HTML 5 Video tag browser support matrix – a very up to date article on which browsers support which video formats/codecs, etc. – http://en.wikipedia.org/wiki/HTML5_video
  • Adobe Dreamweaver HTML5 Pack – an amazing set of HTML 5 capabilities you can use today – http://labs.adobe.com/technologies/html5pack/

Adobe Flash Platform:

  • Adobe Flash Platform Home Page – http://www.adobe.com/flashplatform/
  • Flex.org – great starting point for learning about Flex, a developer’s toolkit for creating Flex content.  If you have never looked at Flex, you are missing a big piece of the Flash Platform, especially when it comes to complex application development.  Be sure to check out the showcase (“What’s possible”).  You’ll see that Flex is used to build very complex mission critical apps in the enterprise.  These apps run on the Flash platform.
  • Tour de Flex – a gallery of nearly 500 code samples illustrating everything from simple UI controls to complex data visualizations and real-time data handling – http://flex.org/tour
  • Top Flash Misconceptions by Mike Chambers – addresses some very recent false claims about Flash – http://www.mikechambers.com/blog/tag/flash_myths/
  • What’s new in the latest release of Flash Player 10.1 – a very substantial release – http://labs.adobe.com/technologies/flashplayer10/features.html
  • Adobe AIR home page – a runtime that enables desktop applications built with either Flash, Flex or HTML/JavaScript – http://www.adobe.com/products/air/ – supports Windows, MacOS, Linux, Android (beta) and more on the way.  If you have never looked at AIR, you need to check this out.
  • Flash Media Server home page – http://www.adobe.com/products/flashmediaserver/

Go learn!

~ by gregorywilson on June 30, 2010.

10 Responses to “Debating HTML 5 and Flash? Get educated first!”

  1. Great post, thanks for sharing the links.

    [quote]Have you ever heard anyone promoting the use of Flash to display images? [/quote]

    Yes; There are several plugins whichs replaces images to flash. The reason to do this is to create dropshadow, rotate the image easily and/or have great effects applied on the image. for example swfIR is an Image Replacement, which brings hmtl images what SIFR brought to html text. Its a bit crap that the site is currently down (http://swfir.com/). I have used flash once to show transparent png’s (before there were elegant pngfixes) Why would we wait till everybody has these features in their browser? Most designers want to give every user the same experience, not more experience based on a browser. Beside this, a lot of the internetusers still uses IE6.

    I dont say Flash is the answer to all things, but yes, it can replace lots of cool stuff that most browsers don’t support. And a plugin enables you to work crossbrowser and crossplatform. HTML5 rockes for sure; but I think we have to wait a little bit till its fully supported/completed.

  2. Hi Greg,

    Great post. It is nice to see Adobe taking on a more nuanced approach to the debate than certain other fruit logo enabled companies.

    When I saw the cool iAd presentation for ToyStory I started looking into HTML 5, but soon found out that several of the 3D transformations was Safari only, and the animation even broke in Chrome which is also based on Webkit.

    Personally I would love to see HTML 5 evolve, because my skills are easily transferrable to CSS3, html5 and Javascript and I would love to be able to spice up more parts of webpages, which are basic html today for SEO reasons. Sadly I have come to realize that the market today is more fragmented than ever before. Even worse than the dreadful IE vs. Netscape days. The graceful degradation of HTML option does not compute with clients, whose clientbase mainly use IE – which just does not seem to ever get this HTML thing right.

    It’s also hard to tell clients to use the videotag which requires rendering the video in several different formats, creating a cross browser skin which works in every browser and create a flash fallback for the large percentage not able to view html 5 video tag videos. All of this effort to present video for the 0.5-1 percentage of users who does not have flash (on average based on our clients statics).

    The term “standard” is simply wrong to use for a technology implemented with several differences for every major browser ever produced. Flash is more a standard than html has ever been and it seems will ever be. I still have 6 years old flash sites running, which have been working from day one – without new new browsers rendering it wrong.

    I’m looking forward to seeing what Flash brings in the future. I hope you get inspired at the amazing 3D stuff Unity 3D is doing 😉

  3. […] Direct Link […]

  4. You might want to add a link to http://www.flashlab.com/html5 as a cynical side by side flash/html5 comparison

  5. Hi Greg, you do realize that virtually every living developer on this planet clearly understands that Flash, at its current roadmap, is being seriously perceived as a significant threat to the freedom of choice that the Open Standards, such as HTML5, promises us?

    You do realize that every developer, older than some threshold value, remembers how Windows API brought lock-ins towards Windows, and that Ajax and similar Open Web techniques promises us all to never again have such lock-ins, and that Adobe’s initiatives in regards to Flex and Flash looks extremely similar to Windows API in those regards?

    You do realize that we would all want to accomplish the dream of creating something _once_ and have it running on all existing platforms, such as iPhone, iPad, Droid, Nokia, Linux etc?

    I think it all went wrong when you came out with Controls in Flash and started promoting Flash/Flex as a ‘RIA platform’. At that time it was way too obvious what Adobe tried to do, and it all just mimicked ActiveX too much for us to sit still and see another round of ‘platform dance’ unfold.

    We all want to be the masters of our own home, currently Flash does not seem to give us that option, while HTML(5) seems to give us that.

    • The open source vs closed “Flash” is a red herring argument. Flash is very open–certainly more open than the App store.
      The problem really is that open source solutions move so slowly in their development cycles that they need the competition of plug-ins like Flash to lead the way. If plug-ins disappeared tomorrow, innovation would slow considerably, and that is its own form of tyranny. I’m guessing from this post that you really don’t develop with Flash or know that much about it? I’m an older developer too and I remember the browswer wars of a decade ago. I never want to go back to that again. I am all for the develop once and deploy everywhere solution and I don’t see HTML5/CSS3/Javascript ever being able to deliver that. Flash may not ever accomplish it either, but I’m betting that it will come closer than anyone else.

      • Hey Thomas, you do realize Flex is open sourced right? And Eclipse is open sourced right? And Windows API lock in? You do realize that makes no sense right?

  6. I certainly have heard a lot of noise, caused by Flash, until i installed ClickToFlash on my MacBook. Since then it has been silent. Feels like I got a brand new laptop.

  7. […] http://gregsramblings.com/2010/06/30/debating-html-5-and-flash-get-educated-first/ […]

  8. […] het slagveld op dit moment nog groter te maken zien we op het web front dat men steeds meer Adobe Flash overboord zet en deze vervangt voor HTML5. Dit lot lijkt MS Silverlight ook te […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: