Bruce Lawson’s personal site

Hello, Adobe Edge!

On 1st August, Adobe unveiled Edge, a preview of a product that does non-Flash animation. The magazine .net asked for my reaction, and I gave them an edited version of these notes below. You shouldn’t take this as any official Opera position, by the way.

I think it’s a good move from Adobe, and one that’s been widely expected for a couple of years now. I’ve been predicating it since the HTML5 hype really went into over-drive.

Now motion graphics are increasingly rendered via the Open Web Stack (HTML, CSS, JavaScript, SVG, WebGL) rather than a single-vendor plug-in, designers will require authoring tools that can help them turn their creativity into code. Adobe make their cash from selling authoring tools, not distributing the Flash Player – so if people want to author non-Flash motion graphics using a designer-friendly IDE, someone will provide that IDE. Adobe have a great track record on making IDEs that designers find user-friendly. Seems like a no-brainer to me.

I describe Edge’s output as “non-Flash motion graphics”, for two reasons.

Firstly, Edge doesn’t seem to compete with Flash; its visual metaphors aren’t those of the Flash authoring tool, and it makes simple animated thingies (banner ads, amusing pictures) rather than game-like experiences that you can interact with, or movies with sounds (the things I I associate with Flash.)

Secondly, there isn’t any “HTML5” about Edge at all. Many companies’ marketing people have realised that if I call my dog ‘HTML5’, it’s more likely to win Crufts than if I call it ‘CSS3’ or ‘Open Web Standards’. So everything is ‘HTML5’. It’s a shame, but there we are. Adobe are certanly no more guilty of this than Apple, Google or any number of journalists and analysts.

If you look under the hood of Edge, there isn’t even any use of NEWT – CSS transitions or SVG. In short, what Edge produces is simply old-fashioned DHTML – moving meaningless <div>s around with JavaScript.

This isn’t necessarily catastrophic. A banner ad made in DHTML will render on iOS, whereas a banner ad made with Flash won’t, so there is a win there for site owners – and, let’s face it, some people (the group I call the The iPony Club) see the terms “HTML5” and “iOS” as interchangeable.

More worryingly, Edge produces non-semantic divs and hides textual content in JavaScript. Morena Fiore’s demo animates the word “Why?”, but that text is not in the source code at all. A user without JavaScript simply would not get the textual content at all.

But the Adobe guys are listening:

We started with DIVs because we wanted to get something out there quickly that folks could play with. I say we “started” there because Edge will be evolving rapidly – the product is by no means feature complete.

Hopefully we’ll see regular previews with an increase in semantics and optimisating logic whereby those animations that are best done in cross-browser CSS are done there, whereas those best achieved in SVG or canvas are done there. It’s not impossible, and tools like Dreamweaver show that WYSIWYG tools are not incompatible with semantics and good-quality robust code.

It’s early days yet, and it remains to be seen how cross-browser and lightweight the resulting code will be in the final release, but I tentatively declare it a win for the open web stack and a win for designers (and developers like me) who find scripting animations in a text editor keeps them awake at night in a cold sweat.

4 Responses to “ Hello, Adobe Edge! ”

Comment by Steve Fenton

A nice balanced analysis. It has some flaws, but it’s new and there are plans to improve it.

It will be interesting to see how things develop in this area.

Comment by Steve Williams

I totally agree it was an obvious move for Adobe, but I’m unclear how replacing Flash with Edge in anything resembling its current form is a win for anybody but the unskilled who are too lazy to learn CSS and javascript, and are also prepared to forego semantics and even the most basic rendering of their content (a blank screen with javascript off) in the process?

Edge also flies in the face of progressive enhancement with its all or nothing delivery; and I fear it won’t be long before we see entire sites built in Edge once Adobe enhances the feature set.

These points set alarm bells ringing in my head, but so far it seems I am in the minority/unity regarding how disastrous Edge may end up being?

Comment by Bruce

Steve(s) – if Adobe do it badly, so progressive enhancement and semantics go out the window, it’ll be a disaster.

But, given their product stable (or the ones I know) I imagine they’ll prefer to follow Dreamweaver rather than Frontpage.

(Cue loads of snarks about Dreamweaver, but when I used to use it I always thought it did a pretty good job).

They’re also listening, which is always A Good Thing

Comment by Greg Rewis

Bruce, thanks for the write up. All of us at Adobe are very excited by Edge, and the open web in general. Edge is but the first of many exciting things that we have going on at Adobe.

I wanted to make a point about the code that Edge is generating. As you rightly pointed out, our chief architect for Edge, Mark Anders, has already stated that this first preview (not beta… this is just the first stable build that we wanted to share with the public) is an absolute “work in progress”. Trust me, I will be watching the code output like a hawk and advocating the “best practice” approach.

However, there is also a piece of the equation that is missing in many people’s analysis. That is, you don’t have to build everything in Edge! In fact, I would foresee that most of us would build the semantics, get the CSS tweaked, and THEN open that page in Edge to animate the elements that I want to move.

Following this workflow, Edge won’t generate meaningless div soup and, if JS is off, I still get my beautiful layout without the animation.

Cheers – and hope to see you IRL soon!

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> . To display code, manually escape it.