The current design's second birthday is approaching fast, and staying in the tradition of a major change for each such period of time, I've started fooling around with a few ideas I had. By now, I've come up with a rough template. You can see it's going into an even simpler direction, but that's what I consider appropriate in today's Internet. Behind the scenes, there isn't much need of drastic changes as the current system has proved itself quite well, so the basics are still the same. The upper menu has been tweaked to be less visually obstrusive.

The cost of this all would be that the site wouldn't look identical with most browsers anymore. So far, that's always been my top priority, but I already said last time that I wouldn't do all this fixing for individual bugs again. Now the question is where to draw the line. As I've done it at the moment, the draft is only working properly with browsers with a decent support of CSS (Gecko, KHTML / Webcore, Opera). Browsers with no CSS support at all can use the site, but it's just a 'non-designed' page of text. Browsers with little (and faulty) CSS support (IE, Netscape 4) break even the usability (worst case of the three). For this last case, it's of course possible to include a 'click here if you have display problems' link which would then redirect these users to an empty stylesheet, so it'd work again and look like with a browser with no CSS support at all.

Is this too radical? Technically, everybody would still be able to use the site, but we all know that the average attention span of visitors isn't even long enough to find a 'display problems' link. Then again, CSS2 has been around for many years already, so I don't really see why it shouldn't be used by now. Browser developers had enough time to incorporate it. Anyway, say what you think. General comments about the draft are welcome as well, but keep in mind that it's far from finished and many parts are still missing.

Having the site not display correctly in IE seems a bit tricky, as in it might get you a lot of unwanted comments in your mailbox from people who don't figure out how to access the non-styled version. I don't know if you're still keeping statistics on this, but I suppose a large part of the visitors is using IE. Perhaps it would be better to come up with a solution that identifies the browser and immediately redirects to the plain text version?

The design is a definite improvement compared to the current layout, which I always thought was a bit hectic/cluttered.

I expecially like the font, very pleasant to my eyes. Only thing I'd change would be to give it some more colour instead of grey all around. Perhaps you could colour the top bar with different colours for different systems, or something similar, just something to break the monotony.

Actually, I'm having the same issue with the forum. The grey is getting sort of bland, I'm actually starting to miss the first colour scheme with the yellow bars, which I remember no-one was a big fan of. But let's not go down that road again.

That design looks good, I like the reduced search utility and the technical information in a square instead of a line. But also I think that it needs other colors instead of just grey.

As for the support of CSS. The best, and not so good, solution I see is creating a front page with the option of a normal or a simpler version, with the two options clearly visible. If not, many people won't notice and have the compatibility problems.

Edited by Wandrell at 18:54 on October, 23rd 2005

The rough template looks good.

Internet Explorer users are currently at approximately 50%. Putting a page which does nothing but offer links to the two versions seems a little over-the-top. Browser detection, on the other hand, is a non-reliable measure, too. Could be the best way available, though. I guess it'd be best to try to identify the browser and put a big warning like "you're currently viewing the stripped down version of the site" on the plain pages so that people can try whether they've been redirected there by mistake.

As for the colours... I like grey! Very easy to the eyes, doesn't distract from reading. Giving subsections their own colour schemes (like it is now) is something to keep in mind, of course. The 'main' section should probably be 'colour neutral', though.

The template looks nice. It's compact and has a simple, appropriate structure. In my opinion, this is the way to go in view of the large number of overcrowded, hectic sites.

As for the compatibility question, I'm not sure. There's still a lot of IE users, for what reasons ever. Approximately more than 90 percent of those would be lost as visitors. I wouldn't expect a "display problems" link either, so I'd most likely leave the site immediately. Most webmasters are not aware about the display problems of their site; usually, the problem is not adressed for this reason.

I'd probably still sonsider IE when designing a new site. It's not really a desirable situation when lots of users have a srious interest in the matter, but they are being excluded because of high technical rquirements.

On the other hand, I also agree that you have to draw a line somewhere. From a technological viewpoint, I'd definitely rank IE among antique software; concerning its user base, it unfortunately isn't. However, there's of cpourse no duty to forever serve those who refuse to update their software at least every few years.

I like the qough template you created.

