Site Ratings & Reviews - Re: webtrickscentral

Author

Re: webtrickscentral - critique

2003-12-03, 7:22 pm

"jamslam" <webmaster@webtrickscentral.com> wrote in message
news:vpeblafl8q3d60@corp.supernews.com...

quote:

> Hello all,
>
> I don't know if any of you remember me, I highly doubt you would. Heh,

last

quote:

> time I tried my luck here, my site was ripped apart by you guys, and

because

quote:

> of that I think I have become a better web developer.
>
> After many revisions, I think I finally found what I was looking for...
>
> www.webtrickscentral.com
>
> I can handle anything you guys have to throw at me. I did my best on
> compatibility, which I believe you will be farely pleased with. It does,
> however, rely on javascript to be enabled.

As well as compatibility you may wish to consider accessibility. I just
finished having a go at somebody else for using font-size in pixels and now
here you are here as well.

Well, it's not as bad as the other bloke but it is still too small for me
and I can't change it when you use pixels. When I use Mozilla (which does
allow me to change the font size) I find that, at larger font sizes, your
design breaks. The navigation elements overlap each other. Looks real tacky.
I suppose compatiblity testing does not include Mozilla at larger font sizes
:-)

Do not specify font size at all. That way the font will be exactly as big as
*I* am comfortable with.

I also find the huge line-height hard to read, besides making the page far
too long.

As for "requiring" javascript, that is not good. You should be able to
provide an alternative to those drop down menus. By "requiring" javascript
you are making your site unusable for that 15% or so who have it turned off
and they may have it turned off *for* them and have no choice.

Cheers
Richard.

jamslam

2003-12-03, 7:22 pm

"rf" <making.it.up@the.time> wrote in message
news:ltGlb.161603$bo1.146283@news-server.bigpond.net.au...

quote:

>
> "jamslam" <webmaster@webtrickscentral.com> wrote in message
> news:vpeblafl8q3d60@corp.supernews.com...
> last
> because
>
> As well as compatibility you may wish to consider accessibility. I just
> finished having a go at somebody else for using font-size in pixels and

now

quote:

> here you are here as well.
>
> Well, it's not as bad as the other bloke but it is still too small for me
> and I can't change it when you use pixels. When I use Mozilla (which does
> allow me to change the font size) I find that, at larger font sizes, your
> design breaks. The navigation elements overlap each other. Looks real

tacky.

quote:

> I suppose compatiblity testing does not include Mozilla at larger font

sizes

quote:

> :-)
>
> Do not specify font size at all. That way the font will be exactly as big

quote:

> *I* am comfortable with.
>
> I also find the huge line-height hard to read, besides making the page far
> too long.
>
> As for "requiring" javascript, that is not good. You should be able to
> provide an alternative to those drop down menus. By "requiring" javascript
> you are making your site unusable for that 15% or so who have it turned

off

quote:

> and they may have it turned off *for* them and have no choice.
>
> Cheers
> Richard.
>
>

Actually, I assume that just as you were replying to this, I read that reply
you made on the latter. I actually did take out the font-sizes and used
percents, and actual pixel sizes where necessary (like the navigation). I
however looked at it in mozilla, and pixels do not seem to stop the text
from overlapping, and breaking my style.

As for the javascript, I did seriously contemplate using an alternative. I
am not exactly sure how I will deal with it. I myself do not feel like it is
a huge issue, and needs to be delt with. I feel that the majority of users
will be able to browse my site, and I know that is not acceptable, and I may
seem ignorant, but like I said, I don't feel as if it's a huge problem that
needs to be addressed. I never have, and most likely never will trust
statistics on who uses what, because in most cases they just can't be
measured accurately in my opinion.

I actually used the line-height, thinking it makes it easier to read. More
spaced out, and not all clumped together.

Thanx for the critique

-jamslam

2003-12-03, 7:22 pm

"jamslam" <webmaster@webtrickscentral.com> wrote in message
news:vpednujpovjt64@corp.supernews.com...

quote:

>
> "rf" <making.it.up@the.time> wrote in message
> news:ltGlb.161603$bo1.146283@news-server.bigpond.net.au...
me[QUOTE][color=darkred]
does[QUOTE][color=darkred]
your[QUOTE][color=darkred]
> tacky.
> sizes
[QUOTE][color=darkred]
> Actually, I assume that just as you were replying to this, I read that

quote:

> you made on the latter. I actually did take out the font-sizes and used
> percents, and actual pixel sizes where necessary (like the navigation). I
> however looked at it in mozilla, and pixels do not seem to stop the text
> from overlapping, and breaking my style.

