TV version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

FACE

December 19, 2005

You know and love script.aculo.us, and now there’s a new kid on the block. The Javascript-based FACE aims to “enhance standards-compliant pages without sacrificing important aspects such as accessibility, scalability and flexibility.” Simple animation effects are enabled by the script, and then controlled by CSS; in theory, you can now animate any change you might inflict upon an element. Like, animating an element resizing. Or animating a palette cycle. Or growing a border. Or… etc.

A bunch of demonstrations of FACE in action are available in the various sections on creator Faruk Ateş’ site, KuraFire. Unfortunately, most are animation of the on-load variety, which you’ll likely remember growing sick of during the Flash days. It’s pretty hard to love pages that animate on their own accord anymore. Thankfully, FACE is not limited to that. Check out the example Destinations page for some basic hover effects; the interactivity options strike me as much more useful, especially in light of script.aculo.us.

While it would be premature to rush out and replace your copy of Flash MX with a bit of Javascript, FACE might just grow into an alternative for times when Flash feels like overkill. It should be interesting to see how this one develops. It has potential.


1
Zachary Jones says:
December 19, 21h

Does anyone else notice how much his design resembles that of Doug Bowman’s? You might could write it off as a coincedence, but then on his “People I’ve Met” list he mentions Doug, and even links to Stopdesign.

Benson says:
December 19, 22h

I can see really potential for FACE in navigation element and especially fly-out menus. It will certainly add more “interaction” to the websites, and use less flash-overkill. I say less plug-ins the better.

3
Moo says:
December 19, 22h

I would recommend MOOFx you go and have a look at this light-weight JS (3K) animated efx too. It works with classes and no inline JS cludges.
This means unobtrusive animated behaviour added like fades, resize font-size with ems!, cookies, etc. …

Go visit the site: http://moofx.mad4milk.net

Kyle says:
December 19, 23h

I’d love to know how this is any different than applying script.aculo.us effects with Behaviour(.js). I still don’t get why more people aren’t using it… anyways.

For me, that’s how I apply styles and it sounds exactly what he’s doing, except putting a new name on it.

December 19, 23h

Benson’s got it. That’s pretty much what it’s meant for.

Yes, right now the examples I’ve shown aren’t particularly usability-enhancing, they are there to show just how flexible this technique is. New examples that we’re currently working on are going to show that it can prove to be quite useful as an aid to usability.

Just like any other technology, it’s a tool that can (and should) be used properly, but there’ll always be people using it for something they enjoy themselves. I hope that the people giving it a try will try hard to use it in a way that truly enhances the user experience. AJAX/DOM Scripting events are a good situation for them, for instance.

Cam C. says:
December 20, 00h

Dave, it’s so odd that you mentioned this right now… I was pondering some AJAX stuff literally yesterday and though about scripting something exactly like this. I guess the proliferation of AJAX has probably got more than a few people thinking about what else Javascript can do.

On a related note, I keep pondering the value of coming up with a little Javascript snippet or two to “fix” some of the things that people dislike about CSS layout as well, such as not being able to balance multiple columns with floats; it would be pretty easy to get the length of the longer column and force the shorter column(s) to be the same length, freeing us from having to do things like faking column backgrounds in the parent object of the columns…

7
Cory says:
December 20, 09h

Zachary,

I hadn’t noticed until you commented, but looking at it again it’s very similar to the Stopdesign website.

December 20, 09h

Ironically, Flash has a larger (activated) installbase than Javascript does…

December 20, 10h

FACE sounds like everything I have been looking for rolled into one tiny package from what I can tell at first glance it loosk great but I doubt it will ever replace flash.

December 20, 10h

James, you’re gonna have to come up with some evidence of that. Almost everyone I know has either Adblock or Flashblock or just generally hates seeing Flash (especially when it comes with sound), whereas I’ve only ever encountered 2 people in my entire career who have JS disabled.

That issue aside, FACE is unobtrusive in nature. If you have JS disabled, you won’t get the added interactivity, but nothing is lost. That’s not the case with Flash, except for sIFR (but as I’ve said elsewhere, sIFR is only for headings, not for everything else)

