New site navigation

[rui]

Well, i just tried the preview of new kind of site navigation, and i want to give doom9 my vote for it. :)
I like the new way a lot.

[spectra]

Well in IE this new menu works well, but no menu in NS 6.1 or Opera 6.0. Should be the typical Javascript IE-only problems.

[avih]

cool, but doesn't work with mozilla 0.99 either.

[Faro]

Well, why don't you look for a cross-browser tree menu (if you really believe a tree menu would make navigation easier).

I've used such a menu myself for a website I created for a consulting company (--> information-works.de (http://www.information-works.de) ). Here you see, that this code runs on alle browsers. And as far as i've looked in your navigation - the code is far more simple and compact. It is also displayed when using a non-javascript- browser.

If you want to reduce bandwidth - make it as easy as possible

Greetings
Faro

[Doom9]

this kind of feedback is exactly why I went for a public testing phase. But.. I didn't make it and I need somebody to provide a done script (but to which I can easily add items or remove some). right now I have an excel sheet, I can copy and paste lines, then copy the html code into a text file, save as html and I'm done.

[Faro]

hm - ok. But when it comes to an easy administration i would suggest to use php or python (if your server is able to do this).

I could give you my code from the information-works.de Website. When you give me a week I can also change it to your/our needs.
A plus/minus symbol is also possible.

btw. I've done a few translation of the guides (the whole divX and the whole audio guide) to german language a few weeks ago. These are on my HD. Are you still interested in a german version of your whole website. I could provide some parts to you.

Greetings Faro

[Doom9]

unfortunately php is not an option as the server having the biggest bandwith reserves doesn't support it and the admin won't install it. python? don't even know what that is

would be nice if you can come up with something that's easy for me to use and works in every browser.

btw... attached is the share of browsers used to access my page

[Faro]

Am I the only one using Mozilla? I visit your site more than once a day - and no 1%? *g*

So what i recently have read is:

User-Agent Percentage

MS Explorer 6.0x 29,4 %
MS Explorer 5.5x 19,1 %
MS Explorer 5.0x 16,7 %
Netscape 4.7x 10,5 %
Gecko (Mozilla/Netscape 6)8,9 %
Opera 6.x 6,5 %
Others/Unknown 3,2 %
KDE Konqueror 1,6 %
Opera 5.x 1,2 %
MS Explorer 4.0x 0,9 %
Netscape 4.5x 0,7 %
MS Explorer 5.1x 0,7 %
Netscape 4.6x 0,5 %


ok, and I'll send you a working menu (which will be easy to use - trust me on that ;-)) on the next weekend.

[Doom9]

are these the heise stats?

if you can.. would be nice to have the two images in the images/ directory and have a menu close when you open another one.. like the winxp explorer does

[Faro]

yep - the heise stats (how do you know?)

would be nice to have a menu close when you open another one.. like the winxp explorer does

...should be no problem.

What about the translations of your site - there are many germans who are still using flask because of their bad english and by far the most important reason - there absolutly no quality sites in german.

have to work now

Faro

[primitive]

Mozilla 0.9.9+ user here, your navigation is terribly broken.

[Doom9]

@faro: have you seen the current menu using IE? there's 2 sublevels, but the lower one is realized using idents rather than another regular submenu (as in explorer).

about the german translation: sure.. go on, I'll host it.

about the heise stats: I read ct, too ;)

@primitive: if you had read the whole thread you'd see that we're aware of the problem and already working on a solution. And since you're part of that less than 3% minority you should be just a little grateful for it because it's an awful lot of work for very little gain ;)

[athos]

Doom9: I really like the idea of explorer-like menues, and have created two dhtml pages for this:
* http://athos.n3.net/explorer - this one is created dynamically (through js) using a javascript file (items.js).
* http://hem.passagen.se/nsane/xntrik.html - this one is "static" in that it is not built on the fly. this example is a really big file because it is the index of an ftp, but when there are less items it is a lot faster than the previous one.

I just tested these two again, its been some time since i wrote them, and it seems that the first one only works in IE, and the other one does work in both IE and NS6.2. It would be easy to modify the first one to work in NS too, because they are both supposed to be W3C CSS compliant.

