Looking for feedback

Discussion in 'HTML' started by biff, Apr 12, 2007.

  1. biff

    biff Guest

    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
    biff, Apr 12, 2007
    #1
    1. Advertising

  2. biff

    John Hosking Guest

    biff wrote:
    > 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.

    --
    John
    John Hosking, Apr 12, 2007
    #2
    1. Advertising

  3. biff

    biff Guest

    John Hosking wrote:

    >> http://mysite.verizon.net/vze1mdmy/test/
    >>
    >> It validates,

    >
    > 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.

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

    >
    > 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'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>?


    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, Apr 12, 2007
    #3
  4. biff

    biff Guest

    OOOOPS....


    Thank you for your suggestions they are very much appreciated.


    biff
    biff, Apr 12, 2007
    #4
  5. biff

    dorayme Guest

    In article <11uTh.2984$vo2.971@trnddc01>, biff <>
    wrote:

    > 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.

    --
    dorayme
    dorayme, Apr 12, 2007
    #5
  6. biff

    biff Guest

    dorayme wrote:
    > In article <11uTh.2984$vo2.971@trnddc01>, biff <>
    > wrote:
    >
    >> 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.


    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.
    biff, Apr 14, 2007
    #6
  7. biff

    dorayme Guest

    In article <c66Uh.92$xL6.34@trnddc05>, biff <> wrote:

    > dorayme wrote:
    > > In article <11uTh.2984$vo2.971@trnddc01>, biff <>
    > > wrote:
    > >
    > >> 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.

    >
    > 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.

    --
    dorayme
    dorayme, Apr 14, 2007
    #7
  8. biff

    John Hosking Guest

    biff wrote:
    > dorayme wrote:
    >
    >> In article <11uTh.2984$vo2.971@trnddc01>, biff <> wrote:
    >>
    >>> 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.

    >
    > 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
    --
    John
    John Hosking, Apr 14, 2007
    #8
  9. biff

    biff Guest

    dorayme wrote:

    > 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, Apr 16, 2007
    #9
  10. biff

    biff Guest

    John Hosking wrote:

    > 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 :)
    biff, Apr 16, 2007
    #10
  11. biff

    dorayme Guest

    In article <ZrPUh.644$Da6.543@trnddc02>, biff <>
    wrote:

    > > 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.

    --
    dorayme
    dorayme, Apr 16, 2007
    #11
  12. biff

    biff Guest

    dorayme wrote:
    > In article <ZrPUh.644$Da6.543@trnddc02>, biff <>
    > wrote:
    >
    >>> 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.
    >


    Thank you for your help and suggestions, the were appreciated :)
    biff, Apr 16, 2007
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Bijoy Naick
    Replies:
    1
    Views:
    421
    Jeffrey Palermo [MCP]
    Nov 17, 2004
  2. Replies:
    0
    Views:
    305
  3. Jim1dev
    Replies:
    0
    Views:
    285
    Jim1dev
    Mar 13, 2007
  4. Replies:
    0
    Views:
    237
  5. m4dc4p
    Replies:
    1
    Views:
    104
Loading...

Share This Page