Demo of new-look FAQ section

[mjharper]

Yes, I know, I've only just moved the old blogger site to the current location, but it's being reworked again. I'll explain why below.

Here's a link to the demo site. There's only one page at the moment, on the FAQ for Final Scoring. It's short, but includes most of the elements needed on the FAQ pages.

The aim is to produce a less cluttered site, but at the same time make it easier to browse. So, all the footnotes and original German texts are now in linked files, reached by greybox so that there's no pop-ups involved (no need to navigate away from the page). All of the FAQ for the topic, however, are now on one page, although the answers are hidden in a pull-down menu - clutter free, I say.

Hopefully, all this should work fine on a modern browser - although if anyone can test it on IE6+7, that would be good. Feedback much appreciated.

Why move again?
Because the old site was so sloooooow. And I figured out why.

I'd been using iWeb to build the site, and in some ways that was fine, since you can achieve some nice effects using the programme, especially if you use a simple template and customise away. However, iWeb isn't designed for customisation, and doesn't deal well with masking images and so on. It also has no idea about shared resources. So the reason the site was so slow was because every single page had a separate background image and a separate logo - and they had to be loaded anew every time you visited a new page. To make matters worse the background images were converted into new sizes somewhat haphazardly - I've no idea why - and on one of the pages (on my main site, not carc) the background image was over 5MB! And to top all that, every time I masked an image, the programme uploaded the original as well as the edited file, meaning hundreds more MB of upload. Word of advice to anyone using iWeb (at least version 1.2) - iWeb is great for a quick decent-looking website - but don't customise! You'll regret it later.

So I decided, after some research, to move to RapidWeaver, which does pretty much everything iWeb did, and a lot more because of the number of 3rd party plug-ins, and because the developer is competing with software given away free with every Mac (iWeb). I'm using one for the pull-down FAQ, in fact; the greybox system comes built in with the theme. Shared resources - woo hoo! Yes, it cost a bit more, but I'm happy - except for the work of converting everything over. But it's worth it, I think…

[canada steve]

Well I like it Matt. Style of content is clear and concise and the answers, with diagrams are excellent.

Keep up the superb work.

[Tobias]

Awesome!

It works in Opera at least.

[Gantry]

TOTALLY SEXYYYYY

Tested in IE6:

- the German grey box opens up, but it puts me at the end of all the text. I have to scroll back up to read.
- It wasn't apparent for quite some time that I could click on each of the 3 questions.  I sat there looking at the screen, wondering if that was all... is there some way (other than ugly underlined text) to suggest that people can actually click on the questions to receive an answer?

[mjharper]

Glad you guys like it

I can easily add instructions, telling people to click on the questions. And I could also set it so that the first answer is automatically shown, which should visually suggest the structure - it's just more cluttered.

Maybe I need to put up a box or something saying which browsers it works best with… I'll have to test the site with a bunch of other browsers and see if any duplicate the result Gantry described. Hmm… why do people keep using IE anyway? Does it have some super-cool features or something? Because there's so many browsers that do have super-cool features and are more standards-compliant.

[Gantry]

Most people use IE because it came with their computers. The average computer user doesn't know CSS from JS from Java, and likely doesn't care.

I use a number of browsers, mostly because most of my customers do, as well some web-based apps only work in IE using .NET technology. I have Firefox, but frankly, it's mostly hype, IE works fine for 99.999% of what people need. I'm not a pro-MS person by any stretch, I have a variety of experience using Windows, Linux, Unix and Mac (mostly pre-BSD). And IMHO there are really no such things as web "standards", there are too many factors involved to get people on the same page - can't be done and never will.  Computers are just tools, it's the content that matters!

 

[likie]

It works OK for me too!! so it must be good - my machine is pretty old (still running Windows98!!) - I really must get a new machine at some stage.

I've had no luck though with the frappr map site - is it possible for someone else to add me or can I only do it myself?  I'm in Christchurch, New Zealand.

[Tobias]

Most people use IE because it came with their computers. The average computer user doesn't know CSS from JS from Java, and likely doesn't care.

I use a number of browsers, mostly because most of my customers do, as well some web-based apps only work in IE using .NET technology. I have Firefox, but frankly, it's mostly hype, IE works fine for 99.999% of what people need. I'm not a pro-MS person by any stretch, I have a variety of experience using Windows, Linux, Unix and Mac (mostly pre-BSD). And IMHO there are really no such things as web "standards", there are too many factors involved to get people on the same page - can't be done and never will.  Computers are just tools, it's the content that matters!

 

I use Opera because it lets me block stuff easily (and it has better support for forms). IE is a nice browser apart from that Firefox I don't care about at all.

[mjharper]