Please let me know if you would be interested in using any of these approaches, I'd be happy to modify them, or assist you in modifying them.

[primitive]

Originally posted by Doom9
@primitive: if you had read the whole thread you'd see that we're aware of the problem and already working on a solution. And since you're part of that less than 3% minority you should be just a little grateful for it because it's an awful lot of work for very little gain ;)

Hah.

The thought process for posting on a discussion board is read --> comprehend --> post; I posted before I both read and comprehended >.<

Something to think about for the "Why should doom9 support Mozilla browsers?" crowd: AOL's latest beta of their connectivity software is using the Mozilla core for its rendering engine instead of the Internet Explorer core. Having your page render incorrectly for these browsers could make your site inoperable for significant numbers of people.

[cofferscuffs]

my 2$ (and im open to flames on this one!!):

AOL = Arseholes OnLine

[Doom9]

well... it remains to be see if the release version will indeed not contain IE. At this point that is pure speculation as they're merely testing. Mozilla has yet a lot to show until AOL will make any commitment.

[Refthoom]

Wow. A lot of good stuff raised here.

I made the menu for doom9. I focussed mostly on something that doom9 could administrate himself easily because he doesn't master javascript or DHTML. This would explain why it's probably not the best script around. However, I _did_ test it with IE 5.5 and NS 4.7

@athos & in general: The menu is in a frame and you can't go over the 'edge' with DHTML or scripts. That's why the menu is rather 'compact'.

@doom9: You should've started this thread earlier ;-) BTW, you quit your email-address at ifrance where I sent you the latest. Did you get it?

[primitive]

Originally posted by cofferscuffs
my 2$ (and im open to flames on this one!!):

AOL = Arseholes OnLine

I do in fact agree with you. (NOT AOL)

However, the browser stats stated previously aren't fine-grained enough to be able to tell how many visitors were using AOL and how many weren't. Therefore, no one's really sure at this point how much difference a core switch would make in the hit data.

[Doom9]

@ref: yup.. I got it

@primitive.. well.. I have isp stats, too ;) but aol doesn't stand a chance against t-online.. they rule the stats with almost 20%..

[Stebet]

Just wanted to plug a friend of mine since you're looking for a good site navigation. He has actually made a pretty cool semi-cross-browser navigation tree, which has become quite popular since it's completely free.

check it out at www.destroydrop.com

b.t.w, thanks for a wonderful site there Doom9.
Keep up the good work!

[fisix]

the new look is reasonable, especially if it ends up using less bandwidth to find the specific guide someone might want. i can never decide if i want the forum to show up inside the homepage frame, or if i like the automatic new window. i think i like the frame option, even though i feel a little claustrophobic.

always, go for the lower bandwidth option

-fisix

[fisix]

also, i would prefer that you do not have open branches close when a new branch is opened in the menu. i typically want to view links in multiple branches at the same time. the auto close thing has always aggravated me.

-fisix

[avih]

Originally posted by athos
...* http://athos.n3.net/explorer - this one is created dynamically (through js) using a javascript file (items.js).
* http://hem.passagen.se/nsane/xntrik.html - this one is "static" in that it is not built on the fly. this example is a really big file because it is the index of an ftp, but when there are less items it is a lot faster than the previous one.
..

confirmed, both work on mozilla 0.99

[Faro]

Well both menus are quite heavy (see the code - doom wants to reduce bandwidth and not waste it.

let's see - i'll post my results this evening

[athos]

I think my two examples are not that bandwidth demanding.

The first one has the drawback of creating the items on the fly with javascript, which can be cpu intesive if there are a lot of items, but it is easier to configure because all items are just entered into a javascript array.

The second example is a very large file, thus bandwidth demanding, but this is because there are a huge amount of items in my example. Doom9's menu would never grow this big i think. It should be less cpu demaning though, given a reasonable amount of items. Though it is harder to configure.

I think it might be better for Refthoom to just modify his menues to work with all the browsers, because i understand they should be easier for Doom9 to configure. A good idead (in theory) is to start with the W3C DOM and CSS and then try to make as small modifications for each browser as possible. However, after having done my share of DHTML development i must say that it is not this easy in practise. When you think you've got everything right, try it on MAC in IE..

[Faro]

the second one is, because it loads the entire menu, although it might not be used by the user (;)).
So what i'm developing is a menu build on demand (or on the fly as you said).