As for the technical aspects I think you should draw the line as you wanted to. Even Mircsoft wants the webdevelopers to undo the IE-hacks, as for the IE 7.0 it is not possible to render the pages with IE-CSS-hacks. I think, that most of the IE-users soon after the release of IE 7.0 will have it on their systems, because I can't imagine Microsoft not to announce the IE 7 as an important update

After a few months of silence (most of the time without any progress on my part), what I consider the idea struck me. The problem was that the top menu wasn't working at all in IE previously. So now I added the additional option to use a 'simple menu' like people are probably used to from other sites, sending the visitors to standard listings like 'Adventure' or 'G'. Both is theoretically visible all the time, and there's no need for browser sniffing or different site versions of any kind. This should not only make the games menu browser-proof, but also idiot-proof ("how d/ya use da menu?").

You can see the current status here: http://www.goodolddays.net/test/. Log in with your username and password from the forum. I quickly checked it with IE, and while there are many glitches in the looks department and (as mentioned) the advanced features of the games menu don't work, I consider both looks and functionality good enough for such an antique, as Tapuak put it.

If you browse around, keep in mind that most sub-pages haven't been created yet. For example, the left menu is still pretty much useless as it doesn't lead anywhere. Only serves as a filler to show how the menu itself will work (opening / closing submenus). The game pages should all work, with the exception of virtually no screenshots being available. And don't try downloading anything from that test version - it won't work. No point in doing that anyway, as it's using exactly the same database as the current site version

Comments? Notice anything not working as it should, but which looks as if I already worked on it?

Nice layout, love the color combinations, but why do you only use such a small portion of the screen (main page)? Or is this due to me using IE?

If it's not and the size is 'by design', then I really urge you to use a larger portion or the full screen ...

These "span"-menus are a bit tricky to use with opera. Why not use JavaScript. It would still be accessable without, but a huge improvement with.

Also you could add some kind of gimmick, where I may watch, which parameters I alread have selected and with wich value. Could be done by readonly inputs and JS-Event-Handlers. (onchange).

After all I like the new approach in general, but it's a bit to "pressed" together. What about a bit more space between the elements?

Five ideas:
- using more percentage of the screen
- aligning the box edges (see picture)
- removing the dots under the menu
- adding some pixels of space at the bottom
- maybe smoothening the "corners"

I'll answer the issues instead of everyone's post individually.

Size: I chose this small width based on my personal reading preferences. My screen resolution provides me with 1280 pixels width, and reading websites which just flow text as it recommended are incredibly hard to read. Shorter lines are easier on the eyes when reading a lot in my opinion. Could be that I overdid it, of course. What would you guys consider a sensible width? Another problem with making it too wide is that everything is fit to this limited space at the moment. If the 'main box' got much bigger, the left menu would have to be enlarged as well.

'span' menus: My general dislike of JavaScript aside, how would it be better? I don't see any difference in the behaviour of Opera and Firefox at the moment.

Seeing selections: You already see what's currently being displayed which I consider quite important. Adding what you suggested would require to replace that other feature, because it would be a little confusing to have two 'lists' of chosen options. To be honest, I think the way it's now is more useful, because when you're in the middle of choosing something, you should know where you just clicked. Anyone else?

Space between elements: Not sure what you mean. What elements?

Box alignment: Your picture shows what you suggest it should be like? I kind of like the 'non-centralized' look of the two main 'panels' each having a smaller 'sub-panel'. Opinions?

Dots: Shouldn't be there, I've already fixed that problem for my browser, but I guess I have to enlarge it a little more to suit yours, too

Bottom: Agreed.

Corners: Not possible without images, and using those would require everything to be completely redone and creating different images for each subsection again. I wanted to avoid the latter in this design, actually.

Personally I like fluid layouts, if they don't overextend like you already stated indirectly. You could set a maximum pixel-width additional to the percentage-width for #main. But without altering the menu-width. Not only, that I don't like this, it would much more complicate layouting, as you may experience, when experementing.


Strangely I discover a different behaviour between my Opera at home and at office. Here at home everything behaves correct. Maybe problems with our proxy at work, which occured lately. So then, every javascipt would just be Non-standard-browser optimization. I withdraw that.


