Three HTML5 animation tools: Adobe Edge, Sencha Animator, Tumult Hype

The promise of HTML5, the latest revision of the HTML standard, is a simple one: With greater integration between static HTML and dynamic programming code (such as CSS3 or JavaScript), Web pages can become much more interactive and responsive to user preferences, without the need for plug-ins or memory-hogging multimedia files.

HTML5 represents a significant move forward in Web development because it can provide those features by using the client system's browser, processor and memory to handle most of the heavy lifting. Previously, the limitations of older browsers and prior versions of HTML meant that either the server would have to do much of the processing, or the browser would need a plug-in or add-on to access the dynamic content.

Now, working directly within the browser without the need for plug-ins greatly decreases the amount of time needed to download an interactive page and increases the page's response speed. All that's needed are a few ASCII-based files in HTML5 format and whatever artwork the page requires.

HTML5 also eliminates the binary blocks of unsearchable information found in Flash and other multimedia content. Currently, the bane of any SEO and marketing expert is a Flash-only Web page. With their beautiful graphics and stunning animation, these pages are a delight to the end user -- but invisible to the search engines that need to find and highlight these sites.

In HTML5, this problem is alleviated by the fact that content is found right within the page's source code, right where search engines can get to it. Keeping the content visible within the HTML5 markup code means SEO becomes a much easier proposition to manage on a dynamic Web page. (It's not magical SEO pixie dust -- the content embedded in an HTML5 page must still be fresh and compelling. But at least the SEO barrier to dynamic Web pages has been lowered.)

You may find, though, that HTML5's learning curve can be a barrier in itself. While Web developers can simply advance into HTML5 by using the familiar markup-language capabilities of HTML, they would be missing out on the dynamic capabilities of the new version of the Web's source code. To take full advantage of the new version's dynamic capabilities, you need to dig deeper -- with the help of the tools I review below.

What does HTML5 do?

Before looking at HTML5 tools, it's important to review how HTML5-based dynamic pages are created. There are two ends of a spectrum in which HTML5 source code can be formed. On one end of the spectrum is the use of JavaScript and JQuery to produce pages, and on the other end is the exclusive use of Cascading Style Sheet v3 (CSS3) code to produce similar results.

CSS3 and JavaScript are both scripting tools, but they approach their tasks in different ways. CSS3 lets you set the properties for the page directly within the HTML file, whether those properties are as innocuous as font size and background color, or as complex as dynamic interaction on the page. This is familiar ground to Web designers. JavaScript does pretty much the same thing, but it offers many more features than CSS3 and has a syntax and feel that are more familiar to Web and application developers.

Web designers who are already familiar with CSS2 will feel very much at home with the CSS3 syntax and properties. CSS3 files are usually smaller than JavaScript files and easier to manage -- when you use JavaScript, it means there will be at least a few separate JQuery files of which you will need to keep track.

Another big advantage: As we discussed above, the use of CSS3 means the contents of the website won't automatically be buried inside JavaScript code that can't be indexed by a search engine. With the proper design, JavaScripted pages can also have content in the open, but some HTML5 tools will place content in the JavaScript files by default if you're not paying attention. With CSS3, content is visible in the single HTML page.

But there's a drawback to CSS3: Browser compatibility. At this time, the only version of Internet Explorer that can work with even some of CSS3's features is IE 9. Firefox 8 (and the new Firefox 9) can handle many more CSS3 functions, and Chrome, beginning with version 15, is fully CSS3 compliant, as is Safari 5.1 and greater.

That Chrome and Safari are on the ball with CSS3 compliance is no accident: Google and Apple want to make sure their browsers (on the desktop and mobile) avoid the need to use Flash. Indeed, CSS3 animations are the only technology that consistently works across iOS, Android and BlackBerry OS6.

So what's the best way to start creating animations and interactive pages in HTML5? There are tools that enable developers to build animated and interactive HTML5-based Web pages and at the same time flatten that learning curve. Taking advantage of existing interfaces and methodologies, these tools apply techniques familiar to anyone who's put together a Flash or Silverlight page.

In this article, I examine three of these standalone tools -- Adobe Edge, Sencha Animator and Tumult Hype -- to see how each performs both for new and experienced animators.