Adobe’s New HTML5 Tool Is Web-Designer Duct Tape

For years, we tolerated Flash because it worked; it could do things that HTML either couldn’t do at all, couldn’t do well, or couldn’t be made to do easily.

Flash gave us YouTube. It gave us Homestar Runner. It gave us casual gaming beyond flipping cards and sweeping mines.

And Adobe, Flash’s maker, gave us powerful, easy-to-learn GUI development tools that helped generalist coders make the web a more dynamic place — even if it was also “a hot mess” of broken back buttons and skewed UI paradigms, as IBM design researcher Andrew Sempere says.

Then, about five years ago, the mobile web broke Flash.

This is the context you need in order to understand Adobe Edge, the new HTML5 animation tool the company released to public preview on Monday. Really, it’s the context you need in order to understand Adobe’s entire shift in its authoring tools, beginning with Creative Suite 5.5’s “Any Screen” update and continuing from this point forward.

The mobile web is forcibly separating creators from containers.

Before this generation of smartphones, nobody really cared that we couldn’t use Flash on mobile devices. Who had the processing power? Who had the bandwidth? Were you really going to watch animation or movies on your phone? We were happy to have calendars and email.

Then Apple’s iPhone and 3G data networks came along. When Steve Jobs drew a line in the sand, saying not that the iPhone couldn’t support Flash but that they wouldn’t, challenging Adobe to ship a mobile version of Flash that actually worked, it felt like a real battle.

Instead, Apple threw its arms around first what was then the emerging HTML5 standard — which offered new ways to do much of what Flash had done without its container — and then, decisively, native mobile apps. Apps which offered mobile developers and content creators new ways to make money and — no coincidence — Apple sold and controlled.

Rejecting Flash gave Android and Blackberry a major selling point when they and Adobe were finally able to make it work on their platforms. But the user paradigm and creative economy of the mobile web had been fundamentally changed. Google knew it, Microsoft knew it — and yes, Adobe knew it, too.

Flash was no longer indispensable. There were UIs that were just as powerful that either offered more money or could be more universal. HTML5 was now a real standard, with broad (if still-imperfect) support across all the current-generation web browsers. A huge Creative Suite developer base and millions of computers running IE8 on Windows XP weren’t enough.

Edge is Adobe’s very early answer to this problem. It’s an animation tool that leverages the timeline design interfaces of tools like Flash and Fireworks but creates standards-compliant output in HTML5, CSS3, and JavaScript. It uses WebKit — the open-source rendering engine that powers Google’s Chrome and Apple’s Safari, both desktop and mobile.

Content created with Edge is designed to work on modern browsers including those on Android, BlackBerry Playbook™, iOS , HP webOS and other smartphone mobile devices as well as Firefox™, Google Chrome™, Safari™ and Internet Explorer 9™.

Note the sequence: mobile browsers first — desktop is almost an afterthought.

Like Wallaby, Adobe’s Flash-to-HTML5 conversion tool, Edge is an Adobe Labs project in early preview release. The company’s not even calling it a beta. It can’t do much right now other than simple animations — enough for the HTML5 version of a “remnant banner ad,” as UI designer and Parsons instructor Irwin Chen quipped, but not for serious web design.

However, according to Adobe’s roadmap, Edge aims to be much more capable by its 1.0 release in 2012, adding in coding and interaction tools — making Edge potentially equivalent to Flash or Dreamweaver.

Adobe’s even coaxing its developers along with “The Expressive Web,” an HTML5-built site that shows off the new standards’ capabilities. It also has odd little games, and pop-up badges when you unlock achievements like changing web fonts. Baby steps.

The professional designers I spoke to, all of whom have largely eschewed Flash and Dreamweaver, were likewise skeptical about Edge. This tool isn’t for them — nor was it really made for them.

Adobe, Parsons’ Chen told me, is after the “not-so-hardcore web developer, the designer who needs to publish on the web. The barrier right now to those designers is the need to get down and dirty with HTML, CSS and JS.” Chen and IBM’s Sempere both expressed worry that this approach would further sideline both designers and developers, convincing companies that they can get along with one person doing both jobs.

It’s also worth remembering that the web — and increasingly, that means the mobile web too — is a workhorse. It builds forms. It powers webapps. You’re not building a shiny app to work on just one machine. You’re building a machine for commerce. All of that has to be designed, all of it has to be rendered, all of it has to be secure, all of it has to work across a huge range of machines and browsers with still-evolving standards, and frequently it has to be done with limited resources, and it has to be done in a hurry.

Get it working. Make it scale. Pull it all together. Sometimes that takes duct-tape solutions. But we use duct-tape because we know how it works and it gets the job done.

“The web is a disposable medium,” IBM’s Sempere writes. “Very few sites last more than 6-12 months, and if you can make a tool to help people shove stuff out the door, it makes sense to do it. Also, in the end, we raise the baseline of websites from unusable crap to middle-of-the-road-boring-but-useful… I am going to have an exceedingly hard time arguing that is a bad thing.”