Abandoned Project: Make every webpage viewable back to Netscape 2.0

[e1ven]

Good Morning,

One of the hardest parts of working on a startup is choosing which ideas not to work on, however fun they might be; I'm sure that everyone here can relate to one degree or another.

Looking back over some of my old files I came across an very early sketch for a project that I think certainly could have been interesting; Since my time is all going into building a new web-based version of Chron X (The original online collectible card game), I thought that someone else here might be interested in building the project instead.

As browsers advance, they continually add new features- New rendering modes (SVG), New options for tweaking things to look right (Layer transparency). It'd be nice if there were a way to offer something to older browsers, however primitive and hackish it might be.

From the other side, there are a lot of situations where you are forced to use an older browser- Company policy or a locked down workstation.. Sometimes the machine is just too old to run modern browsers at a decent speed. It'd be nice if there were a way to at least view these new-fangled CSS2 sites, even if it was a degraded experience.

I thought about it, and realized that the capability exists to display almost every modern website back on every browser to Netscape 2.0, but it's nearly forgotten about. ImageMaps.

ImageMaps allow you to click on any X,Y on an image, and send that coordinate back to the server. No Javascript involved, and it works everywhere. It's an incredibly useful technology, which allows us to do a great hack.

We can take a URL in from a web form, and spit out a jpeg of the screen, as an Imagemap. The browser gets back something simple which it understands, and which works everywhere. They just see the site, as the only response in the browser window.

If the user clicks on the Rendered Page, the power of ImageMaps tell us the exact XY he clicked on; This means we can then click on that exact XY on the server-side, send a click to the browser, then send back the new page.

This allows the user to click CSS/Javascript menus, Follow Links, and have the site Just Work.

On the back end, it's actually drop-dead simple to support. The way I saw it, you can just set up an EC2 instance, and install X11 and Firefox on it.. Then, install a script which lets you take screenshots of the active app, and send it mouseclicks with an XY relative to the program window, and get back screenshots.

Where would you get such a tool? It turns out, that today's your lucky day ;) I had one written, and you're welcome to it.

http://darkenedsky.com/ScreenshotTool.zip

If you end up picking up this project and running with it, shoot me an email and we can work out some license that makes sense for you. Apache, or MPL, or whatnot.

I think it's a fun idea, and could be useful both from the client side, and the web developer side. The same idea could be extended (trivially) to make a site that shows what it renders as using different browsers, for the web-developer who needs compatibility.

There are a few dozen different ways to take this concept, and I'm sure that if you run with it, more will come up. I'd love to be of any assistance that I can, and am certainly available to offer suggestions and advice.

Colin Davis

Producer, Darkened Sky Studios

ChronX.com

[mxh]

Interesting .... one corner-case I see has to do with mouseover. For instance, some sites (http://www.newegg.com) use JS to dynamically expand/contract menus based on mouse travel. I don't think a simple ImageMap would hack it in that case. Do you have a workaround in mind?

(Granted, sites are typically built to not _depend_ on this sort of fancy JS.)

[e1ven]

Interesting point, I hadn't thought about mouseover.

I think it is supportable, though, but the UI isn't perfect. You could easily have a UI toggle that says "Move mouse to", versus "Click on", when you press a X,Y on the screen.

Granted that isn't as clean as it could be. How would you solve it?

[igexome]

I find two issues relative to using this (sorry to be so quick on negativity):

- Screen readers. They won't work! - Usability is somewhat odd, as the entire time the mouse cursor will be a "hand", making everything seem clickable.

[e1ven]

Screen readers won't work- True. But keep in mind, this isn't a primary design for any site.. It's a work around for un-supported browsers. People browsing with a screen reader would probably be using something which gave a user-agent of IE6 anyway.

Alternatively, if you really wanted to ensure that it supported people who it isn't intended for, you could always include the text of the page you're Translating at the very bottom, as black on black in a 1 pt font. The Screen Readers would still pick it up.

[dhouston]

i don't know if 'old browsers' is the target market, unless there's some funny niche somewhere that can't upgrade their browser.

maybe a neighboring idea would be creating a proxy for low-bandwidth devices -- e.g. transparently compressing/downsampling images, CSS, JS, HTML so that browsing on EDGE is a little more bearable with an iphone or other mobile device. (this might already exist, but i haven't heard of anything like it)

although i guess that wouldn't really use your imagemap hack or screenshot tool :)

[e1ven]

As you mention, It would also work well for phones with bad web browsers, or devices who's browsers will become out of date, such as the browser for the Dreamcast.

I suspect there are more people on older browsers than you might suspect- There is a staggering number of people still using browsers which don't natively support simple things like PNG transparency, or Properly nested layers.

Essentially, you could think of it as a last-ditch fallback, which ensures that it displays properly, even the UI experience is no longer ideal.

The nice thing is that you wouldn't need to run it on the client-side.. They could just browse to http://fixthispage.com/news.ycombinator.com and it would give them a version as an imagemap.

[joshwa]

opera mini, google's mobile search

[dfranke]

How would you make forms fillable?

[e1ven]

That's easy. Give the user a blank form underneath the picture. Click on the form in the Imagemap, type the form into the picture, and hit submit.

Boom! Text is now in virtual-browser.