Tiffany B. Brown

a mish-mosh of stuff

Web trend spotting: Sliding, whiz-bangy JavaScript-driven pages

I’m noticing a trend: HTML, CSS and JavaScript-based web sites with the same slick animation we usually associate with Flash. This is the bleeding edge of client-side web development (unless you count Ajax, which involves some server communication). And it’s all made much easier by JavaScript libraries such as Mootools + Moo.fx, Prototype and Script.aculo.us.

All of the web sites below use JavaScript-driven transitions to navigate between their “pages” — only every “page” really lives in a single (X)HTML file that’s shaped and driven by JavaScript and CSS.

Do you think this will become the next web interaction trend? What do you think of sites like these?

(* Only because I coded it.)
(** Actually, Meta does some funky, complicated thing involving an iframe that I haven’t quite figured out.)

  • http://elainenelson.org/ Elaine

    Honestly? Not a big fan. Unless done with a lot of care, it breaks the whole bookmark/direct link/back button convention(s).

    I guess if you’re going from Flash to HTML, then it’s a step up, otherwise, just too much possibility for confusion.

    (I say that even tho I think your work for MODA is incredibly beautiful.)

  • http://elainenelson.org Elaine

    Honestly? Not a big fan. Unless done with a lot of care, it breaks the whole bookmark/direct link/back button convention(s).

    I guess if you’re going from Flash to HTML, then it’s a step up, otherwise, just too much possibility for confusion.

    (I say that even tho I think your work for MODA is incredibly beautiful.)

  • http://www.tiffanybbrown.com/ tiffany

    I agree, actually. You have to think about the details of how people will use the site. It’s a little more challenging to create as a programmer because you have to account for those browser limitations.

    I’m also concerned about how it affects search engine placement.

    With MODA, we were able to preserve some of the back button’s functionality. I also think we’ll be okay on the SEO front because there’s a press release section that is separate and apart from the main site.

  • http://www.tiffanybbrown.com/ tiffany

    I agree, actually. You have to think about the details of how people will use the site. It’s a little more challenging to create as a programmer because you have to account for those browser limitations.

    I’m also concerned about how it affects search engine placement.

    With MODA, we were able to preserve some of the back button’s functionality. I also think we’ll be okay on the SEO front because there’s a press release section that is separate and apart from the main site.

  • http://7andacrescent.com/ Frank ‘viperteq’ Young

    There are Javascript code snippets available that allow the dev to keep track of the users “history” and allow the user to interact with it via the Back button. The only issue that I see really with mass adoption of this is Advertisers: Users are tired of popups and adsites resizing their windows without their permission. That’s usually why most people disable Javascript use in their browser of choice.

    If devs want to increase widespread adoption of Javascript in their sites for the purposes of effects, etc., then someone is going to have to come up with a way to get these various Advertisers to agree to a set of rules on how to publish their adverts across the web. Something standardized that all adverts should adhere to before publishing on the web.

    By the way, I’m on a Mac and the new Safari 3 beta absolutely rocks!!!! You gotta try this text-box resizer..

  • http://7andacrescent.com Frank ‘viperteq’ Young

    There are Javascript code snippets available that allow the dev to keep track of the users “history” and allow the user to interact with it via the Back button. The only issue that I see really with mass adoption of this is Advertisers: Users are tired of popups and adsites resizing their windows without their permission. That’s usually why most people disable Javascript use in their browser of choice.

    If devs want to increase widespread adoption of Javascript in their sites for the purposes of effects, etc., then someone is going to have to come up with a way to get these various Advertisers to agree to a set of rules on how to publish their adverts across the web. Something standardized that all adverts should adhere to before publishing on the web.

    By the way, I’m on a Mac and the new Safari 3 beta absolutely rocks!!!! You gotta try this text-box resizer..

  • http://www.henick.net/ ben

    Coumt me among those who think that the MODA site is most spiffy.

    By my way of thinking standards-friendly techniques will indeed supplant Flash, but not because they are inherently better (even though I believe tat they *are* in fact better).

    Rather the profusion of free JavaScript libraries really opens things up, while at the same time the absence of competition will effectively drive up the cost of Flash (and thus its attendant barriers to entry).

    I think that, as with Flash, a lot of the results are driven by a desire for bells and whistles, far more than by any need for the dynamic whatsits afforded by the DOM API. For this reason I remain annoyed but at the same time sympathetic to those are are nudged into implementing such things.

    I remain annoyed that none of the browser vendors has thought to create the necessary browser-native audio and SVG hooks required to obviate the role of Flash as an interface development tool. Flash-only sites must die, die, DIE!!! Ahem. Where was I?

    [Full motion animation and a/v a la Youtube? Hurrah. Interfaces? ...Not so much. In most cases, might as well hang a sign saying to impaired users, "and the horse you rode in on."]

    Finally – I want to point out that the last item on your list of examples is quite possibly poor man’s AJAX, though I cant say for sure since I haven’t yet looked at any source. The iframe, meanwhile, is a strong marker of that technique.

    To elaborate on this last point – given an iframe, one can load data there and then copy it across from the iframe’s DOM to the parent canvas’ DOM with comparatively little difficulty, and also without the need to perform feature detection.

  • http://www.henick.net/ ben

    Coumt me among those who think that the MODA site is most spiffy.

    By my way of thinking standards-friendly techniques will indeed supplant Flash, but not because they are inherently better (even though I believe tat they *are* in fact better).

    Rather the profusion of free JavaScript libraries really opens things up, while at the same time the absence of competition will effectively drive up the cost of Flash (and thus its attendant barriers to entry).

    I think that, as with Flash, a lot of the results are driven by a desire for bells and whistles, far more than by any need for the dynamic whatsits afforded by the DOM API. For this reason I remain annoyed but at the same time sympathetic to those are are nudged into implementing such things.

    I remain annoyed that none of the browser vendors has thought to create the necessary browser-native audio and SVG hooks required to obviate the role of Flash as an interface development tool. Flash-only sites must die, die, DIE!!! Ahem. Where was I?

    [Full motion animation and a/v a la Youtube? Hurrah. Interfaces? ...Not so much. In most cases, might as well hang a sign saying to impaired users, "and the horse you rode in on."]

    Finally – I want to point out that the last item on your list of examples is quite possibly poor man’s AJAX, though I cant say for sure since I haven’t yet looked at any source. The iframe, meanwhile, is a strong marker of that technique.

    To elaborate on this last point – given an iframe, one can load data there and then copy it across from the iframe’s DOM to the parent canvas’ DOM with comparatively little difficulty, and also without the need to perform feature detection.

  • http://aurgasm.us/ Paul Irish

    I really enjoy your moootools implementation on MODA. It could definitely make use of an easing function in your Fx.Scroll definition, though.

    Btw- Meta Design is using some really heavy ajax calls to grab all the relative content. They’re managing history though RSH (http://codinginparadise.org/projects/dhtml_history/README.html) which was developed by Brad Neuberg who is currently on the Dojo Offline project.

    The YUI Browser History Manager is the only other top contender in the field of ajax history and bookmarking management.

  • http://aurgasm.us Paul Irish

    I really enjoy your moootools implementation on MODA. It could definitely make use of an easing function in your Fx.Scroll definition, though.

    Btw- Meta Design is using some really heavy ajax calls to grab all the relative content. They’re managing history though RSH (http://codinginparadise.org/projects/dhtml_history/README.html) which was developed by Brad Neuberg who is currently on the Dojo Offline project.

    The YUI Browser History Manager is the only other top contender in the field of ajax history and bookmarking management.

  • http://www.tiffanybbrown.com/ tiffany

    Bah! Paul, where were you when I was knee deep in this stuff? :-) .

  • http://www.tiffanybbrown.com/ tiffany

    Bah! Paul, where were you when I was knee deep in this stuff? :-) .