That is correct. Mozilla is in fact doing it right. IE has a bug <laughs/>
and refuses to let the user change font size if it is specified in pixels or
points.

You are approaching this from the wrong direction. You should not be
utilizing browser bugs to cripple the viewers accessibility options to "fix"
your design. You should change the original design. There is no need to
absolutely position those menu options. If you think the javascript will
position the submenus in the wrong spot then change the javascript so it
positions the submenus where they should be. Should be simple enough, just
get the screen location of the menu item at run time.

quote:

> As for the javascript, I did seriously contemplate using an alternative. I
> am not exactly sure how I will deal with it. I myself do not feel like it

quote:

> a huge issue, and needs to be delt with. I feel that the majority of users
> will be able to browse my site, and I know that is not acceptable, and I

may

quote:

> seem ignorant, but like I said, I don't feel as if it's a huge problem

that

quote:

> needs to be addressed. I never have, and most likely never will trust
> statistics on who uses what, because in most cases they just can't be
> measured accurately in my opinion.

Your loss :-)

I would think it would be extremely simple to, for example, make the top
level menu items real links to, say, a sitemap page so those without
javascript can at least get to the rest of the site.

quote:

> I never have, and most likely never will trust
> statistics on who uses what, because in most cases they just can't be
> measured accurately in my opinion.

A fair comment but IMHO the issue is not the magnitude of the statistic, it
is the that it is there at all.

Fact: *some* (I don't care how many) people have javascript turned off.
Don't intentionally discriminate against them. Every single one of them is a
potential customer.

quote:

> I actually used the line-height, thinking it makes it easier to read. More
> spaced out, and not all clumped together.

Font foundries go to enormous lengths to choose a suitable height for their
fonts. IMHO they, better than you or I, would know what line-height looks
best :-)

Oh, and yes, I do remember you :-)

Cheers
Richard.

jamslam

2003-12-03, 7:22 pm

"rf" <making.it.up@the.time> wrote in message
news:P%Glb.161658$bo1.10935@news-server.bigpond.net.au...

quote:

>
> "jamslam" <webmaster@webtrickscentral.com> wrote in message
> news:vpednujpovjt64@corp.supernews.com...
> me
> does
> your
>
> reply
I[QUOTE][color=darkred]
>
> That is correct. Mozilla is in fact doing it right. IE has a bug <laughs/>
> and refuses to let the user change font size if it is specified in pixels

quote:

> points.
>
> You are approaching this from the wrong direction. You should not be
> utilizing browser bugs to cripple the viewers accessibility options to

"fix"

quote:

> your design. You should change the original design. There is no need to
> absolutely position those menu options. If you think the javascript will
> position the submenus in the wrong spot then change the javascript so it
> positions the submenus where they should be. Should be simple enough, just
> get the screen location of the menu item at run time.
>

hmmm.. that is quite a good idea.. I will definitely try that out, thank
you.

quote:

I[QUOTE][color=darkred]
it[QUOTE][color=darkred]
> is
users[QUOTE][color=darkred]
> may
> that
>
> Your loss :-)
>
> I would think it would be extremely simple to, for example, make the top
> level menu items real links to, say, a sitemap page so those without
> javascript can at least get to the rest of the site.

Also, another interesting idea, heh, I will definitely consider doing that.
Thank you again! :)

quote:

>
>
> A fair comment but IMHO the issue is not the magnitude of the statistic,

quote:

> is the that it is there at all.
>
> Fact: *some* (I don't care how many) people have javascript turned off.
> Don't intentionally discriminate against them. Every single one of them is

quote:

> potential customer.
>
More[QUOTE][color=darkred]
>
> Font foundries go to enormous lengths to choose a suitable height for

their

quote:

> fonts. IMHO they, better than you or I, would know what line-height looks
> best :-)

I changed the line-height to a smaller size :) (and yes, I understood your
point)

quote:

>
> Oh, and yes, I do remember you :-)

Heh, do you think I have improved? I think I have, I have learned a lot
since then, and me posting my site here definitely pushed me in the right
direction.

quote:

>
> Cheers
> Richard.
>
>

Thank you for all the suggestions, I will definitely apply them. Why didn't
I think of them? Hehe... Thanks again!

-jamslam

Farlo

2003-12-03, 7:22 pm

"jamslam" <webmaster@webtrickscentral.com> wrote:

quote:

> www.webtrickscentral.com

Oh! Purty!