11
Zachary Jones says:
December 20, 13h

@Cory: {shrugs} Promising technology, however. But like some of you others, I don’t see any reason to use it over Moo.fx or Scriptaculous. I’ve found both of those libraries to be just what I needed for my projects with a brilliant balance of features and easy-to-implement-ness.

12
Tony says:
December 20, 22h

This is off topic but WOW, can this guy copy a design or what? Can’t these people be a little more original? Looks like a k-mart rip off of stopdesign.

13
Martin Smales says:
December 21, 02h

Is there a chance of a FACE version of sIFR? That is, scripting is used instead of Flash.

Oh, don’t worry I don’t always disable JavaScript. The No Script FF extension seem to make it easy for me to do it :)

December 21, 03h

@Ashley

FACE will not replace Flash, since it’s way more limited than Flash. On the other hand, you can create subtle animations in an instant, without first learning a whole application.

Used in a subtle way, FACE can and hopefully will gain on Flash for creating small animations. Like animating navigations or other small elements. Perhaps a whole animated navigation stays annoying, but hopefully FACE will stop them from making inaccessible Flash navigations.


December 21, 09h

Hi all

First of all I need to say that I think FACE serves its purpose. It’s really nice actually. Together with this script.aco.us (prototype.js) and that mad4milk-stuff someone else posted pretty sweets effects can be made. I think Faruk’s done a great job ;)

Anyhow…
@Cam C: There IS actually stuff like that done already - it’s not overly complicated.
http://www.paulbellows.com/getsmart/balance_columns/
there’s what you’re talking about in your second paragraph. It’s great if you don’t know the total height of the page and general css can’t solve it. I used it on http://194.236.30.84/swedendesign2/?css=2 where you can see that the green left column popping down when the page has finished loading. (hey, I’m using your css-sprites menu there Dave ;))

@Martin: I don’t really understand what you’re aiming at, but the FF extension - web dev. toolbar allows you to turn off scripting with a (or two) clicks.

16
Maaike says:
December 21, 09h

I feel some people are getting a little carried away here.
FACE has some interesting possibilities, but it doesn’t compare to Flash at all. These animations are very basic - they don’t even scratch the surface of all the things that can be done in Flash.

@Faruk: most people I know have the Flash plugin enabled (often hardly even knowing about that), think Flash animations are way cool (except in advertisements) and have most probably never even heard of Flashblock etc. I dare say this is how most people feel about Flash.

Dave S. says:
December 21, 09h

“FACE has some interesting possibilities, but it doesn’t compare to Flash at all. “

Definitely. It’s not Flash, it simply overlaps Flash in a very limited capacity. As I said originally, “FACE might just grow into an alternative for times when Flash feels like overkill.”

Another tool for the toolkit, that’s all. It’s not an either/or proposition.

December 21, 17h

Yep, it’s not really trying to replace Flash, just offering an alternative. Mostly one for situations where you really don’t want to use Flash, but might want to (or have to) put some life in the page.

Like Dave said, it’s not either/or.

December 22, 09h

Hmm, my second comment didn’t get through..anyway:

The counter lists JavaScript’s availability as 89% (with 9% actively off and 2% with an old version). http://www.thecounter.com/stats/2005/November/javas.php

A NDC survey gives Flash a 98,3% penetration in March 2005 (That’s version 2 and above) and (as they now look at people with version 7+) a penetration of 97,3% in September 2005. Worth noting is that Adobe Acrobats 88,8% penetration rate (probably) doesn’t overlap completely with Flash’s (think office machines), so the merge of those two plugins should push Flash above the 98% mark.
( http://www.macromedia.com/software/player_census/flashplayer/ and http://www.macromedia.com/software/player_census/flashplayer/penetration.html )

December 22, 14h

Faruk, you may want to disable the script in Opera until the issue is fixed because it’s really stressing to see your browser disappear with a dozen of tabs opened.

Thank God Opera has sessions support! :)

December 24, 07h

Flash has about 97-98% penetration, while around 89% have Javascript 1.2+ and enabled. About 9% have JavaScript (stupidly) disabled.

