

Abandoned Project: Make every webpage viewable back to Netscape 2.0 - e1ven

Good Morning,<p>One of the hardest parts of working on a startup is choosing which ideas <i>not</i> to work on, however fun they might be; I'm sure that everyone here can relate to one degree or another.<p>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.<p><p>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 <i>something</i> to older browsers, however primitive and hackish it might be.<p>
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 <i>view</i> these new-fangled CSS2 sites, even if it was a degraded experience.<p>
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.<p>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.<p>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.<p>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.<p>This allows the user to click CSS/Javascript menus, Follow Links, and have the site Just Work.<p>
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.<p>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.<p><a href="http://darkenedsky.com/ScreenshotTool.zip" rel="nofollow">http://darkenedsky.com/ScreenshotTool.zip</a><p>
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.<p>
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.<p>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. <p>Colin Davis<p>Producer, Darkened Sky Studios<p>ChronX.com <p>
======
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.

------
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.