Doesn't validate, tho ...
.... and the menu headings look squashed ...
.... and there's a typo or three ...

--
Farlo, the Urban Fey Dragon

2003-12-03, 7:22 pm

"jamslam" <webmaster@webtrickscentral.com> wrote in message
news:vpeg7feecl6a29@corp.supernews.com...

quote:

>
> "rf" <making.it.up@the.time> wrote in message
> news:P%Glb.161658$bo1.10935@news-server.bigpond.net.au...

quote:

[QUOTE][color=darkred]
> Heh, do you think I have improved? I think I have, I have learned a lot
> since then, and me posting my site here definitely pushed me in the right
> direction.

<grin>
<runs over to look at code>
</grin>

Not too bad.

You might consider moving to the next level now.

Use CSS hover instead of those nasty javascript thingies. Don't use the
onclick event to fire a link. Just let the <a> element do it by itself.
These two things alone would knock out a quarter of your code and make it
far easier to maintain.

Use CSS layout instead of those misused and hard to maintain tables.

Firmly apply the KISS principle to your CSS. For example you mention
font-family all over the place. Don't. Put font family right up at the top,
in the rule that selects the <body> element and let all the child elements
inherit from that.This make the CSS far easier to maintain.

Every time you consider using a property in a CSS rule think: Should this go
here or should it be further up the DOM tree (ie in some parent/ancestor of
this element). Pretty soon you will find that you have a bunch of empty
rules that may be deleted.

Don't specify the same class for a bunch of elements if those elements all
live in a parent whom you can select with a suitable class, for example:

Complex:

td.tdclass {...}

<table> ...
<td class="tdclass"> ...
<td class="tdclass"> ...
<td class="tdclass"> ...

Simple:

table.tdparentclass td {....}

<table class="tdparentclass"> ...
<td> ...
<td> ...
<td> ...

Work *with* your viewer, not against her. User her chosen font size, that is
100%. Oh, I've said that already, haven't I :-)

Finally, take it over to the validator ( http://validator.w3.org will do)
and correct all the errors. You have severe nesting errors like <tr><a
....><td> - such things are not allowed :-)

Cheers
Richard.

John C

2003-12-03, 7:22 pm

On Thu, 23 Oct 2003 rf posted:

quote:

> Firmly apply the KISS principle to your CSS. For example you mention
> font-family all over the place. Don't. Put font family right up at the top,
> in the rule that selects the <body> element and let all the child elements
> inherit from that.This make the CSS far easier to maintain.
>
> Every time you consider using a property in a CSS rule think: Should this go
> here or should it be further up the DOM tree (ie in some parent/ancestor of
> this element). Pretty soon you will find that you have a bunch of empty
> rules that may be deleted.
>

If the client is happy with "graceful degradation" in inheritance
challenged browsers, then life is good and KISS is sweet. If the client
insists that NN4 render an approximation of the design, then some
repetition in elements is hard to avoid unless you're going to redirect
to a separate NN4 page. Of course, for font-family a KISS solution would
be to not specify one, leaving it up to the user's browser setting.
Anyhow, there *could* be reasons to repeat the font-family on
descendants. But in the absence thereof, you're right on and it's
amazing how much surplusage one sees in stylesheets. Does TopStyle Pro
check for that?

John C.

2003-12-03, 7:22 pm

"John C" <jcliff@delete.email.com> wrote in message
news:MPG.1a013400c200b23598968c@news.sunflower.com...

quote:

> On Thu, 23 Oct 2003 rf posted:
>
top,[QUOTE][color=darkred]
elements[QUOTE][color=darkred]
this go[QUOTE][color=darkred]
of[QUOTE][color=darkred]
>
> If the client is happy with "graceful degradation" in inheritance
> challenged browsers, then life is good and KISS is sweet. If the client
> insists that NN4 render an approximation of the design, then some
> repetition in elements is hard to avoid unless you're going to redirect
> to a separate NN4 page.

NN4 is a broken browser and has been since day one. If it were a car the
authorities would refuse to register it.

IMHO we should a) hide *all* CSS from NN4 (which I do), causing the page to
at least render the content correctly, b) specifically use CSS that makes
NN4 break terribly so the viewer may finally be convinced to upgrade to a
browser that was written in this century.

quote:

> Of course, for font-family a KISS solution would
> be to not specify one, leaving it up to the user's browser setting.

True, unfortunately however the out of the box setting for the most common
browser is times new roman, a font that does not look that good. Couple this
with the fact that the "average" user probably does not know how to
configure their own fonts...

