thinair Boulder, Colorado. elevation 5400 feet.

JavaScript form vs. content

I'm stewing on an JavaScript idea. I'm short on tinkering time, so I haven't built an example. Maybe it's a job for the lazy web. ;-)

How about stripping all of the navigation clutter out of a web page and using JavaScript to insert it for web browsers. Instead of just extracting a pullquote or adding paragraph anchors, add all but the most essential navigation via JavaScript. It would be a more extreme separation of form from content. Give the Googlebot and its colleagues only the relevant content in the page and none of the tangential navigation.

I'd also want to make use of tags to store the "related items" or "see also" kinds of info. Some navigation links don't belong inline with the post itself but are sufficiently related to the content that they would do well to be included in the page -- the stuff that would help the search engines connect the dots.

The JavaScript code could extract data from the link tags to produce content-related navigation in addition to the common header and sidebar.

A number of things have inspired this idea. Simon has been pushing out some interesting JavaScript goodies lately, and I have my own experiments with a JavaScript animation language in SVG. But the clincher for me was a masterful piece of JavaScript that I bloghopped to a few weeks back amid the purple-link, plink buzz. Unfortunately I failed to bookmark it or blog it or copy and paste it. Surprisingly I cannot find my way back to it via Google, nor by retracing my footsteps through comments in various blogs.

I'm left describing it in words. Seems to be a theme today: words without examples. Sigh.

It was a page of latinesque gibberish, if I remember correctly, with light grey pilcrow marks at the end of each paragraph. Nothing notable at first glance. But then a small UFO enters the page and bee-lines it to a position just above the first pilcrow on the page. There's a small shadow of the UFO which creates the sense of depth. Once in position, a beam extends from the UFO to the ground and the pilcrow mark floats up within the beam into the UFO. Then the UFO bee-lines it to it's next abduction victim.

I glanced briefly over the source and it was all done in JavaScript. A really fun piece of work. How I wish I'd bookmarked it. How I wish I could find my way back to it. If you saw it too and know how to get back to it, please speak up in the comments below.

Update: Hoorah! Simon provided the link in the comments. Thanks, Simon. the plink abductor

The search itself exposed one of the other sources of inspiration. I'm tired of landing on sights because they happen to mention one of my search terms in their side bar but nothing in their content is related to my search. There's just enough in the Google snippet to lure me to click, but only disappointment to be found when I get there.

There's a fun way that the search engines and web practices are growing symbiotically. Replacing tables and dot.gif image tags with CSS leads to more clean and perhaps even meaningful markup without loosing beautiful designs. Is this idea a useful extension of that idea? Maybe I'll have to actually tinker with it before I can get a good answer to that question.

Simon Willison commented

16 June 2004 at 09:22

That was my friend Andy's plink abductor: