Part 4: HTML5/CSS3 Authoring Tools

Previous      Next

From the designer’s perspective, another roadblock standing in the way of HTML5 is a dearth of authoring tools, especially those that provide the kinds of visually oriented interfaces found in Adobe’s Creative Suite or QuarkXPress.

Adobe recently moved to address this by releasing extensions to Dreamweaver and Illustrator that provide initial support for the new web technologies. Both are available as free downloads.

The Dreamweaver CS5 HTML5 Pack, released in May, adds several features for designers who want to create HTML5 and CSS3 content. These include code hinting for HTML5 and CSS3, two starter layouts and the ability to preview the

On Sept. 13, Adobe announced the HTML5 Pack for Adobe Illustrator CS5, which enhances Illustrator’s Scalable Vector Graphics export capabilities and adds initial support for CSS3 and HTML5. For example, you can create multiple artboards for different screen sizes, and then export them as SVG files along with CSS code. The CSS includes Media Queries that will display the appropriate version of the graphic depending on the viewer’s screen size. You can also export CSS code that automatically applies attributes such as gradients and drop shadows defined in Illustrator’s Appearances panel. Another option lets you produce an SVG graphic along with a element containing sample JavaScript code that can be modified by a programmer. This provides a good starting point for web applications in which graphics can be dynamically modified based on user input or a real-time data feed. In a pre-release demo, an Adobe product manager showed a sample application in which clicking on a color ramp automatically changes an object’s color.

Beyond that, Gubbay says Adobe is looking at a variety of options for supporting HTML5 and related technologies in its graphics tools. This could lead to some interesting choices, since the company now offers one creative product—Dreamweaver—for authoring HTML, and others —Flash Professional, Flash Catalyst and Flash Builder—for generating interactive rich-media content. InDesign, which also exports Flash content, could have a role to play as well.

“Nothing is off the table in terms of what we’re thinking of doing and how we’ll do it, and which types of customers we’re going to help do this with,” he says.

Flash Export to HTML5?

Some designers on Internet forums have suggested that Adobe could simply add an “HTML5 Export” option to Flash Professional, but Gubbay cautions that this could be a difficult challenge depending on the nature of the Flash project. “We’re certainly investigating all of these types of things,” he says. “Is it better to show it off with SVG and JavaScript? Or is it better to write it out in ?” The best choice for Apple devices could be CSS3 because there “it’s hardware accelerated, so you’re going to get better performance.”

But in each case, he notes, “there are a lot of intricacies of how you represent Flash.” If you’re just applying some tweening to a vector object, translating Flash content to one of these alternatives shouldn’t be a problem. However “when you start dealing with [ActionScript] code inside of your Flash movie and representing that somewhere else, it really begins to get tricky,” he says. This would mean translating the ActionScript into JavaScript instructions that perform the same function, a big hurdle even though the two languages have similar roots.

“Figuring out what that border is and how it comes together are things that we’re looking at,” Gubbay says. “We’re certainly interested in that workflow, since our customers are, and we’re also interested in what it takes to just natively build rich interactivity in HTML5 outside of Flash.”

He hints at what a product like this might do. “Imagine if you had some sort of rich interactivity tool where you could design something that looks great, but specifically targeting A, B and C device,” he says. The code generated by the software would be optimized for each device, and would account for which features can be hardware-accelerated. It’s the kind of product “I think people will pay for, because there’s real value for being able to do that.”

The company, which shipped CS5 in April, typically works on an 18-month upgrade cycle. However, Adobe routinely offers plug-ins and other enhancements between major releases, so it’s likely we’ll see new extensions for current products along the lines of the Dreamweaver and Illustrator add-ons. In the meantime, it’s a safe bet that other developers of graphics tools are eyeing HTML5 and CSS3 as well.

Smokescreen to the Rescue?
RevShock, a mobile advertising start-up, recently got some attention for a technology called Smokescreen that enables playback of SWF files through a JavaScript player. It’s currently available only as a preview, and one blogger has noted that it performs slowly when playing videos and games on an iPhone. However, it does provide a way to view Flash content without a plug-in. RevShock says it will make the software available under an open-source license.

The company has provided only sketchy information on its website, and did not respond to requests for comment. The website notes that the software “currently supports a sizable subset of Flash 8 animation capabilities, streaming sound, sound effects, some input and basic ActionScript.”

The web is the most rapidly changing design medium out there.
This book offers you an organized overview of the trends happening right now.

Stephen Beale has been writing about computer technology since 1983. He’s the author of seven books on computer applications in the graphic arts and a former news and reviews editor for Macworld.  He’s currently editor of a website for public relations professionals in health and medicine.



* Live and On-Demand DesignCasts
* Visit – Your comprehensive source of books, products and tools for designers
* Sign up to receive the HOW eNewsletter.