Looking for feedback

[biff]

Hi, I've been lurking here for roughly two months trying to pick up tips
and tricks. Why in never occurred to me to sub to this NG before is
beyond me but anyway I *think* I'm ready to see if I've put into
practice all that I've read.

The site that I'm submitting for your inspection is one that I wrote for
that organization late last summer. I did it all in tables. I've always
had a sneaking suspicion that although aesthetically correct ( it looked
ok) tables weren't the way to go but at the time I was trying to teach
myself CSS and didn't know enough. Tables were the quickest way to go.
Also at that time I wasn't as concerned with accessibility as I am now.
Trust me, even if what I'm submitting isn't perfect it's a far cry
better than what I had. So here it is:

http://mysite.verizon.net/vze1mdmy/test/

It validates, it renders the way I want in FF, IE6, Opera in Windows,
and FF, Opera, SeaMonkey and Lynx in Linux.

I've munged it up some because of the sensitive nature of the site but
you should get the general gist of the way it's supposed to be.

Thank you,
biff

 

[John Hosking]

Hi, I've been lurking here for roughly two months trying to pick up tips
and tricks. Why in never occurred to me to sub to this NG before is
beyond me but anyway I *think* I'm ready to see if I've put into
practice all that I've read.

There is also a NG named alt.html.critique for, well, critiques,
although certainly all kinds of things pop up in a.html.

The site that I'm submitting for your inspection is one that I wrote for
that organization late last summer.

^^^^^^^
unnamed

http://mysite.verizon.net/vze1mdmy/test/

It validates,

Great! Good work, thanks for checking. And congrats.

it renders the way I want in FF, IE6, Opera in Windows,
and FF, Opera, SeaMonkey and Lynx in Linux.

Oh. Umm...

I've munged it up some because of the sensitive nature of the site but
you should get the general gist of the way it's supposed to be.

I'm not sure how to help you. Your munging hasn't kept the identity of
the agency or the location or phone numbers of the offices secret, but
it does make it hard to know what the site will really look like.

What's the square in the upper right? Have you munged away an image of
the "City" County seal? Or will it always be an empty, gray square? Is
there supposed to be more in the picture at the left? Does the empty
gray square explain photo of a highway? What have you hidden in the HTML
at <div id="image"></div>?

The page "renders the way you want," so should we not comment on its
sensitivity to text resizing? Is the image of the cartoon family
supposed to be stretched? Are we just supposed to comment on its
look-and-feel, its coloring, its friendliness?

You've also posted a bit of disclaimer (which I've snipped), suggesting
that if the coding's bad it's no big surprise or concern, because it
used to be lots worse. What kind of feedback are you looking for?

FWIW: The link rules in the CSS should be in the order :link, :visited,
:hover, :active (nmemonic: "Las Vegas Has Animals") rather than the
order you've used.

I think this is odd markup:
<div class="innerright2"><strong>RESPONSE</strong> is a program of
<strong>CCFHS</strong></div>
<div class="innerright3"><strong>Offices are at:</strong>
<ul id="menu">
<li>54 Xxxxxx Street</li>
<li>Xxxxxx 555-5555</li>
<li><br>112 XxxxStreet</li>
<li>Xxxxxxxxx 555-5555</li>
<li><br>149 Xxxx Street</li>
<li>Xxxxxxxxx 555-5555</li>
</ul>
</div>

There's not much list-y about the addresses and phone numbers, it
doesn't look like a "menu" either, you've got some spurious <br>s in
there, and the divs are really just paragraphs or headers. I don't know
what should be strong about "Offices are at", but if you just want the
whole element to be bold, either mark it up with <b> (a Jukka(tm)
suggestion) or apply font-weight:bold to the div's rule.

A class name like "innerright2" won't tell you or anyone else about the
semantic meaning of the element; it just says where you think it ought
to be positioned. But what if you want it positioned elsewhere some day?
What if you copy the text to another page? How about .officesHead (or
something else semantically meaningful), if you can't get rid of the
classing altogether?

Why are you setting fixed widths in IE, and why in pixels?

Not sure what else to offer or suggest, because I'm not sure what
feedback you're hoping for. But good luck.

 

[biff]

Great! Good work, thanks for checking. And congrats.

When the site was done completely in tables it validated too. The
difference was of course it was 4.01 transitional instead of 4.01
strict. I realize validation is a good thing but it doesn't tell you
everything.

Oh. Umm...

This is what I need to know. It does what I think it's supposed to do in
each of those browsers but what do you see ?

I'm not sure how to help you. Your munging hasn't kept the identity of
the agency or the location or phone numbers of the offices secret, but
it does make it hard to know what the site will really look like.

What's the square in the upper right? Have you munged away an image of
the "City" County seal? Or will it always be an empty, gray square? Is
there supposed to be more in the picture at the left? Does the empty
gray square explain photo of a highway? What have you hidden in the HTML
at <div id="image"></div>?

Maybe I did a poor job of munging but I didn't want addresses and phone
numbers out in plain sight.

The page "renders the way you want," so should we not comment on its
sensitivity to text resizing?