I think it it would be difficult to modify the dhtml to fit the wc3 rules, ns4 is simply unable to interpretate the complete html 4.01 and css.2 tags/definitions.

Faro

[athos]

well building the menu on demand is interesting, but im not sure it is necessary since these menues will never have too manu items (like >100). my first example is "on-the-fly" because it creates the dhtml elements at runtime using the data in the array, while the second example has all elements hardcoded. So both really "load" the menu at render time. well, i still think you have an interesting idea, and it is worth a shot.

In my opinion, we should ditch support for NS4. The browser is very old and i would say obsolete. when it comes to dhtml support it is inferior. Simply puy: Netscape below 6 does not support dhtml. it supports some fractions of dhtml, and it is possible using various ways around to make some things work, but the code will be very ugly and errorprone, and imho its not worth it because very few users still use ns4, there are several alternatives (all free of charge). If NS4 and IE<4 (maybe <5) is not considered, it should be possible to write w3c compliant code with only slight modifications (for example i dont think IE supports the standard event handling as ns6 does).

[Doom9]

faro: checked your menu.. looks nice.. though we have to cut down the description length to make the left frame shorter (I never uploaded the new version that I shortened down).

How is it realized? I had the feeling it took a bit when I clicked on a plus sign.

[Faro]

Originally posted by Doom9
How is it realized? I had the feeling it took a bit when I clicked on a plus sign. It loads the submenus on demand - so on the fly when click on'em. This will reduce bandwidth.

The small delay comes from your internet connection. Whith (T)DSL it shouldn't be noticeable (i think so).
And fortunenatly after you clicked on it a first time, the delay will not repeat after clicking a second time.

The code is smaller than your first try published in the news section. And of course - cross browser compatible (only a javascript enabled browser is required - if you like i could add a non javascript part - so these people can view the menu, too - but i will not suggest it!)

the menu is easy to administrate (in my eyes *g*)

I'll work on the code later.

Oh - and would be nice to hold back other people from making new menus ;-) - this was quite a bit of hard work (had to look up the whole script reference *g*)

Faro

[Doom9]

hmm.. I guess if you put the script in an external file I could add it to the ref check.. and since there's no download link that would effectively stop people from getting it.

[Faro]

Athos: There are definitly more people using NS4 than NS6 - so I think it would be unfair to give them a blank page instead of a working menu. They still seem to have reasons for using ns4 (though i cannot understand them *g*). So why don't make it possible to build this kind of menu.

It *is* possible - doom9 could acknowledge

Faro

P.S.: i post the URL later, it's not that perfect at the moment - but will be - hopefully.

[Faro]

Doom9: What do you mean? Main parts of the script *are* in an external file.
But this will btw. not help to stop people see the code (-> they can look the location up in the source).

perhaps i got something wrong with your post...

Faro

[Doom9]

say your script is called menu.js and is in the root of my site

if I put *.js in the ref check.. menu.js can only be loaded via a http get that originates from one of my servers... so putting a http://www.doom9.org/menu.js in your browser to download it will not work (you'll get an unauthorized download message).. the only problem with that could be that if the browser gets the javascripts and stores it in the cache.. there's no stopping the browser cache.

about NS4... right now they're not supported either.. the counter javascript stops the left frame (it shows up until the counter has loaded.. then all you get is an error message)... you can get around that disabling javascript but that will also disable the quick links and the upcoming menu. Officially my site only supports IE5+, NS6, Opera6 and Mozilla (always the latest ;) Some people have to be forced to upgrade, it's in their own best interest even if they may not see it.

[athos]

Faro> Having to reload the menu for every click in it will definately be slow. Take a look at this for example (in swedish, but just look at the tree menu): http://www1.skribofont.se/prislistan/
It makes no sense with files as small as this (couple of kbs), it will make navigating the menu slow for the users, and it will send a lot of extra http requests to the webserver.

[Faro]

Ok, i see, Doom