I’d post the links where I got these from (onestat and macromedia) but the (two!) comments I tried post didn’t get through.

22
Flasher says:
December 24, 15h

Maybe if JS is disabled, Flash isn’t?

December 25, 01h

Vasil Dinkov: the Opera has not only preservation of sessions. An opera I think the best browser this day.

December 27, 15h

Ron DYatlov: I agree. For me it’s the best too. That’s why I use it.. :)

BTW, I noted that in Opera 7.23 and in Opera 9 TP1 the script works fine so this really should be due to some bug in 8.5 (not sure about 8.0). Anyway, I think a workaround is a must for the Opera versions that have the bug..

Stephanie says:
December 28, 07h

I see it as a great time saver for those smaller jobs but as far as a replacement for flash NO I do not ever see that happenning!

December 29, 07h

I’m continually impressed by the things one can do with JavaScript. It seems that Flash isn’t always the answer.

December 29, 10h

@Vasil

Indeed, only the 8.x versions have this problem. We haven’t found a fixed yet. We’ve also contacted Opera about this, but haven’t received any feedback yet.

Hopefully we can come up with a good solution, otherwise we have to disable FACE for Opera 8.x.

January 07, 23h

Wow, I am really surprised to see that 9% have JavaScript actively turned off. 99.15% of my visitors have JavaScript turned on. Now does that say something about my visitors or about those statistics?

steve says:
January 11, 08h

I think a lot of you are missing the point with the Flash vs Javascript thing: it’s about graceful degradation.

If you don’t have Flash, and a page or navigation system is done in Flash, you’re straight out of luck.

If you don’t have Javascript, then (presuming the Javascript coder is competent) it won’t matter at all.

Sure, you might have to do a whole round-trip page reload instead of something snazzily asyncronous. Sure, you might just have to put up with an old-fashioned change of page, instead of something dissolving out and a new something scrolling in from the side. And sure, things won’t animate and change colours as you move the mouse around.

But, you can still actually use the navigation, read the content, copy/paste the text, etc.

In many cases the degradation can be automatic - if js is there, fancy stuff happens; if it’s not, it doesn’t, but it was only frills anyway. In other cases it can be achieved by judicious noscript tags. Or - my favourite technique - delivering the page in a “for people with no js” state, along with onload js which rewrites things as necessary for js-using browsers. (Famous example: son of suckerfish).

This is why imho Flash is “bad” (by this I mean when not used for a specific Flash-esque function like an animation or game - I don’t rule out the technology entirely, I just strongly believe it has no place in navigation or whatever), and Javascript is “good”.

I’m a n00b with javascript and this animation stuff (I have recently been trying to integrate the Moofx mentioned above, but got deeply stuck because I don’t really grok OO js), but I’m happy to add it here and there, and trying to use it more and more. If I come across something which would make the site inaccessible or non-functional for js-off people, and there’s simply no workaround/alternative in straight (X)HTML/CSS/PHP, then I don’t use it. Otherwise, I use it.

That way I can know that if someone comes along with CSS2 support, JS, the full monty, they get a glitzy site, while if someone comes along with no css support, images off, js off, etc, they get an ugly (1995-style) but perfectly usable/readable website. It’s a continuum. Some people get 10% of the full experience, some 80%, some 100%. How much simply depends on what features they have - no browser sniffing allowed. With Flash, it’s 0% or 100% situation, which is why I dislike it.

Simon says:
January 27, 09h

Are there any other example site becouse i having trouble opening the one mentioned

jmkogut says:
January 31, 04h

Some people are starting to get it but I don’t think this has been said:

Javascript libraries were not made to replace Flash.

They don’t want to replace Flash
They don’t need to replace Flash
They wern’t intended to replace Flash.

So quit trying to make them what they aren’t. There simple, but effective tools to use to enhance your website. Nothing more. If you absolutely REQUIRE functionality, rethink the JS approach in favor of Flash. Like Dave S. said, it isn’t an either/or affair. You can compliment your fancy-pants bloated Flash game with JS or vice-versa, it doesn’t matter.