I apologize for the way I worded that. Those are the comments that would
be most appreciated.

Is the image of the cartoon family supposed to be stretched?

LOL...actually it is. Even my wife has commented on it but the site is
for her boss and she likes it soooooooo...

Are we just supposed to comment on its look-and-feel, its coloring, its friendliness?

You can if you wish but I am mainly concerned with comments on the
markup and css. Keep in mind the "boss" is happy with the overall look
of the site.

You've also posted a bit of disclaimer (which I've snipped), suggesting
that if the coding's bad it's no big surprise or concern, because it
used to be lots worse. What kind of feedback are you looking for?

That's not what I intended. It was more or less me laughing at
myself...If you think it's bad now you should have seen it before kind
of thing

What you have suggested below is the kind of feedback I'm looking for.

FWIW: The link rules in the CSS should be in the order :link, :visited,
:hover, :active (nmemonic: "Las Vegas Has Animals") rather than the
order you've used.

I did not know that. Will be fixed.

I think this is odd markup:
<div class="innerright2"><strong>RESPONSE</strong> is a program of
<strong>CCFHS</strong></div>
<div class="innerright3"><strong>Offices are at:</strong>
<ul id="menu">
<li>54 Xxxxxx Street</li>
<li>Xxxxxx 555-5555</li>
<li><br>112 XxxxStreet</li>
<li>Xxxxxxxxx 555-5555</li>
<li><br>149 Xxxx Street</li>
<li>Xxxxxxxxx 555-5555</li>
</ul>
</div>

There's not much list-y about the addresses and phone numbers, it
doesn't look like a "menu" either, you've got some spurious <br>s in
there, and the divs are really just paragraphs or headers. I don't know
what should be strong about "Offices are at", but if you just want the
whole element to be bold, either mark it up with <b> (a Jukka(tm)
suggestion) or apply font-weight:bold to the div's rule.

Good points, I understand and will correct, thank you. More of this is
helpful.

A class name like "innerright2" won't tell you or anyone else about the
semantic meaning of the element; it just says where you think it ought
to be positioned. But what if you want it positioned elsewhere some day?
What if you copy the text to another page? How about .officesHead (or
something else semantically meaningful), if you can't get rid of the
classing altogether?

I was never quite sure what that meant, now I do. Will fix.

Why are you setting fixed widths in IE, and why in pixels?

yeah, I know...IE has been giving me a hard time. I'm still working on
it, bit by bit I'll get it right.

Not sure what else to offer or suggest, because I'm not sure what
feedback you're hoping for. But good luck.

You did a good job on what I gave you to work with. I'll be more
specific next time.

 

[biff]

OOOOPS....


Thank you for your suggestions they are very much appreciated.


biff

 

[dorayme]

The site that I'm submitting for your inspection

http://mysite.verizon.net/vze1mdmy/test/

You could consider em basing the width for your bgrnd3.jpg so
that it grows with user text size upping. So it is not "left
stranded" in static limbo while all else happily grow big or
small.

I like your linen background.

 

[biff]

You could consider em basing the width for your bgrnd3.jpg so
that it grows with user text size upping. So it is not "left
stranded" in static limbo while all else happily grow big or
small.

That definitely was the way to go. Not only does the page grow better it
also solved my problems with px in my ifIE sheet. I dumped most of them
and changed the rest to em. The page looks like it's zooming now. Thank
you very much.

I like your linen background.

Thank you.

 

[dorayme]

That definitely was the way to go. Not only does the page grow better it
also solved my problems with px in my ifIE sheet. I dumped most of them
and changed the rest to em. The page looks like it's zooming now. Thank
you very much.

OK. But there is more work to be done... of course <g>

Your:

<h1>Coös Resources</h1>
<h2>a project of</h2>
<h3>Coös County Family Health Sevices, Inc. RESPONSE Program</h3>

simply will not do. <h2> is not a header for a start. Rethink
this one and while at it, try to make the whole banner with image
not as high.

Your picture is fine to grow just wide without taller in a
situation like this where few people will really strain it and if
they do, it will be just a "graphic effect" of little
consequence. The advantage simply being not to use up valuable
screen estate and require early scrolling for little real
purpose. This now leaves you with the problem of how to grow the
left html text banner bit. The first thing to do is to remove the
3 heading elements and choose another way where the text is
tighter and at least some of it smaller, the gaps not so large.
All possible with CSS.

Ah yes, you are wondering maybe how to fix the height but not the
width of the pic, you could just em base the width but px base
the height. Some line up problems if you don't get clever with
the text block to the left too... The other strategy might be to
max height the height of the img or immediate containing div in
em. I am here just pointing to a problem to be solved rather than
solving it.

 

[John Hosking]

That definitely was the way to go. Not only does the page grow better it
also solved my problems with px in my ifIE sheet. I dumped most of them
and changed the rest to em. The page looks like it's zooming now. Thank
you very much.

Looking much better! You be zoomin'. Some more little comments:
I suggest you define a default text color (and background color). You
set a background image for body now, which effectively provides a bg
color so long as that image appears, but what if it doesn't appear, or
conflicts with (i.e., closely matches) a visitor's default fg color? Add
color:#000; background-color:#fff; to the body rule.