So how do we go on now?
Be compatible or be mighty? ;-)

So with stylesheets my Menu needs 7kb - the original one needs 13kb - and is not compatible to some browsers.

Update: now the left frame including the code for the menu is 6.08 kb - what about this one? ;-)

Choice is to make...

to athos: it looks like this menu working serverside (with asp - urks) there you see a reload on every click (also to close the menu).

My menu just loads on *one* click. The click the user needs. It is, if you summarize as fast as downloading the whole menu onLoad of the site.

Faro

[athos]

faro> ok i thought you meant like the site i pointed to.

i implemented doom9's new menu into my javascript here: http://hem.passagen.se/nsane/doom9/

the entire menu is 22kb, whereof the images are 10kb. i changed the script slightly so it now works in NS6.2. As you can see, all configuration is done in items.js (http://hem.passagen.se/nsane/doom9/items.js) and its pretty easy, however you have to keep track of id numbers so the "parents" (folders) gets the right "children".

[Faro]

well looks like the windows explorer (is there any need of rebuild this ugly thing on the web? ;-) ).

so still my menu is smaller in filesize and the administration is as "easy" as in your one. So why not use my menu - or better combine the features in a new one -
Maybe we build a new one together...?

Then doom9 didn't have to do the work...

just send us your layout (the structure of the menu).

comments on that?

Faro

[athos]

Sure, i'd like to help anyway i can. i do not necessarily have see doom9 use my menu, i just wanted to show it since i had allready made it.
The files used are:
index.html (http://hem.passagen.se/nsane/doom9/index.html) very simple, just loads the other files
explorer.css (http://hem.passagen.se/nsane/doom9/explorer.css) the stylesheet, including hidden and displayed items
explorer.js (http://hem.passagen.se/nsane/doom9/explorer.js) the program; preloading images, sorting items (disabled here) building the menu (creating dhtml elements and structure), opening and closing folders.
items.js (http://hem.passagen.se/nsane/doom9/items.js) the data file, items have the form [ID, PARENT, NAME, LINK (if not folder)].

I think it should be pretty easy to have a different look by just adjusting the stylesheet, and maybe the images. Of course it would not be hard to remove the connectors and lines, but this would require some changes in the code.

Maybe this menu is not the way to go for this site, but perhaps there are parts or ideas that could be used? If someone else wants to use this code for their sites, they are free to do so ;)

[Doom9]

hmm.. one one hand I really like athos' menu.. people are used to explorer and know how to navigate.. on the other hand I wonder if the images are really necesary.. how about we try it just with the pluses and minuses? it would take up less space so I wouldn't have to enlarge the left frame or make it scroll horizontally.

[athos]

Maybe if i remove the icons, and just keep the plus/minus and connectors/lines. I kind of like the lines, what do you think? I will try this tomorrow, too late now (1:25 am)

[Doom9]

yeah.. worth a try.

godnatt

[Faro]

I think the connectors are redundant.
People will recognize the structure of the menu even without these lines.

Still where do you think my menu has disadvantages?
The small delay is really unnoticeable! But the code easer and much more compact.

Faro

[athos]

OK, i have now removed the folder etc icons, changed colors to match this site, including changing the color of the plus/minus/connectors. i do not agree that the connectors are redundant, also they take very little space (in bytes) and also little space on screen because if we remove them there should probably be white space there to indent the submenues. i think the connectors make the navigation clearer.

http://hem.passagen.se/nsane/doom9/

i also removed the images that are not used, total size is now 12kb.
so what do you think? i looked at the source for the current menu (of the new design) and too me mine seems even easier to configure (but i guess im biased =)

Faro> would it be possible for me to see your approach? send me a pm if you dont want to post it in public.

thought: i find myself sort of trying to compete here, and i dont think this is right. i think we should collaborate to get the best results. we should try to get the best ideas from everyone, thats why i would like to take a look at faro's work.

another note: ot would be very easy (one line, allready implemented but commented out currently) to make the entire menu alfabetized. good/bad?

[Doom9]

how about we let the readers decide? present them the 3 options we have now... faro's menu, athos' new menu and the old explorer-like one. I'd also like if you could present the updating process to me so I can decide for myself what I like better.. and of course in order to show it to the public I'd have to reconfigure the menus somewhat so they all show the same..

would be great if you guys could put a working page together so that people also can see how large the navi frame has to be..

[tommysch]

New menue design works (!) and looks good in NS 4.6. But probably only until you put the counter in, right ? ;-)

@Doom9: You do read c't ? Are you german or is there an english version ?

tommysch

[Faro]

Hi again,

athos: http://www.e96.de/doom

Your current menu does not work with ie6, mozilla 0.9.8 and not with NS4.7. I can see it but it does not collaps or expand.

thought: i find myself sort of trying to compete here, and i dont think this is right. i think we should collaborate to get the best results. we should try to get the best ideas from everyone, thats why i would like to take a look at faro's work.

sure - thats what i think, too.

Sort the Menu entries by name order is a good idea, but could also be done manually i think - don't waste a line of code *g*.
But sorting the entire menu alphabetized is against the idea of a tree menu. The user should decide which section he wants to open and then go deeper by the topic not by the charackter.

To the connectors - maybe we could get away from these windows explorer like dotted lines.

I'll work on the menu tomorrow evenening - hope you don't have new ideas till then ;-)

Doom9: can you send us your excel sheet, so we both have the site structure?

tommysch: c't and the heise Verlag are publishing many (the big ones) articles in english language - read them at http://heise.de/ct/english/
also the great newsticker is available in english:
http://heise.de/english/

but i guess doom9 is just translating the paper magazine ;-)

