What’s Fresh

All the newest, latest, up-to-the-moment happenings
around Odopod.

Flash and Web Standards, Some Perspective
2010 October 13 By David Bliss

The pendulum has definitely swung. Flash is the new F-word and HTML5 is everyone's best friend.

Apple, Google and Microsoft have showcased HTML5 experiments and projects demonstrating how dynamic and interactive experiences in their browsers can be without using Flash.

At Odopod, our teams are well versed in both Flash and open Web Standards development. Each has its strengths and weaknesses and, in order to make the right decisions about these technologies, we need cut through the hype and weigh the options as objectively as possible.

Following are some of the questions that we have been hearing and debating at Odopod. The responses are intentionally high-level, intended as an overview. If you are looking for more exhaustive details, you will find some links at the end that will help you along.

What is HTML5?
The term HTML5 is commonly used to refer to a collection of open, standards-based technologies: HTML, CSS, JavaScript, SVG and others. It is more accurate to refer to these as Web Standards or open Web technologies, but those don't roll off the tongue very well and most people have stuffed all these technologies behind the HTML5 front. Be warned though; if you use this term in certain circles you risk triggering a lecture or even a proper tongue-lashing.

Over the past couple years, several advancements have contributed to the feasibility of relying solely on open Web technologies for creating richer, sexier web experiences. Some of the more notable ones include:

• Jquery and other sophisticated JavaScript libraries. These libraries simplify development by greatly reducing the differences between browsers and also making it easier to program complex application logic.
• Improved support for Web Fonts (@font-face). Browsers and an increasing number of font houses are supporting the ability to download and display custom fonts without plugins.
• CSS3. The latest version of CSS provides many advanced layout options, making sophisticated designs easier to create and maintain.
• HTML5. New tags (especially <audio> <video> and <canvas>) give browsers capabilities only available before with plug-ins. There are many other capabilities within the HTML5 specification, these are the ones that most directly compete with Flash. For a more complete list, see the links at the bottom of the page.
• Improved performance (page rendering, javascript processing, etc.) within browsers. With developers building more complex applications, browser makers are improving the speed of their browsers.

What is the current browser support status?
The HTML5 and CSS3 specifications are fairly new and technically still in draft status, but browser makers have begun implementing them already. Support for CSS3 is further along than that of HTML5, but both have been partially implemented in the following browsers: Firefox 3.5+, Safari 3+, Chrome 3+, Mobile Safari 3+ and Android 2+.

Conspicuously missing from this list is Internet Explorer. Currently, IE 6,7 and 8 do not have support for CSS3 or HTML5 features. Microsoft will change this with IE9, which should launch with excellent support for the latest Web Standards sometime in early 2011. However, roughly 50% of browsers currently online are IE 6,7 or 8 and it will likely be quite a while before these are upgraded.

The World Wide Web Consortium (W3C) oversees HTML5 and other standards-based specifications and last week, Philippe Le Hegaret from W3C stated that HTML5 is not ready for production yet. He is referring specifically to HTML5, not the popular cocktail of Web Standards; however, it is an indication of the work that remains before technologies like HTML5 video and canvas should be relied upon. "The real problem is can we make [HTML5] work across browsers and at the moment, that is not the case." (via InfoWorld)

Does HTML5 = iPad compatible?
If the motivation is primarily to be compatible with iOS (and Android) devices, Web Standards are an excellent choice. The browsers on these devices provide solid support of the standards; however, compatibility requires more. We need to also consider the following:

• Touch interactions. For the most part mouse interactions work well on these devices, but rollovers don't work and touch events (pinch, swipe, etc) often need to be added.
• Limited processor power and ram capacity. Complex experiences will not perform well (if at all) on mobile devices.
• Considerations for battery life. Constant number crunching will suck the life from batteries regardless of the technology used.
• Considerations for mobile use. Mobile environments call for different types of interactions.

Using Web Standards alone does not make something fully compatible for mobile devices. Ultimately, the design of the experience needs to be considered.

What about HTML5 Video?
Because of the lack of Flash on iOS and the limited support for it on Android, HTML5 Video is required for providing video to mobile devices.

In general though, it is not yet ready for prime time. There are several significant issues it faces:

