Website feedback

Linky: http://www.h2index.com/source/temp/index.html

Hello old friends (and new faces) :smile: I am on one of my perennial visits to Snarkdom.

This has always been a great place to get feedback on any creative project, especially one with a computer element. I'm making a website which, though it has nothing to do with Half-Life, is perhaps interesting nonetheless for its features and design.

It's a web guide to instruct badminton players. The original guide is the most popular online article on the subject of "badminton grip" (by Google rank). This will be a major update.

So I'd like to know what you discerning Snark-citizens (Snarkizens?) think of the site. Do you like the look? Is it easy to use? Is there anything you would change? Do you see any bugs?

This is largely a technology demo, with little content (three pages).

Although the primary purpose of this site is to provide information, I have also used it as my web developing "sandbox". It's my attempt to build a standards-compliant, attractive site, with some clever stuff thrown in too. Hope you like it :smile:

Great looking site Gollum, I really like the low-glare (snarkpit-esque) feature and the background and transparencies are nice.

I'm using FF 1.0.7 and I noticed that when I manipulate the text size
the box surrounding the text doesnt always scale correctly, or the text
itself gets out of place. It fixes itself once I press mouse3 to
scroll. If you'd like screengrabs I can give you some.

Also -- the underlining doesn't extend all the way across when I enlarge the text.

Unfinished sentence here:

Gollum's Site said:
In the single-page version, you may choose whether to print photographs.

Note that your

The above features also require javascript, so they may not work for you.

You can navigate the site using the table of contents, which also shows your current location.

Looking good man... definitely dig the dynamism
that comes with the the beginner/intermediate/advanced settings, but I
didn't really see any difference in content, as of yet anyway.

Welcome home Mike.

This may or may not be a concern for you since the majority of your hits will probably come from a school you attend or one similar and they will surely have broadband.

The web page took in excess of 45 seconds to load fully. I was connected at 4.2 at the time and I feel thats about normal for dial up.

I will attempt to comment further but as you know, I am not particularly in love with badminton :razz:

I do however like the ease on the eyes color scheme you chose. Not only is it easy to read, but somehow you picked different colors that harmonize well.

Good luck with this.

[edit] Oh f**king cool. The top layer is semi-transparent. I can actually see the background when I scroll. Nice. :smile:

---

The best things in life, aren't things.

Very perceptive comments, guys :smile:

I've also noticed the Firefox "text resize bug". I don't think there's anything I can do about this -- it's a very simple javascript function, which suggests that the problem is Firefox's rendering. I would be very happy, however, if anyone could suggest a method of fixing it.

In Firefox 1.5, the rendering errors only occur on the links in the top panel, not in the main text body.

A screenshot would be helpful, so I can be sure we are seeing the same thing.

Could you also post a screenshot of the "underline not extending" problem, please? I think you may be referring to the third-level headings, but I cannot replicate this bug in Firefox 1.5. Or are we still on the top-panel links?

Good pickup with the incomplete sentence.

Orph, your comment about download time is highly relevant. My audience is the entire online global badminton community, so I cannot assume broadband.

I'm in two minds about this one. On the one hand, I hate large images on the web. On the other hand, I like the look of the site.

Do the large images force you to wait for the content, or were you able to start reading the content immediately? And was it the CORRECT content, or did you get stuck with that red notice about javascript?

In fact, perhaps I should test this myself by uploading HUGE versions of the images to slow down my broadband...

Hmmm. The large image sizes DO seem to delay reading the content. I'll have to see what I can do about that...

The text resizing works fine here (using FF 1.5.0.1) though the small size is the same as the original size?
A workaround could be loading the page with a different stylesheet, though I never tried that before, I know it's possible one way or another. :smile:

All in all, it makes a solid impression, but it does take some scrolling down before you get to some actual usefull content. Put the read help links in a sidebar or panel or such, as they're nice tools but not the focus of the site.

The images don't hinder reading the main text body, but the readability help links only show up after the images are loaded. I also noticed some hidden textblocks aren't hidden during the image loading (a big red div with a notice towards beginners or such).

---

Create-ivity - a game development blog

Does anyone know a good way to force images to load after other content? I'm not having much luck so far :sad:

Here are some screenshots of the problem:

After pressing the larger text button a couple times this is what the top box looks like:



Everything else lower on the page scales correctly.

After I press and hold my mouse3 button (which is how I easily scrollup
and down the page with my mouse) the screen resizes correctly.
Everything except for the underlining of the words (yet again the
problem is only in this first box):



When I press Reset Text Size it ends up looking like this:



When I press the mouse3 button it fixes it again:

Morphine-- thanks for the screen grabs. The problem seems to be much more pronounced under FF1.07 than FF1.5.

In case anyone can see how to fix this, here is the relevant Javascript:

/*==========================================
The functions below deal with text-size

*/