quote:

> Anyhow, there *could* be reasons to repeat the font-family on
> descendants. But in the absence thereof, you're right on and it's
> amazing how much surplusage one sees in stylesheets.

Indeed.

quote:

> Does TopStyle Pro
> check for that?

No idea.

Cheers
Richard.

Toby A Inkster

2003-12-03, 7:22 pm

jamslam wrote:

quote:

> As for the javascript, I did seriously contemplate using an alternative. I
> am not exactly sure how I will deal with it.

With your site set-up it wound in fact be *really* easy! :-)

Change you form at the bottom to:

<form action="htmltutorial.php" method="GET">
<select name="htmltut" id="htmltut"
onchange="location.href = 'htmltutorial.php?htmltut='
+ form.htmltut.options[form.htmltut.selectedIndex].value">
<option>-Tutorial Navigation-</option>
<option value="1" selected='selected'>Step 1 - What is html?</option>
<option value="2">Step 2 - Basic Setup</option>
<option value="3">Step 3 - Putting Text on your page</option>
.......... etc ..........
<option value="24" >Step 24 - What do I do now?</option>
</select>
</form>

(I'm sure the JavaScript could be improved too, but I've left it more or
less as-is)

Notice: the change in form action and method. Also the change in option
values, and the change in the select name.

Form will now work sans JavaScript.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?id=132

William Tasso

2003-12-03, 7:22 pm

jamslam wrote:

quote:

> ...
> I never have, and most likely never will trust statistics
> on who uses what, because in most cases they just can't be measured
> accurately in my opinion.
>

quite right - statistics are not usually worth their screen space in this
trade.

But here's a fact (count +1) for you: I will never see your javascript
except when I view your source.

--
William Tasso - http://WilliamTasso.com

jake

2003-12-03, 7:22 pm

In message <vpeblafl8q3d60@corp.supernews.com>, jamslam
<webmaster@webtrickscentral.com> writes

quote:

>Hello all,
>
>I don't know if any of you remember me, I highly doubt you would. Heh, last
>time I tried my luck here, my site was ripped apart by you guys, and because
>of that I think I have become a better web developer.
>
>After many revisions, I think I finally found what I was looking for...
>
>www.webtrickscentral.com
>
>I can handle anything you guys have to throw at me. I did my best on
>compatibility, which I believe you will be farely pleased with. It does,
>however, rely on javascript to be enabled.
>
>If you want to login, which you will have to in order to view anything, you
>can use the following information.
>
>Username: demo
>Password: demo
>
>Thank you for any critique you may give me!
>
>-jamslam
>
>

This is what a typical screen-reader/voice browser is going to speak:
http://www.gododdin.demon.co.uk/ng/WTC.txt

(1) The real problem is that the main navigation doesn't work; it's just
perceived as text. No dropdowns. Even the main items (Tutorials, Tools,
etc.) don't act as links.

(2) The headings are a number of <H1>s and <H3>s. I would suggest it
would be better with just a single <H1>, with the rest being <H2>s.

(3) A quick trip though a spell/grammar-checker would be useful ;-)
e.g. swtiching

regards.

--
Jake

jamslam

2003-12-03, 7:22 pm

"rf" <making.it.up@the.time> wrote in message
news:I3Ilb.161725$bo1.130599@news-server.bigpond.net.au...

quote:

>
> "jamslam" <webmaster@webtrickscentral.com> wrote in message
> news:vpeg7feecl6a29@corp.supernews.com...
>
>
right[QUOTE][color=darkred]
>
> <grin>
> <runs over to look at code>
> </grin>
>
> Not too bad.
>
> You might consider moving to the next level now.
>
> Use CSS hover instead of those nasty javascript thingies. Don't use the
> onclick event to fire a link. Just let the <a> element do it by itself.
> These two things alone would knock out a quarter of your code and make it
> far easier to maintain.

Ah, thank you for that piece of advice! I re-coded the drop down menu, and
it's much more efficient. No more tables. I had to used a few event handlers
(not in the <a> tags) so that the javascript would work. And yup, I will
definitely take heed to your suggestion by making a sitemap. As well as
using the method that Toby A Inkster suggested, i wouldn't even need the
javascript in that area anymore.

quote:

>
> Use CSS layout instead of those misused and hard to maintain tables.

I am using a CSS layout. The tables that you see in the source are for the
drop down menu. Other then that, I have hardly any tables, I think.

quote:

>
> Firmly apply the KISS principle to your CSS. For example you mention
> font-family all over the place. Don't. Put font family right up at the

top,

quote:

> in the rule that selects the <body> element and let all the child elements
> inherit from that.This make the CSS far easier to maintain.
>
> Every time you consider using a property in a CSS rule think: Should this

quote:

> here or should it be further up the DOM tree (ie in some parent/ancestor

quote:

> this element). Pretty soon you will find that you have a bunch of empty
> rules that may be deleted.

Yup, I took care of the font-family issue. It was mainly there because of
when I ported some of my old code to the new design. Just never thought
twice about it :)

quote:

>
> Don't specify the same class for a bunch of elements if those elements all
> live in a parent whom you can select with a suitable class, for example:
>
> Complex:
>
> td.tdclass {...}
>
> <table> ...
> <td class="tdclass"> ...
> <td class="tdclass"> ...
> <td class="tdclass"> ...
>
> Simple:
>
> table.tdparentclass td {....}
>
> <table class="tdparentclass"> ...
> <td> ...
> <td> ...
> <td> ...
>
>
> Work *with* your viewer, not against her. User her chosen font size, that

quote:

> 100%. Oh, I've said that already, haven't I :-)

Yea, I did change that. I pretty much fixed that up. However, in mozilla
when you do change the font-size, some things go a little screwy, but I
assume it's unavoidable. It doesn't take away from performance or
navigability.

quote:

>
> Finally, take it over to the validator ( http://validator.w3.org will do)
> and correct all the errors. You have severe nesting errors like <tr><a
> ...><td> - such things are not allowed :-)

Ah yes, the good ol' validator. I took it over there before and had 80
something errors due to event handlers. But now since I revised by
navigation, it's down to six, which are incapable of being corrected.
Everything else is fixed, including the tutorial navigation (thank you to
Toby A Inkster!)

Thank you for all the suggestions and criticisms, I appreciate it :) Thanks
again.

-jamslam

quote:

>
> Cheers
> Richard.
>
>

jamslam

2003-12-03, 7:23 pm

"jake" <jake@gododdin.demon.co.uk> wrote in message
news:0A87cJMLN5l$Ewbo@gododdin.demon.co.uk...

quote:

> This is what a typical screen-reader/voice browser is going to speak:
> http://www.gododdin.demon.co.uk/ng/WTC.txt
>
> (1) The real problem is that the main navigation doesn't work; it's just
> perceived as text. No dropdowns. Even the main items (Tutorials, Tools,
> etc.) don't act as links.

They now act as links to a sitemap, which provides links, categorized, just
like the drop down menu.

quote:

>
> (2) The headings are a number of <H1>s and <H3>s. I would suggest it
> would be better with just a single <H1>, with the rest being <H2>s.

Replace all <h2>'s with <h1>'s. Kept the <h3>'s considering that they are
sub-sub-headers. Using a database has isn't advantages, very simple
replacement ;)

quote:

>
> (3) A quick trip though a spell/grammar-checker would be useful ;-)
> e.g. swtiching

Fixed that spelling mistake, I'll try to be more careful ;)

Thanks for your suggestions as well! :)

-jamslam

jake

2003-12-03, 7:23 pm

In message <vpgravq4moen8f@corp.supernews.com>, jamslam
<webmaster@webtrickscentral.com> writes

quote:

>
>"jake" <jake@gododdin.demon.co.uk> wrote in message
>news:0A87cJMLN5l$Ewbo@gododdin.demon.co.uk...
>
>
>They now act as links to a sitemap, which provides links, categorized, just
>like the drop down menu.
>

That's an improvement, but it would be better if they linked to separate
pages -- each beginning with their 'drop-own' equivalent as a 'table of
contents'. Otherwise, for example, I 'click' on Tools -- I go to a page
where I hear lists of links to General, Tutorials, etc. ...... makes me
think I've gone to the wrong page! It doesn't help that there's no
'table of contents' and no headings to help me navigate between the
General, Tutorials, etc. entries on the site map.

quote:

>
>Replace all <h2>'s with <h1>'s. Kept the <h3>'s considering that they are
>sub-sub-headers. Using a database has isn't advantages, very simple
>replacement ;)

Think of the structure of a document as a pyramid. Your <H3>s should be
subordinate to a <H2> otherwise it doesn't really make sense.

quote:

>
>Fixed that spelling mistake, I'll try to be more careful ;)

Don't forget the others ;-)

quote:

>
>Thanks for your suggestions as well! :)
>
>-jamslam
>
>

--
Jake