• The HTML5 spec does not dictate a specific codec. This is because the major browsers could not agree on a single codec to support. To play video on all browsers, you currently need to create at least two versions of the video (three if you want to use Google's latest entry in the game).
• The spec is limited in features. It includes basic support for play, pause and seek, but buffering events are quite limited and, players seem more prone to playback issues (like stutters and stops). Additionally, there are no options for DRM, streaming video or alpha channels.
• Limited support. HTML5 video will not work in current versions of IE (except the beta version of IE9) or older versions of Safari, Chrome and Firefox. For most sites, this will represent a significant number of visitors (50-60%).

In order to reach both desktop and mobile browsers, the best strategy for now is to provide Flash video whenever possible and HTML5 video to play in capable browsers without Flash.

Why use open standards?
Long before Steve Jobs' outcry against Flash, Odopod was directing many of our clients toward sites that combined open Web technologies with richer Flash modules. This can be seen in the work we've done for Nike Soccer, MSI, Giant for Women and others.

The lack of Flash support on iOS is certainly not the only reason to choose open Web development. Web Standards have advantages with regards to:

• SEO
• Accessibility
• Displaying text-heavy content
• Integration with third party tools that are often released first using Web Standards

Flash can certainly be made do these things, but they require additional effort.

So, why use Flash then?
Flash continues to excel at rich immersive experience with layers of video, images, and text as well as dynamic drawing, animation and sound. In these regards, Flash is far ahead of even the most capable browsers in terms of both features and performance. Furthermore, given the speed with which Adobe innovates the platform and the speed with which they distribute new versions of the player (to desktop computers at least), Flash will continue to be ahead of the capabilities of Web Standards for the foreseeable future.

Furthermore, despite the incredible efforts of the Web Standards community to reduce differences between browsers and abstract the remaining differences using libraries like Jquery, the fact remains that developing for browsers requires additional QA time for each browser. Flash does an incredible job of eliminating these differences within their platform, reducing the effort needed to develop innovative experiences.

Bottom line?
Right now, Flash remains the better choice for rich, immersive experiences. It is also very well suited for lighter interactive elements (like media players and interactive visualizations) that don't need to be supported on devices.

Web Standards is the right choice for more standard web pages (text and images) and interactive elements, especially when they need to work on iOS and Android devices. Additionally, although I have not talked about it here, Web Standards development makes it possible to use progressive enhancement and reach a much broader set of browsers than Flash is ever likely to support.

In many cases, a hybrid approach is still the best. I expect that we will continue to see an increase in the number of sites built with both Flash and Web Standards elements. Embedded media is fun, but we should continue to push harder on both Flash and Web Standards, inventing the experiences that will give the HTML6 guys something to do.

Want more?
A Non-Technical Field Guide to the HTML5 family
A Brief History of Markup
Dive Into HTML5
HTML5 Browser Comparisons

Comments

  • John says:
    Posted: 10.13.10

    Probably not a comment you want to publish, I'm shocked at the bad markup here. You have div's for lists rather than ul elements. Kinda ironic since your talking about web standards. Yes I know our website is just as bad, but we're working to release a new version in the next 2 months.

  • Will says:
    Posted: 10.13.10

    Nice article. As a graphic designer that is transitioning into a web designer this helped clear up some of the misconceptions that are floating around. Thanks.

  • Keith Humm says:
    Posted: 10.13.10

    To me the argument hasn't really been Flash vs. HTML5, it's always been about Flash. The abysmal efforts of Adobe in terms of security and performance come to mind, not to mention the sheer price of authoring tools for flash. When you talk small interactive elements like media players, this is exactly where I see Flash failing terribly. Compare most Silverlight players to Flash and you'll notice the huge difference in response and usability. Almost all Silverlight players i've seen have instant response on the video scrubber, and almost never simply sit there stalling my browser. If Flash were a better citizen on my computer, I'd have no problem recommending it for rich experiences. As it happens, HTML5 just happens to play nicer - even though it can't do nearly as much.

  • Nathan says:
    Posted: 10.13.10

    Great overview. I would add the following to the list of reasons to consider Web standards over flash: - potential for better load times - support for text interaction features provided by the OS (like 'define this word') - better accessibility - ability to search the text on page @john - that is probably an artifact of the wysiwyg editor being used. Having a few tags that aren't semantic hardly detracts from David's point.

  • RazorX says:
    Posted: 10.13.10

    Finally a great article filled with some solid experience and common sense! By the way, the HTML5 "support hopes" for IE 9 could be very overblown. IE 9 Beta scored a lowly 96 on html5test.com - not good :( IE 9 Beta score: http://www.pcmag.com/slideshow_viewer/0,1205,l%253D254560...

  • Kyle Phillips says:
    Posted: 10.13.10

    Nice article. I think that most of what you said is dead-on. At least when you are talking about right now. When you start talking about the "foreseeable future" I disagree a bit. WebGL is just around the corner, and CSS3 is out, and they are hardware-accelerated. I know Flash has made some progress with hardware-acceleration, but I don't think they will be able to compete with OpenGL-ES. And if you can't push the graphics processing to the gpu, I dont know how you could compete. The great thing about Flash has been its almighty penetration rate, and now we are seeing that challenged. Flash is great, but its appropriateness in the browser context is slipping.

  • David Bliss says:
    Posted: 10.13.10

    Thanks for your comments everyone. Yes, even to you John;) I welcome all polite, on topic comments. @Kyle, my primary point about Flash and the foreseeable future is mostly about Adobe's ability to move more quickly than folks writing and implementing features within the standards. I agree that we will see great improvements in the support of existing features and performance within most, if not all, of the browsers. In the mean time, I expect that Adobe will roll out innovative features within the Flash platform (and Microsoft will do the same with Silverlight). And of course we will be dealing with outdated browsers forever.

  • Mike says:
    Posted: 10.14.10

    @John I'm guessing the markup is auto generated by the CMS @John Can you be specific about which 'security issues' that exist with Flash as to make it 'abysmal'. Flash is only as secure as the browser it's inside of. When Flash does have a security issue, it's because an attacker found a loop hole in the browsers security and can reach through that to get to Flash. Plus what's the last time you heard about a breach of security with Flash, compare that the amount of XXS attacks that happen. RE: Flash authoring tools - the Flash player is free and so are the SDKs and compilers. You don't have to spend a dime to create Flash content. @Nathan If you do an exact comparison of assets, Flash will always load faster and be smaller b/c it's compressed and binary, as opposed to all the whitespace and markeup used to format HTML. @Kyle WebGL is still a pipe dream. Maybe in 5-10 years plus how many devs out there exist as to make WebGL "cost effective". Yes CSS3 is out but barley has penetration: http://www.webdevout.net/browser-support-css. C'mon guys, use the right tool for the right job...sheesh... If people don't want it, they won't use it. Remember Java applets?

  • carl says:
    Posted: 10.14.10

    Great article. Very well balanced. I'm heavily invested in Flash but am pretty excited by how the HTML5 web cocktail can do some pretty amazing stuff. I'm all for the flash / html hybrid site and using the proper tool for the job. I do have to laugh though every time I watch a video of an ipad / iphone choking on canvas demos. The Flash on Android videos that have been cropping up lately are really starting to make iOS devices look crippled.

  • Hugo says:
    Posted: 10.14.10

    I'll repeat what Mike wrote because it's true, and most people just blindly follow rumours and lies started by some Steve Jobs guy that know nothing, I repeat NOTHING about coding or even design. "Flash authoring tools - the Flash player is free and so are the SDKs and compilers. You don't have to spend a dime to create Flash content. @Nathan If you do an exact comparison of assets, Flash will always load faster and be smaller b/c it's compressed and binary, as opposed to all the whitespace and markeup used to format HTML." And I'll add that Flash still performs better than HTML5 + Canvas + Javascript for a simple bouncing ball animation with just 3 or 4 lines of code in Javascript and in Actionscript. AND uses less battery. There are comparisons online about this, so just look it up. Please don't believe what Steve Jobs says. I don't. And by the way I work in multimedia / web design. Steve Jobs is a LIAR

  • chris says:
    Posted: 10.14.10

    I totally agree. Great article. Thank you to share it !

  • Andrei Potorac says:
    Posted: 10.14.10

    As a Flash Developer, I must say that I'm glad Apple makes efforts to either see Flash vanish or get better. As I don't think it will vanish, Adobe has to make it better. We - the guys working with Flash - know the best of all the issues within the IDE, and the performance it has in the browser. Another argument is that bad advertising is still advertising, and now even my father know from the news what Flash is, and that it doesn't work on iOS yet. :) So all in all, I expect to see Flash on iOS by 2015, but also a Flash that works as smooth as we'd expect it.

  • Kyle Phillips says:
    Posted: 10.14.10

    @Mike far from a pipe dream. Firefox 4 beta has webgl enabled and it's in the nightly builds of WebKit and Chromium. The lack of devs is a real issue, at least right now. I suppose the viability of using it comes down to your target audience.

  • Ted says:
    Posted: 10.14.10

    Seems a rational approach to me Be sure to use the best tool for the job whatever that tool is. That is something I learned years ago and is still valid. Just because you have hammer don't treat everything like a nail.

  • Kris says:
    Posted: 10.15.10

    Great article Dave. I'm currently elbows deep in a project focusing primarily web standard and HTML 5. Lots to consider, especially when the project requires rich animation and video. We've had to go with a mixed approach, providing both HTML 5 and Flash video in order to cover off on all browsers. Its been a learning experience to say the least. All that being said, if development time is a concern then Flash is your friend. I'm finding that doing something in Jquery takes twice as long to develop and QA vs. the same functionality in Flash.

  • David Bliss says:
    Posted: 10.19.10

    Some related reading with similar takeaways (use the right tool for the job). Also some good thoughts on the need for better tools in the second. http://mashable.com/2010/10/14/html5-developer-questions/ http://www.waxpraxis.org/blog/2010/10/html5-impedance-mis...

Want to say something?

Your comment may be reviewed by a moderator for approval.

David Bliss

Founder, Technical Director

  @davidbliss

WANT A REGULAR DOSE?

subscribe