function textsize()
{
var max = 5;
var min = 1;
var x = document.getElementById("main");
var y = document.getElementById("nav");
x.style.fontSize = '1em';
recallSize();

var as=document.getElementsByTagName("a");
for (i=0;i<as.length; i++) { //loops through all anchors + assigns onclick by class
if (as.item(i).className == "text_plus"){
as[i].onclick=function()
{
var textSize = parseFloat(x.style.fontSize.replace('em', ''));
textSize += 0.2;
if (textSize > max) (textSize = max);
x.style.fontSize = textSize + 'em';
}
}
if (as.item(i).className == "text_minus"){
as[i].onclick=function()
{
var textSize = parseFloat(x.style.fontSize.replace('em', ''));
textSize -= 0.2;
if (textSize < min) (textSize = min);
x.style.fontSize = textSize + 'em';
}
}
if (as.item(i).className == "text_reset"){
as[i].onclick=function()
{
x.style.fontSize = 1 + 'em';
}
}
}

}

function recallSize() {

var x = document.getElementById("main");
var textSize = 1 + "em";
var cookie = readCookie("Badminton-guide-textSize");
if (cookie) {
textSize = cookie
x.style.fontSize = textSize;
}
}

function getSize() {

var x = document.getElementById("main");
var textSize = x.style.fontSize;
return textSize;
}

I have updated the site, with the intention of improving the load time for 56k users. Could anyone with a slow connection please help me test this?

What I want to see: the content loads quickly, and the images load afterwards. You should not see the red javascript box.

What I want to know: does this happen for you?

How to test: clear your browser cache, then visit http://www.h2index.com/source/temp/index.html .

Thanks!

1st test:

After I cleared my history, my temp internet files and my cookies (a process fraught with grief considering replacing it with 56k will take ages)

The page, upon clicking the link:

30 seconds of white.
25-35 seconds of page loading with no scrolling available.
10 seconds of last minute loading.

Total time from link click to completion approx. 1 minute.

will delete everything and do a second attempt. My connection is 4.2k

[edit#1]

Second test:

10 seconds of white page.
33 seconds of page loading with no scrolling available.
3 seconds of last minute stuff.

will do one final testing. Strangely enough, Snarkpit loads and scrolls smoothly with everything deleted/cleared even though the page is loading all the avatars and images on the given page (this page).

[edit#2]

Final test:

8 seconds of white page.
25 seconds of page loading with no scroll available.
3 seconds of last minute stuff.

Yes, before anyone asks, I waited for Snarkpit to complete before I clicked the link so no stray bits of bandwidth will be wasted. (bandwidth, what a stupid concept when used in conjunction with 56k :sad: )

Hope that helps Mike.

Hopefully, you can get a few more 56k users to test since I do not trust my connection.

---

The best things in life, aren't things.

Thanks Orph, that's really helpful :smile:

It's bad news, of course :sad: Those load times are far too long, and indicate that the images loading does not work as I had intended in Internet Explorer (it appears to work in FF).

I will have another go soon....ish.

Thanks Jon. Hopefully next time I'll get it right!

Gollum said:
Thanks Jon. Hopefully next time I'll get it right!

Dude, I feel really uncomfortable with you making alteration based exclusively on my experiment.

Don't you have any other friends on 56k other than me?

I have serious reservations about my connection. I got way to used to DSL and everything seems skewed.

---

The best things in life, aren't things.

It's not entirely based on your experiment. I had an existing suspicion that this would happen, based on a test with a very large image (3Mb).

Your evidence is sufficient to confirm my suspicion, at least for now.

But, of course, more data points would always be welcome :smile:

Gollum said:
But, of course, more data points would always be welcome :smile:

And of course, my stupid ass keeps forgetting to tell you about this.

Read on Master Gollum.

This may/might/should solve your testing shortfalls.

Good luck.

---

The best things in life, aren't things.

Ooooh!

Looks interesting :smile: This might save me some testing hassle.

also i perfer the glare resistant over the original , though both are quite amazing. i really want to know how you did the clear framely guys... they are pretty

---

.else /me ~kill you
www.arclan.net

The "see-through" effect, whereby the body appears to show some of the background behind it, is a trick :smile:

In reality, it's not translucent. I've used CSS background attachments to fake the effect.

CSS allows you to fix background images relative to the viewport, so that they remain in place when you scroll. There are in fact several images that go together to make up this fake compositing effect.

Eric Meyer is probably the first person to come up with this idea on CSS Edge: http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html .

I also needed to trawl the web for a fix for Internet Explorer (it's only a partial fix, because it does not allow centreing of the image).

Look at my stylesheets, paying particular attention to the background images in style.css and ie_hacks.css. The supporting javascript for IE is found in ie_hacks.js.

Making something translucent is easy ... I used to use it on drop down menus. And it works in IE too ... but my menus didn't :\

Let's see here ... Yep. Can't find it.

I'll keep looking, but I know I've done this before and actually made it transparent. Frames and everything were visible and the transparency could be set to whatever opacity. I'm sure I used some JS too though. It's been a long time. :sad:

---

Blame it on Microsoft, God does.

Apart from the fix for IE, my method of "fake translucency" uses only CSS (and simple CSS, too).

On the other hand, it does require more images than genuine transparency would need. But it also gives more control over the effect you want.

Update: problem fixed :smile: The images now load in the background without slowing down the text content.

(Note that I haven't updated the online version.)