I'm not a big fan of Firefox either. If I were trying to pick a 'recommended' browser for the site, I'd probably go with Opera, not least because of cross-platform support. The only thing than peeves me about the Mac version is that it uses the built-in spell-checker rather than the system one, which is much (much!) better. And the way that it remembers every tab when you close the program is awesome, except it encourages me to be untidy…

Oddly, I seem to have problems with Opera 9.2 on the demo site, while 9.1 was fine. Hmm… (Edit: Turning 'fit to width' on means that the entries with graphics won't close. Turn that off, and it works fine.)

I know people use IE because it comes with their computer. I'm really not trying to Micro$oft bash (oops!) but the theme I'm using for the site has a specific set of css & javascript just to get IE6 & IE7 to display transparent pngs properly. I mean, this isn't advanced state-of-the-art stuff. This is basics, and the most popular browser in the world can't handle it.

On which note, apparently in IE6 the marker on the menu bar (on the left) is a square rather than a circle - can anyone confirm that's true?

And in a couple of brief tests I did earlier, the 'original German' and 'footnotes' pages were displayed without formatting, instead of the blue background image with transparency (oh no, png again). It doesn't matter too much, but I still need to know if the site's displaying as intended.

[Hypnotoad]

Oddly, I seem to have problems with Opera 9.2 on the demo site, while 9.1 was fine. Hmm… (Edit: Turning 'fit to width' on means that the entries with graphics won't close. Turn that off, and it works fine.)

Fit to width is sort of a hack, mostly to fix various non-standard renderings of width.
Which means that when fit to width is enabled, opera is itself doing all kinds of dark, non-standard, voodoo to make things work.
It shouldn't be disabled by default, but if it is, expect some strange results once in a while
It's a very nice function but should be used only when really needed I think.

[Gantry]

On which note, apparently in IE6 the marker on the menu bar (on the left) is a square rather than a circle - can anyone confirm that's true?

And in a couple of brief tests I did earlier, the 'original German' and 'footnotes' pages were displayed without formatting, instead of the blue background image with transparency (oh no, png again). It doesn't matter too much, but I still need to know if the site's displaying as intended.

Indeed, IE6 marker is a red square, and the German page does not use a transparent png, although it appears to be formatted in a basic way.

In IE7, the marker is a red circle.  The German pages do not use transparent pngs, and are formatted the same as in IE6. 

I also noticed and tested in both IE6 and IE7 each of the 3 German pages for questions 1, 2 & 3. Question 1's German page opens at the 3rd last paragraph, question 2's German page open at the 2nd last paragraph, while question 3's German page opens at the very bottom.  This happens in both IE6 and IE7.  It's a little odd!

[mjharper]

Just so everyone knows what it's supposed to look like, here's a screen-shot of the greybox for the 'original German' of question 2:

The blue background is the same as on the current site, and the shaded foreground is a transparent png.

I've tested this on a few Mac browsers, and in Safari (2.04), Opera (9.2), Shiira (2.0) & OmniWeb (5.5.3) it works fine. There's no problem in RealPlayer (10.1.0) either, even though that isn't really what I'd normally consider a browser, and NetNewsWire's browser window is also okay (some of these use WebKit, so that's probably why).

However, Firefox (2.0.0.1) doesn't load correctly. It completely ignores the formatting in the css, and opens every link at the very bottom of the page  (ignoring anchors) - this is probably something like what Gantry was describing. Also, if I open the 'original German' in a new tab, it still isn't formatted (Gantry: can you try that too? - if all you get is a white background and black text, then it's wrong). So for some reason, Firefox doesn't like the relative links I'm using, or something. At least it doesn't seem to be anything to do with the greybox per se.

I'v just downloaded Firefox 2.0.0.3, and the problem is still there… I'll see if I can fix it with Firefox. I'm guessing that IE will then be okay too.

[Tobias]

One thing, when I open the German Original a scroll bar appears and I can scroll, but it sort of "bumps" so it never reach the end (scroll bar at the right side of the big Opera window where it usually appears).

[mjharper]

I think that's a error in Opera , at least, if I understood you right. In my Opera, when I hover over the OG page and scroll with the scroll wheel, the OG page scrolls. When I hover over the greybox (that is, over the original page) then that scrolls instead- and I get a kind of jumping.

In OmniWeb, that hover-and-scroll works fine. In Safari, on the other hand, the scroll wheel only affects the original page, no matter where you hover - to scroll the OG page, you have to manually click-and-drag the scrollbar. And there's no jumping…

[Gantry]

German link, open in a new tab in IE7, I see the transparent png.  Just clicking on it, it doesn't appear.

IE6, click on it, no transparent png visible at all, Open in a New Window, I see the png but it isn't transparent.