Should I?
I would not have to be under the menu, but could replace the menu-items, when selected. Maybe with a different color and a little, static info beside, so the newby could recognize, this way he/she is able to construct a fully customized query on the database.
Just wild thought. May be in opposite to your general concept.


For instance, you could add some padding to the two menus, so it may not look so complicated and confusing on the first touch, as it may be for an unexperienced user. Would need some tries to prove this. Again a wild thought, which I tested only with a CSS-hack. In my opinion, this would look a little bit more catchy/intuitive.


Alignment is not that important, I think. Centralization looks better, while a left-alignment is bit more workable, when working with more than one window/widget at a time and you don't want to resize your desktop-elements all the time.


Dots are good, but could be replaced, by an indiviual image to express the indivuality of the site...


Agreed, beause probably there will be no page without scrolling, so the scroll-bars in browsers would be displayed all the time, regardless of additional bottom-spacing or not.


Well, there are some experimental CSS-rounded-corner implementation in every current browser, but would require to fumble around the CSS. Not recommended, when I understood your approach correctly.

More to come...

Edited by dregenrocks at 23:09 on January, 25th 2006

width: Again, Internet Explorer ignores max-width. Still a feasable option. Still, the question is open for what resolutions to 'optimize', i.e. which percentage to set. I'm not quite sure what you mean about the menu width. You're saying it should stay with a fixed size, but only to make the main box variable?

span menus: I think I found the problem now. When experimenting to remove those dots Tapuak mentioned, I ran into the problem that the menus opened, but disappeared again when I moved the mouse down. It only worked if I flung the mouse down very fast. Is that what you meant earlier? In that case, it's related to there being a tiny gap between the text and the opened menu sometimes, depending on the client's exact font size. Difficult issue, will take lots of experimenting to balance it out...

showing selections: Replacing the 'headings' with the choices might not be such a bad idea, and that certainly wouldn't clash with the other thing. I'll look into it.

Padding: For the top menu, that would complicate things even more, as described above. For the left menu, I like it as it is, and I think it's made clear by the dotted 'barriers'. Other views?

Alignment: I think Tapuak meant the alignment of the elements relative to each other...

Corners: I'm actually waiting for CSS3 for this feature, but I'm not holding my breath - five years minimum, I guess For now, I've just thrown in the non-official Gecko hack which has no negative effect in other browsers at least. Is there anything aequivalent in Opera?

That is an amazing way to implement an advanced search is a really small area. Very nice and quick.

Yes, that's what I meant. If both would be fluid with percentage width the space between them would vary according to the width of the client-area. With bad luck this space may become negative and the content box would slip under the menu. Hard to describe, try it.


Also experienced the text within the boxes to run out of the boxes, when I solely use a bigger font-size in some browsers. Maybe a fixed-font-size would be better?


No, surprisingly not. I thought there was something, but did not find it:
http://www.opera.com/docs/specs/css/

Width: I know what you mean, but I'm talking about visual balance. A tiny menu attached to a huge box just looks badly.

Font size: I guess so. I never saw the point in changing font size in any browser, so I didn't care about it much so far. Will have to do some tests. Then again, relative font sizes are officially recommended...

Two problems I ran across when fiddling around with it on the weekend:

-If I set a relative width for the main box along with a min-width and max-width, but a fixed width for the left menu, how can I possibly get the top (logo) box to have the same width?

-The left menu can easily be expanded beyond the height of the main box. I can set a sensible min-height, of course, but not as much as it'd be necessary to be larger than then menu at maximum expansion. Probably 'good enough', but can anyone think of a better solution?

The most efficient way to accomplish this, would be to span all elements within the body with an additional div-container (a site-div). That way, you have an fully customizable parent for all divs below. Personally I would prefer, if this would also be possible with the body-element itself, but that's only a dream...

So you could set a (max-)width for that div and align all children to this one.


No way within the borders of the current design. Alternatively you could also border the right side of the menu, make it a bit wider and then put it slightly under the main-div by z-index. Like this, the right border would only be visible, if the menu-height is bigger than the main-div.

I don't see how this would solve the problem. In face, it'd only shift the issue somewhere else: Since there is no way to set an element to take 'the rest' of the width within another element, the fixed-sized left menu and the variable-sized main box would clash badly. This way, both elements would have to have relative sizes - something you objected to earlier.

That's quite a good idea!