Critique for PTA site

[Adrienne Boswell]

I volunteerd to do the PTA web site for my son's elementary school, and
need some feedback from the community. The url is
[http://jmpta.adrienneboswell.com].

All suggestions, comments, bug reports are most welcome. When responding,
especially with a bug, please indicate browser and operating system.

Thanks in advance.

 

[Beauregard T. Shagnasty]

I volunteerd to do the PTA web site for my son's elementary school,
and need some feedback from the community. The url is
[http://jmpta.adrienneboswell.com].

All suggestions, comments, bug reports are most welcome. When
responding, especially with a bug, please indicate browser and
operating system.

I don't care much for the purple background.

Is the contact page supposed to be there? All links seem to work except
that, and the site map. No stubs yet? [ http://error.000webhost.com/ ]

Also, I don't have "hobo bt" font.

 

[Chris F.A. Johnson]

I volunteerd to do the PTA web site for my son's elementary school, and
need some feedback from the community. The url is
[http://jmpta.adrienneboswell.com].

All suggestions, comments, bug reports are most welcome. When responding,
especially with a bug, please indicate browser and operating system.

Looks good, but it's missing a background colour.

 

[Adrienne Boswell]

I volunteerd to do the PTA web site for my son's elementary school,
and need some feedback from the community. The url is
[http://jmpta.adrienneboswell.com].

All suggestions, comments, bug reports are most welcome. When
responding, especially with a bug, please indicate browser and
operating system.

I don't care much for the purple background.

It's actually navy - it's the school colors, not my choice, really.

Is the contact page supposed to be there? All links seem to work except
that, and the site map. No stubs yet? [ http://error.000webhost.com/ ]

It's a footer that I've copied over from other footers. I'll be fixing
those when I actually get the pages done.

Also, I don't have "hobo bt" font.

If you are using a browser that understands @font-face, you should have
seen the hobo bt font, if not, you should have seen another san-serif
font.

Thank you for the review. Helps a lot.

 

[Adrienne Boswell]

I volunteerd to do the PTA web site for my son's elementary school,
and need some feedback from the community. The url is
[http://jmpta.adrienneboswell.com].

All suggestions, comments, bug reports are most welcome. When
responding, especially with a bug, please indicate browser and
operating system.

Looks good, but it's missing a background colour.

Thank you, and thank you for mentioning the background colour. That's been
fixed.

 

[Beauregard T. Shagnasty]

Gazing into my crystal ball I observed "Chris F.A. Johnson"

I volunteerd to do the PTA web site for my son's elementary school,
and need some feedback from the community. The url is
[http://jmpta.adrienneboswell.com].

All suggestions, comments, bug reports are most welcome. When
responding, especially with a bug, please indicate browser and
operating system.

Looks good, but it's missing a background colour.

Thank you, and thank you for mentioning the background colour.
That's been fixed.

That's what I meant. My default background is a light purple .. for
situations just like this.

[and] If you are using a browser that understands @font-face, you should
have seen the hobo bt font, if not, you should have seen another
san-serif font.

Firefox 3.0.14, Opera 9.64, Ubuntu 8.04, GNOME. No hoboes.

 

[dorayme]

I volunteerd to do the PTA web site for my son's elementary school, and
need some feedback from the community. The url is
[http://jmpta.adrienneboswell.com].

All suggestions, comments, bug reports are most welcome. When responding,
especially with a bug, please indicate browser and operating system.

Hi Adrienne, just a couple of remarks. First, nice, as to be expected.

* I like the yellow with the dark blue. And plus, it is useful to
co-ordinate with the needed dark bg of the nav links and white/yellow
text on these and the right sidebar.

* I would lose the borders on the sidebar. First it looks better
without, Second, you are already fighting for width space (horiz bars
loom early for users with thin browsers and you are guarding against
early float drop.)

* Suggest in the fight against width, instead of 1em all around,
#content {padding: .5em 0 .5em .5em; ...}. You already have white buffer
to left of the container element without any padding (put a thin border
on container to see)

* Suggest to add #header address { ... padding-left: .5em; ...}

And now some other ideas, fancy things maybe, but if they work, would
make it look sort of neater without the yellow hanging at a different
height to the blue.

If you can be reasonably confident of the nav left not being so full of
content that it would push the yellow below the content:

One more wrapper! And a very few additions to CSS.

<div id="bigWrap">
<div id="nav"></div>
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
</div>
<div id="footer"></div>

CSS:

#bigWrap {overflow: hidden; background: #ffd700; ...}
#container {background: #fff; ...}
#content {padding: .5em 0 .5em .5em;...}
and
take border off nav

You likely don't need a min-height on nav now...

Enough for now maybe.

 

[Adrienne Boswell]

Gazing into my crystal ball I observed dorayme

I volunteerd to do the PTA web site for my son's elementary school,
and need some feedback from the community. The url is
[http://jmpta.adrienneboswell.com].

All suggestions, comments, bug reports are most welcome. When
responding, especially with a bug, please indicate browser and
operating system.

Hi Adrienne, just a couple of remarks. First, nice, as to be expected.

* I like the yellow with the dark blue. And plus, it is useful to
co-ordinate with the needed dark bg of the nav links and white/yellow
text on these and the right sidebar.

* I would lose the borders on the sidebar. First it looks better
without, Second, you are already fighting for width space (horiz bars
loom early for users with thin browsers and you are guarding against
early float drop.)

* Suggest in the fight against width, instead of 1em all around,
#content {padding: .5em 0 .5em .5em; ...}. You already have white
buffer to left of the container element without any padding (put a
thin border on container to see)

* Suggest to add #header address { ... padding-left: .5em; ...}

And now some other ideas, fancy things maybe, but if they work, would
make it look sort of neater without the yellow hanging at a different
height to the blue.

If you can be reasonably confident of the nav left not being so full
of content that it would push the yellow below the content:

One more wrapper! And a very few additions to CSS.

<div id="bigWrap">
<div id="nav"></div>
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
</div>
<div id="footer"></div>

CSS:

#bigWrap {overflow: hidden; background: #ffd700; ...}
#container {background: #fff; ...}
#content {padding: .5em 0 .5em .5em;...}
and
take border off nav

You likely don't need a min-height on nav now...

Enough for now maybe.

Thank you, I'm going to work on your suggestions tomorrow. I'll be back
with revisions.

 

[GTalbot]

[followup-to set to alt.html]

I volunteerd to do the PTA web site for my son's elementary school, and
need some feedback from the community.  The url is
[http://jmpta.adrienneboswell.com].

All suggestions, comments, bug reports are most welcome.  When responding,
especially with a bug, please indicate browser and operating system.

Hi!

1-
I would remove this:
<link rel="home" href="index.php" title="Index Page" />
J. Nielsen and others (V. Flanders) recommend to avoid self-linking
webpages.


2- I am personally against double color contrast sets. I think it
should always be dark color (say, black) on light background color
(say white) all over since we have been day animals for the last
200,000 years. Color contrast, color brightness is very important but
having 2 sets of color contrasts in a webpage is, IMO, unnatural,
visually confusing and visually incoherent.

3- PTA: by chance, I glanced at the title element and there I saw what
PTA actually means... for the first time. I wonder why the most
important text (PTA) is not defined in its extended form in the
entrance webpage: Parent Teacher Association.

4- When I resize browser window viewport (at around 850px) in Firefox
3.5.3 under Windows, then the sidebar goes under. I'm not saying here
that this is a bug or anything. I just noticed this.

5-
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Personally, I am more and more following the W3C recommendation on
favicon and trying to have Microsoft comply with it (and to drop
rel="shortcut icon"). See

http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/#bug2

and

W3C Quality Assurance tip, How to Add a Favicon to your Site
http://www.w3.org/2005/10/howto-favicon

6- Your validation buttons are perfect IMO.

7-
body {
margin: 0;
padding: 0;
}

Personally, I am against resetting CSS default values, especially when
modern browsers (IE 8, Firefox 2+, Opera 9+, Safari 4, Konqueror 4)
all share the same browser defaults. Body has no padding in modern
browsers except in Opera 6. All browsers use a margin of 8px
(equivalent to 0.5em) and that's best, ideal IMO.

8-
label {
display: block;
width: 7em;
text-align: right;
float: left;
margin: .25em 1em 0 0;
}

I wonder why you need to set display: block if the label is going to
be floated left. Also, that rule seems a bit complex...

[followup-to set to alt.html]

regards, Gérard

 

[Adrienne Boswell]

Gazing into my crystal ball I observed "Chris F.A. Johnson"

Adrienne Boswell wrote:
I volunteerd to do the PTA web site for my son's elementary school,
and need some feedback from the community. The url is
[http://jmpta.adrienneboswell.com].

All suggestions, comments, bug reports are most welcome. When
responding, especially with a bug, please indicate browser and
operating system.

Looks good, but it's missing a background colour.

Thank you, and thank you for mentioning the background colour.
That's been fixed.

That's what I meant. My default background is a light purple .. for
situations just like this.

[and] If you are using a browser that understands @font-face, you should
have seen the hobo bt font, if not, you should have seen another
san-serif font.

Firefox 3.0.14, Opera 9.64, Ubuntu 8.04, GNOME. No hoboes.

How odd! The Hobo BT font is used for the mustang PTA lettering, just
so you know.

 

[Adrienne Boswell]

Gazing into my crystal ball I observed GTalbot <[email protected]>
writing in (e-mail address removed):

[followup-to set to alt.html]

I volunteerd to do the PTA web site for my son's elementary school, and
need some feedback from the community.  The url is
[http://jmpta.adrienneboswell.com].

All suggestions, comments, bug reports are most welcome.  When

respondi

ng,
especially with a bug, please indicate browser and operating system.

Hi!

1-
I would remove this:
<link rel="home" href="index.php" title="Index Page" />
J. Nielsen and others (V. Flanders) recommend to avoid self-linking
webpages.

I think it's all right for a browser navigation bar (for those browsers
that have one, that is. For browsers that do have a navigation bar, on
the page/link is grayed out (well, at least it is in Opera).

2- I am personally against double color contrast sets. I think it
should always be dark color (say, black) on light background color
(say white) all over since we have been day animals for the last
200,000 years. Color contrast, color brightness is very important but
having 2 sets of color contrasts in a webpage is, IMO, unnatural,
visually confusing and visually incoherent.

It's the school colors.

3- PTA: by chance, I glanced at the title element and there I saw what
PTA actually means... for the first time. I wonder why the most
important text (PTA) is not defined in its extended form in the
entrance webpage: Parent Teacher Association.

I think most people just know it as PTA, and are not acronym junkies
like I am. I am also using it for search engines. I will probably use
the long form in other pages as they come on line.

4- When I resize browser window viewport (at around 850px) in Firefox
3.5.3 under Windows, then the sidebar goes under. I'm not saying here
that this is a bug or anything. I just noticed this.

Yup, that's a bug. dorayme has made some suggestions I am going to try
out tomorrow to see if I can fix that.

5-
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Personally, I am more and more following the W3C recommendation on
favicon and trying to have Microsoft comply with it (and to drop
rel="shortcut icon"). See

http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/#bug2

and

W3C Quality Assurance tip, How to Add a Favicon to your Site
http://www.w3.org/2005/10/howto-favicon

Rats! I have to make another icon? Oh well, get with the time, then.

6- Your validation buttons are perfect IMO.

Thank you. I think they're nice, not too big, don't shout out at you.

7-
body {
margin: 0;
padding: 0;
}

Personally, I am against resetting CSS default values, especially when
modern browsers (IE 8, Firefox 2+, Opera 9+, Safari 4, Konqueror 4)
all share the same browser defaults. Body has no padding in modern
browsers except in Opera 6. All browsers use a margin of 8px
(equivalent to 0.5em) and that's best, ideal IMO.

For some reason, my system always adds padding and margin. It doesn't
hurt, so I add it for people like me.

8-
label {
display: block;
width: 7em;
text-align: right;
float: left;
margin: .25em 1em 0 0;
}

I wonder why you need to set display: block if the label is going to
be floated left. Also, that rule seems a bit complex...

I don't remember now why it's like that, but I vaguely remember
something about it being screwy without the block. Maybe I'll play with
it a little.

Thanks for all the comments, Gérard, I really appreciate it.

 

[William Gill]

If you are using a browser that understands @font-face, you should have
seen the hobo bt font, if not, you should have seen another san-serif
font.

FYI

http://www.w3.org/TR/CSS2/changes.html#q104

 

[William Gill]

Thank you, and thank you for mentioning the background colour. That's been
fixed.

Now you should specify a default (foreground) color, even if it is black
(like the default setting on most browsers).

Like Beauregard, I have my defaults set to obnoxious colors so I can
catch myself if I miss specifying a color/background combination.

 

[Adrienne Boswell]

Gazing into my crystal ball I observed William Gill

Now you should specify a default (foreground) color, even if it is
black (like the default setting on most browsers).

Like Beauregard, I have my defaults set to obnoxious colors so I can
catch myself if I miss specifying a color/background combination.

Thank you for pointing that out. Fixed.

 

[Jan C. Faerber]

I volunteerd to do the PTA web site for my son's elementary school, and
need some feedback from the community.  The url is
[http://jmpta.adrienneboswell.com].

All suggestions, comments, bug reports are most welcome.  When responding,
especially with a bug, please indicate browser and operating system.

Looks little bit lonely - or empty. Yes - it's very nice indeed.
The pics of the kids - nice. The text fine - CSS is very good of
course.
But I did not watched to source.
Sometimes I get this feeling with CSS: It is somehow cold and
gives you the position to stand above the content.
This is not a special critique for your page! I just added it.

I miss something special on the page. It is not necessarily
a big flash banner or a holistic background image.
I don't miss javascript and I don't miss games with other effects.

My first idea was when I saw the page -
The latin text could be pasted on a stone.
I don't know latin. Alea jacta est - Quo vadis - quod erum
demonstrandum - hehehe - that's it.

So I just know it is latin - right?
It can be also something else than a stone.
Anyway I remembered that the old latin texts where written
justified. Not only justified but at the end of a line they
cut the word at the last letter that fitted to the end
and simply continued in the next line.

Maybe a good idea for a 'funny' or 'intellectual' layout.

Cheers
Jan

 

[GTalbot]

Gazing into my crystal ball I observed GTalbot <[email protected]>
writing in (e-mail address removed):

[http://jmpta.adrienneboswell.com].

5-
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Personally, I am more and more following the W3C recommendation on
favicon and trying to have Microsoft comply with it (and to drop
rel="shortcut icon"). See


W3C Quality Assurance tip, How to Add a Favicon to your Site
http://www.w3.org/2005/10/howto-favicon

Rats! I have to make another icon?

No. Not necessarly.

I'm saying is that rel="shortcut icon" is not *perfectly* conformant
with
the HTML 4 spec but this rel="shortcut icon" is what IE (all
versions)
only understand.

{
"MSIE looks only for 'shortcut icon'. Technically, a link attribute
with multiple words is saying that the link is of multiple types, with
each word being a different type identifier, but I think the Microsoft
programmers were just clueless enough to think that spaces could be
used within type names, and that 'shortcut icon' is what they think
the type is."
'Shortcut icon' instead of 'icon', now that was definitely a simple
oversight., from Eric Lawrence, IE program manager
}

http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/#bug2


I'm also saying that defining a favicon (webpage icon) should allow
a PNG file type but again, IE will not support anything besides an
..ico file type. IMO, that's a bug. It should allow .gif file format as
well.

{
Jeff Davis, IE project manager in his why doesn't the favicon for my
site appear in IE7? states "It must actually be a .ico (an Icon) file.
Bitmaps, pngs, gifs, etc, will not work.".
How to Add a Shortcut Icon to a Web Page at MSDN states "To create
the icon, use an icon editor, such as the one included in Microsoft
Visual Studio, and save the icon in the .ico file format. Internet
Explorer will ignore icons that are not in .ico format, and will
instead display the default Internet Explorer shortcut icon.".
}
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/#bug40

I don't remember now why it's like that, but I vaguely remember
something about it being screwy without the block.

Chances are it's all because of numerous IE 6 or IE 7 bugs, flaws
with
float model.

regards, Gérard

 

[Adrienne Boswell]

I volunteerd to do the PTA web site for my son's elementary school, and
need some feedback from the community.  The url is
[http://jmpta.adrienneboswell.com].

All suggestions, comments, bug reports are most welcome.  When

respondi

ng,
especially with a bug, please indicate browser and operating system.

Looks little bit lonely - or empty. Yes - it's very nice indeed.

It will get more filled up when I get more content.

The pics of the kids - nice.

I'm hoping to replace them with real John Muir kids. Even though it's a
public school, we still have uniforms. The acceptable attire is red,
blue or white shirts with dark blue pants/skirts. Makes it easier on
the parents, and easier on the kids as well. I think that real JM
uniform colors will look nice with the site colors.

The text fine - CSS is very good of
course.
But I did not watched to source.
Sometimes I get this feeling with CSS: It is somehow cold and
gives you the position to stand above the content.
This is not a special critique for your page! I just added it.

Yes, well that's the whole point, isnt' it, separate content from
presentation - stand above it if you will. I love that about CSS, just
as much as I love server side includes.

I miss something special on the page. It is not necessarily
a big flash banner or a holistic background image.
I don't miss javascript and I don't miss games with other effects.

You know, I was thinking about that, too. Maybe if I get enough good JM
kids pictures, I can turn them into a flash animation (just run once,
and only on the index page).

You won't ever see any gratuitous JavaScript on things I author. I'm
really into the KISS principle.

My first idea was when I saw the page -
The latin text could be pasted on a stone.
I don't know latin. Alea jacta est - Quo vadis - quod erum
demonstrandum - hehehe - that's it.

So I just know it is latin - right?

Actually it's fake Latin [http://en.wikipedia.org/wiki/Lorem_ipsum]. I
just got an email from one of the PTA board members about that.

It can be also something else than a stone.
Anyway I remembered that the old latin texts where written
justified. Not only justified but at the end of a line they
cut the word at the last letter that fitted to the end
and simply continued in the next line.

Maybe a good idea for a 'funny' or 'intellectual' layout.

Yes, it would, although I really can't stand justified text. I remember
when I was really young, and the TV Guide was much smaller, one of the
things that really bothered me was the justified text - although at the
time I was too young to know what it was called, I just didn't like it.

Cheers
Jan

Thanks for the comments. Appreciate it!

 

[dorayme]

Now you should specify a default (foreground) color, even if it is black
(like the default setting on most browsers).

Like Beauregard, I have my defaults set to obnoxious colors so I can
catch myself if I miss specifying a color/background combination.

And have a miserable time of it browsing the internet! I have known for
a long time that I am among masochists, heathens, geeks of all kinds but
this one takes the cake!

The better thing to do is to have a browser that you do *not* use in
anger for yourself on a daily basis to test for this. And then you can
say with pride that there are no flies on you! <g>

 

[William Gill]

And have a miserable time of it browsing the internet! I have known for
a long time that I am among masochists, heathens, geeks of all kinds but
this one takes the cake!

The better thing to do is to have a browser that you do *not* use in
anger for yourself on a daily basis to test for this. And then you can
say with pride that there are no flies on you! <g>

And which browser would you use to critique a site? <g>

 

[dorayme]

And which browser would you use to critique a site? <g>

Ouch! <g>