Do you not want to add the state name somewhere? I realize that the
people in Coös County know what state they're in, but you _are_
publishing to the World Wide Web...

I was going to suggest including the (missing) area codes to the office
phone numbers, since the 24/7 number at the bottom includes it, but I've
determined that the 866 number must be a toll-free code, and the rest of
NH is 603. But while figuring this out I noticed that the first office's
phone number is registered, according to an Internet source, to a couple
at a different address. If you think the number is correct then by all
means go ahead, but if the number's mistyped you ought to fix it. ;-)

If this page is a part of and subordinate to RESPONSE, shouldn't there
be a link to some RESPONSE site or page? (Maybe not, but it's what I
expect.) Likewise CCFHS. (Maybe the problem here is that I don't clearly
understand the relationship of the groups and projects mentioned.)

I think there's a space missing before REPSONSE in "Disclaimer:RESPONSE
and CCFHS ..."

HTH

 

[biff]

OK. But there is more work to be done... of course <g>

of course

Your:

<h1>Coös Resources</h1>
<h2>a project of</h2>
<h3>Coös County Family Health Sevices, Inc. RESPONSE Program</h3>

simply will not do. <h2> is not a header for a start. Rethink
this one and while at it, try to make the whole banner with image
not as high.

I've done away with h1 etc... and resized the image.

Your picture is fine to grow just wide without taller in a
situation like this where few people will really strain it and if
they do, it will be just a "graphic effect" of little
consequence. The advantage simply being not to use up valuable
screen estate and require early scrolling for little real
purpose. This now leaves you with the problem of how to grow the
left html text banner bit. The first thing to do is to remove the
3 heading elements and choose another way where the text is
tighter and at least some of it smaller, the gaps not so large.
All possible with CSS.

Ah yes, you are wondering maybe how to fix the height but not the
width of the pic, you could just em base the width but px base
the height. Some line up problems if you don't get clever with
the text block to the left too... The other strategy might be to
max height the height of the img or immediate containing div in
em. I am here just pointing to a problem to be solved rather than
solving it.

As for the above I've tried everything I can think of but still can't
maintain a fixed height for the banner and not have the text grow out of
it after just a few bumps of the mouse wheel.

I'm not saying it can't be done, just that I haven't been able to do
it...yet

 

[biff]

Looking much better! You be zoomin'. Some more little comments:
I suggest you define a default text color (and background color). You
set a background image for body now, which effectively provides a bg
color so long as that image appears, but what if it doesn't appear, or
conflicts with (i.e., closely matches) a visitor's default fg color? Add
color:#000; background-color:#fff; to the body rule.

Taken care of...

Do you not want to add the state name somewhere? I realize that the
people in Coös County know what state they're in, but you _are_
publishing to the World Wide Web...

I was going to suggest including the (missing) area codes to the office
phone numbers, since the 24/7 number at the bottom includes it, but I've
determined that the 866 number must be a toll-free code, and the rest of
NH is 603. But while figuring this out I noticed that the first office's
phone number is registered, according to an Internet source, to a couple
at a different address. If you think the number is correct then by all
means go ahead, but if the number's mistyped you ought to fix it. ;-)

ooopsie...yes that was a typo thanks for catching it

If this page is a part of and subordinate to RESPONSE, shouldn't there
be a link to some RESPONSE site or page? (Maybe not, but it's what I
expect.) Likewise CCFHS. (Maybe the problem here is that I don't clearly
understand the relationship of the groups and projects mentioned.)

I think there's a space missing before REPSONSE in "Disclaimer:RESPONSE
and CCFHS ..."

and that one too ... also I agree with your suggestions.

http://mysite.verizon.net/vze1mdmy/test/

HTH

it did...thank you

 

[dorayme]

Your picture is fine to grow just wide without taller in a
situation like this where few people will really strain it and if
they do, it will be just a "graphic effect" of little
consequence. The advantage simply being not to use up valuable
screen estate and require early scrolling for little real
purpose. This now leaves you with the problem of how to grow the
left html text banner bit.

....

I am here just pointing to a problem to be solved rather than
solving it.

As for the above I've tried everything I can think of but still can't
maintain a fixed height for the banner and not have the text grow out of
it after just a few bumps of the mouse wheel. [/QUOTE]

Yes, it is too hard in that design. It will fine enough for most
people as is.

 

[biff]

Your picture is fine to grow just wide without taller in a
situation like this where few people will really strain it and if
they do, it will be just a "graphic effect" of little
consequence. The advantage simply being not to use up valuable
screen estate and require early scrolling for little real
purpose. This now leaves you with the problem of how to grow the
left html text banner bit.

...

I am here just pointing to a problem to be solved rather than
solving it.

As for the above I've tried everything I can think of but still can't
maintain a fixed height for the banner and not have the text grow out of
it after just a few bumps of the mouse wheel.

Yes, it is too hard in that design. It will fine enough for most
people as is.
[/QUOTE]

Thank you for your help and suggestions, the were appreciated