Faro

[Doom9]

here's the latest xls.. I'm not a 100% on the structure yet.. maybe there's too many options.. maybe something has to be re-ordered.. but I kinda need to see it in a menu to make the final decision.. my main concern is not having too many options but still covering all important areas.. and of course I can create new overview pages and dump old ones.

one point to consider.. how about if you click on a category it not only opens the category but also shows a category overview page in the right frame (a la winxp explorer)?

and I read the german paper version of ct (and the german newsticker). I've studied german since first grade ;)

[rui]

o.k, i have IE6 in the comp i am right now.
I tested both the Faro site and athos site.
Before i started, i cleanned all internet temp files, so each one would have a fresh start when loading the pages. I must say that athos one is a little faster when opening the left menus. Just my 2 euro cents. :)

[athos]

ok i had a look at faros menu (also talked some on icq). i like that other menues close as you open a menu.

I have put my menu in the doom9 frameset here: http://hem.passagen.se/nsane/doom9/index.html
(menu html is now in http://hem.passagen.se/nsane/doom9/left.html)

the updating process:
you edit items.js (http://hem.passagen.se/nsane/doom9/items.js). the format of an item is [ID, PARENT, NAME, LINK (if not folder)], for example
items[items.length] = new Item(1, 1, "Old News");
ID is 1 (just increment), PARENT is 1 (self, so it is a root item), name is "Old News". The reason you have to keep track of id's yourself is so that you can connect the right children to the right parent. It has no LINK so it is a folder.
items[items.length] = new Item(2, 1, "2002","http://www.doom9.org//Old_news/march02.htm");
ID is 2 (incremented from 1), PARENT is 1 ("Old News"-folder), NAME is "2002" and LINK (so it is not a folder) is "http://www.doom9.org//Old_news/march02.htm" (this will open in the right frame by default).

by sorting the menu alphabetically i do not mean change the structure, there would be the same menues and submenues, but they would be listed in another order.

Update: Changed so submenues are only rendered when necessary, so the initial loading of the menues is a lot faster now. when you click a submenue for the first time, its visible content are rendered and then cached so it wont have to be rendered again.

[Faro]

We are now developing the menu together, so wait until we present a working menu.

Doom9: "how about if you click on a category it not only opens the category but also shows a category overview page in the right frame (a la winxp explorer)?"

Thats possible but would be definitly a waste of bandwidth. On the other hand then the user can see a detailed overview of the short points in the menu.

but lets do these things later.

It looks like we'll take athos menu because of the faster usage and administration.

But there are still a few things to do which my menu could provide and athos not (atm).

To answer like the Duke Nuke Forever Developers - Coming "When it's done"

Faro