Feedback appreciated for a new design I am working on.

Discussion in 'HTML' started by Chaddy2222, Jun 5, 2006.

  1. Chaddy2222

    Chaddy2222 Guest

    Hi all.
    I am currently re-designing my site to use a CSS based layout. I was
    just wandering if anyone could give me some feedback on how it looks,
    suggestions on how it could be improved that sort of thing.
    The test page is at: http://freewebdesign.cjb.cc/test
    Only the index page is up at this stage, I will add content and build
    the site from the index page once it's working well.


    --
    Regards Chad. http://freewebdesign.cjb.cc
     
    Chaddy2222, Jun 5, 2006
    #1
    1. Advertising

  2. Chaddy2222 wrote:
    > I am currently re-designing my site to use a CSS based layout. I was
    > just wandering if anyone could give me some feedback on how it looks,
    > suggestions on how it could be improved that sort of thing.
    > The test page is at: http://freewebdesign.cjb.cc/test
    > Only the index page is up at this stage, I will add content and build
    > the site from the index page once it's working well.


    impressive...
     
    Travis Newbury, Jun 5, 2006
    #2
    1. Advertising

  3. Chaddy2222

    Chaddy2222 Guest

    Travis Newbury wrote:
    > Chaddy2222 wrote:
    > > I am currently re-designing my site to use a CSS based layout. I was
    > > just wandering if anyone could give me some feedback on how it looks,
    > > suggestions on how it could be improved that sort of thing.
    > > The test page is at: http://freewebdesign.cjb.cc/test
    > > Only the index page is up at this stage, I will add content and build
    > > the site from the index page once it's working well.

    >
    > impressive...

    Thanks...
    --
    Regards Chad. http://freewebdesign.cjb.cc
     
    Chaddy2222, Jun 5, 2006
    #3
  4. Chaddy2222

    Rik Guest

    Chaddy2222 wrote:
    > Hi all.
    > I am currently re-designing my site to use a CSS based layout. I was
    > just wandering if anyone could give me some feedback on how it looks,
    > suggestions on how it could be improved that sort of thing.
    > The test page is at: http://freewebdesign.cjb.cc/test
    > Only the index page is up at this stage, I will add content and build
    > the site from the index page once it's working well.


    <meta http-equiv="Content-Type" content="application/xhtml+xml;
    charset=ISO-8859-1" />

    Hmmmmz, not sure wether the choice "application/xhtml+xml" was appropriate,
    but I've forgotten the exact rules :).

    <div id="header"><h1>Free Web Design Online!</h1></div>

    Why wrap it in a div? What layout are you giving it, that you cannot apply
    to the h1 directly? Div's are nice, but terribly overused. If there's a
    better tag, use it, maybe using a couple of different classes.

    Navigation: it's actually a list, you might consider making it one,
    allthough removing the standard browser presentation is a pain. You seems to
    have started out like that, considering the seemingly useless:
    list-style-type's in the "a" markup.

    From a graphical point of view:

    H1: try some padding on the left, I think that will look a lot better, but
    that's personal taste.

    The "navigation" at the top is not enough "seperated", in Opera 8.52 I can
    hardly make out that it's not just one link. Also: try to be consistent in
    the use of capital letters. Now it's mostly random.

    Text color is OK to my young eyes, but I'd imagine that for some people i
    could use a bit more contrast.

    I'd suggest using this in the body:
    <body>
    <h1> Free Web Design Online!</h1>
    <ul>
    <li><a href="#" title="Home" class="on">Home</a></li>
    <li><a href="index.html">About Us&nbsp;</a></li>
    <li><a href="index.html">Web Design&nbsp;</a></li>
    <li><a href="index.html">Contact us </a></li>
    </ul>
    <h2>Welcome To Free Web Design Online!</h2>
    <p>This page is a template for the new look version of the site.<br />The
    page has been created useing XHTML and CSS for better markup and
    useability... We hope you like it.......</p>
    <ul>
    <li><a href="index.html">Contact us</a></li>
    <li><a href="index.html">About us </a></li>
    <li><a href="index.html">Example Sites&nbsp;</a></li>
    </ul>
    Copyright &copy; 2006 Free Web Design Online! All Rights Reserved.
    </body>

    And adjust your css accordingly.
    About using lists: http://css.maxdesign.com.au/listamatic/ contains a lot of
    examples of how to whip them into the shape you want.

    I applaud the use of relative sizes for text instead of px (or even worse,
    pt..).

    Grtz,
    --
    Rik Wasmus
     
    Rik, Jun 5, 2006
    #4
  5. On Mon, 5 Jun 2006, Rik wrote:

    > <meta http-equiv="Content-Type" content="application/xhtml+xml;
    > charset=ISO-8859-1" />


    Complete nonsense, I'm afraid.

    > Hmmmmz, not sure wether the choice "application/xhtml+xml" was
    > appropriate, but I've forgotten the exact rules :).


    There's no extra charge for checking the specifications before
    making oneself look silly, you know. (Been there, done that...)
     
    Alan J. Flavell, Jun 5, 2006
    #5
  6. Chaddy2222

    Neredbojias Guest

    To further the education of mankind, "Chaddy2222" <rockradio2000
    @yahoo.com.au> vouchsafed:

    > Hi all.
    > I am currently re-designing my site to use a CSS based layout. I was
    > just wandering if anyone could give me some feedback on how it looks,
    > suggestions on how it could be improved that sort of thing.
    > The test page is at: http://freewebdesign.cjb.cc/test
    > Only the index page is up at this stage, I will add content and build
    > the site from the index page once it's working well.


    It looks okay if a little, uh, sparse.

    Were I you, I'd forget the xhtml and use html strict, though. Despite
    certain prognostications, xhtml is not going to replace html any time soon,
    if ever.

    I agree with the previous feedback about separating the links more, too.

    --
    Neredbojias
    Infinity has its limits.
     
    Neredbojias, Jun 5, 2006
    #6
  7. Chaddy2222

    Chaddy2222 Guest

    Rik wrote:
    > Chaddy2222 wrote:
    > > Hi all.
    > > I am currently re-designing my site to use a CSS based layout. I was
    > > just wandering if anyone could give me some feedback on how it looks,
    > > suggestions on how it could be improved that sort of thing.
    > > The test page is at: http://freewebdesign.cjb.cc/test
    > > Only the index page is up at this stage, I will add content and build
    > > the site from the index page once it's working well.

    >
    > <meta http-equiv="Content-Type" content="application/xhtml+xml;
    > charset=ISO-8859-1" />
    >
    > Hmmmmz, not sure wether the choice "application/xhtml+xml" was appropriate,
    > but I've forgotten the exact rules :).

    Well, it can be done, but a lot of people say that HTML4.01 strict
    works just as well.
    It's actually served as HTML but it has the XHTML info their. If IE had
    better support for XHTML then the pages could be served up as XHTML
    instead of HTML, but XHTML is not well supported yet.

    >
    > <div id="header"><h1>Free Web Design Online!</h1></div>
    >
    > Why wrap it in a div? What layout are you giving it, that you cannot apply
    > to the h1 directly? Div's are nice, but terribly overused. If there's a
    > better tag, use it, maybe using a couple of different classes.
    >
    > Navigation: it's actually a list, you might consider making it one,
    > allthough removing the standard browser presentation is a pain. You seems to
    > have started out like that, considering the seemingly useless:
    > list-style-type's in the "a" markup.

    Yeah, I removed the list from the navigation as I could not get the
    page to validate with the list, now i've got it validating I will add
    it back in.

    >
    > From a graphical point of view:
    >
    > H1: try some padding on the left, I think that will look a lot better, but
    > that's personal taste.

    I'll have a look in to that, thanks.

    >
    > The "navigation" at the top is not enough "seperated", in Opera 8.52 I can
    > hardly make out that it's not just one link. Also: try to be consistent in
    > the use of capital letters. Now it's mostly random.
    >
    > Text color is OK to my young eyes, but I'd imagine that for some people i
    > could use a bit more contrast.
    >
    > I'd suggest using this in the body:
    > <body>
    > <h1> Free Web Design Online!</h1>
    > <ul>
    > <li><a href="#" title="Home" class="on">Home</a></li>
    > <li><a href="index.html">About Us&nbsp;</a></li>
    > <li><a href="index.html">Web Design&nbsp;</a></li>
    > <li><a href="index.html">Contact us </a></li>
    > </ul>
    > <h2>Welcome To Free Web Design Online!</h2>

    <snip>
    Thanks for the list suggestion.

    > And adjust your css accordingly.
    > About using lists: http://css.maxdesign.com.au/listamatic/ contains a lot of
    > examples of how to whip them into the shape you want.
    >
    > I applaud the use of relative sizes for text instead of px (or even worse,
    > pt..).
    >

    Thanks. My current site at http://freewebdesign.cjb.cc can also be used
    with user specific font sizes, however I was having trouble controling
    issues such as keeping the font sizeing constant across all pages with
    the old layout.
    --
    Regards Chad. http://freewebdesign.cjb.cc
     
    Chaddy2222, Jun 5, 2006
    #7
  8. Chaddy2222

    Rik Guest

    Alan J. Flavell wrote:
    > On Mon, 5 Jun 2006, Rik wrote:
    >
    >> <meta http-equiv="Content-Type" content="application/xhtml+xml;
    >> charset=ISO-8859-1" />

    >
    > Complete nonsense, I'm afraid.
    >
    >> Hmmmmz, not sure wether the choice "application/xhtml+xml" was
    >> appropriate, but I've forgotten the exact rules :).

    >
    > There's no extra charge for checking the specifications before
    > making oneself look silly, you know. (Been there, done that...)


    I was trying to post a few usefull comments in a minimal amount of time, but
    OK, here it is.
    http://www.w3.org/TR/xhtml-media-types/xhtml-media-types.xhtml#media-types

    While the content type IS application/xhtml+xml, you COULD use text/html,
    for a good reason:

    text/html:
    Appendix C "HTML Compatibility Guidelines" summarizes "design guidelines for
    authors who wish their XHTML documents to render on existing HTML user
    agents". The use of 'text/html' for XHTML SHOULD be limited for the purpose
    of rendering on existing HTML user agents, and SHOULD be limited to [XHTML1]
    documents which follow the HTML Compatibility Guidelines. In particular,
    'text/html' is NOT suitable for XHTML Family document types that adds
    elements and attributes from foreign namespaces, such as XHTML+MathML
    [XHTML+MathML].

    That was the nagging in the back of my head. And now I will further prove to
    you I'm lazy: I will NOT investigate which browsers are XHTML compliant, and
    which aren't.

    Grtz,
    --
    Rik Wasmus
     
    Rik, Jun 5, 2006
    #8
  9. Chaddy2222

    Steve Pugh Guest

    Chaddy2222 wrote:
    > Rik wrote:
    > >
    > > <meta http-equiv="Content-Type" content="application/xhtml+xml;
    > > charset=ISO-8859-1" />
    > >
    > > Hmmmmz, not sure wether the choice "application/xhtml+xml" was
    > > appropriate, but I've forgotten the exact rules :).
    > >

    > Well, it can be done, but a lot of people say that HTML4.01 strict
    > works just as well.
    > It's actually served as HTML but it has the XHTML info their. If IE had
    > better support for XHTML then the pages could be served up as XHTML
    > instead of HTML, but XHTML is not well supported yet.


    The real issue here is that your server is sending out content-type:
    text/html so saying application/xhtml+xml is useless as the real http
    header trumps the meta tag fake.

    If you did send application/xhtml+xml in the real HTTP header then by
    default IE wouldn't be able to render the page at all.

    You've gone to the effort of putting some code into your pages that
    conflicts with what your server says about the page, and which if it
    was honoured would make the page unusable by a large segment of users.

    So why did you bother?

    Steve
     
    Steve Pugh, Jun 5, 2006
    #9
  10. On Mon, 5 Jun 2006, Rik wrote:

    > Alan J. Flavell wrote:
    > > On Mon, 5 Jun 2006, Rik wrote:
    > >
    > >> <meta http-equiv="Content-Type" content="application/xhtml+xml;
    > >> charset=ISO-8859-1" />

    > >
    > > Complete nonsense, I'm afraid.


    [...]

    > I was trying to post a few usefull comments in a minimal amount of
    > time, but OK, here it is.
    > http://www.w3.org/TR/xhtml-media-types/xhtml-media-types.xhtml#media-types


    I'm afraid you're missing the point.

    > While the content type IS application/xhtml+xml, you COULD use
    > text/html, for a good reason:


    If you have provided a content-type of text/html from the server, then
    a <meta http-equiv...> is far too late to be trying to change your
    mind and say that it's really application/xhtml+xml

    On the other hand, if you have provided a content-type of
    application/xhtml+xml, then the rules for specifying the character
    encoding will already have done their work and fixed the character
    encoding, long before it gets to the point of seeing that bogus <meta
    http-equiv...> that's possibly trying to make it be something else.

    > text/html:
    > Appendix C "HTML Compatibility Guidelines"


    ....for XHTML/1.0 only...

    > summarizes "design guidelines for authors who wish their XHTML
    > documents to render on existing HTML user agents".


    We've done this part so often before, I'm not going to repeat the
    arguments all over again; but they really aren't part of what it takes
    to understand that:

    > >> <meta http-equiv="Content-Type" content="application/xhtml+xml;
    > >> charset=ISO-8859-1" />


    is nonsense.

    > That was the nagging in the back of my head. And now I will further
    > prove to you I'm lazy: I will NOT investigate which browsers are
    > XHTML compliant, and which aren't.


    That wasn't any part of the specific problem, either.

    *Even* if you could find a client implementation which accepted
    text/html from the server, and changed its mind about content-type and
    character encoding when it saw this ominous <meta http-equiv...> , it
    would still be complete nonsense in terms of the WWW specifications.
     
    Alan J. Flavell, Jun 5, 2006
    #10
  11. Chaddy2222 wrote:
    > Hi all.
    > I am currently re-designing my site to use a CSS based layout. I was
    > just wandering if anyone could give me some feedback on how it looks,
    > suggestions on how it could be improved that sort of thing.
    > The test page is at: http://freewebdesign.cjb.cc/test
    > Only the index page is up at this stage, I will add content and build
    > the site from the index page once it's working well.
    >


    Visually, I would add some left and right padding to your main DIVs so
    that the text has some 'breathing room' from the sides of the viewport.

    Similar request for navigational list. You need more separation between
    the items so they are more visually discrete. Either more space between
    or some kind of separator treatment.

    I know you are visually impaired. I like the color scheme better in your
    new design. However, the grey hover on your links does not have enough
    contrast with the link text. Is your impairment with color identity or
    basic vision, if the former you may wish to have someone help you pick a
    hue that contrasts better. Since your links are blue I would choose a
    compliment in the yellow range.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jun 5, 2006
    #11
  12. Chaddy2222

    Rik Guest

    Alan J. Flavell wrote:
    > I'm afraid you're missing the point.


    You're right, I was, been working with PHP & sending headers to much lately,
    those DO make a difference.

    > If you have provided a content-type of text/html from the server, then
    > a <meta http-equiv...> is far too late to be trying to change your
    > mind and say that it's really application/xhtml+xml


    I understand that now, my apologies.

    Grtz,
    --
    Rik Wasmus
     
    Rik, Jun 5, 2006
    #12
  13. Chaddy2222

    Chaddy2222 Guest

    Jonathan N. Little wrote:
    > Chaddy2222 wrote:
    > > Hi all.
    > > I am currently re-designing my site to use a CSS based layout. I was
    > > just wandering if anyone could give me some feedback on how it looks,
    > > suggestions on how it could be improved that sort of thing.
    > > The test page is at: http://freewebdesign.cjb.cc/test
    > > Only the index page is up at this stage, I will add content and build
    > > the site from the index page once it's working well.
    > >

    >
    > Visually, I would add some left and right padding to your main DIVs so
    > that the text has some 'breathing room' from the sides of the viewport.
    >
    > Similar request for navigational list. You need more separation between
    > the items so they are more visually discrete. Either more space between
    > or some kind of separator treatment.

    Ok. I have made a few change: http://freewebdesign.cjb.cc/test

    >
    > I know you are visually impaired. I like the color scheme better in your
    > new design. However, the grey hover on your links does not have enough
    > contrast with the link text. Is your impairment with color identity or
    > basic vision, if the former you may wish to have someone help you pick a
    > hue that contrasts better. Since your links are blue I would choose a
    > compliment in the yellow range.

    Done.
    Thanks.
    --
    Regards Chad. http://freewebdesign.cjb.cc
     
    Chaddy2222, Jun 5, 2006
    #13
  14. Chaddy2222 wrote:
    > Jonathan N. Little wrote:
    >> Chaddy2222 wrote:
    >>> Hi all.
    >>> I am currently re-designing my site to use a CSS based layout. I was
    >>> just wandering if anyone could give me some feedback on how it looks,
    >>> suggestions on how it could be improved that sort of thing.
    >>> The test page is at: http://freewebdesign.cjb.cc/test
    >>> Only the index page is up at this stage, I will add content and build
    >>> the site from the index page once it's working well.
    >>>

    >> Visually, I would add some left and right padding to your main DIVs so
    >> that the text has some 'breathing room' from the sides of the viewport.
    >>
    >> Similar request for navigational list. You need more separation between
    >> the items so they are more visually discrete. Either more space between
    >> or some kind of separator treatment.


    > Ok. I have made a few change: http://freewebdesign.cjb.cc/test
    >


    Okay better, but two things. If you need to adjust spacing in elements,
    do not employ &nbsp; technique but adjust margins and/or padding. Then
    you can fine tune with CSS rather then editing your markup. Secondly, I
    have issue with your use of DL for your links. They are a simple list of
    links, not a definition list. Use UL not DL. Example and I have cleaned
    up your CSS a little:

    CSS:

    /* Adjusted margins and padding to improve clickable area on links */
    ..links { margin: .5em; }
    ..links UL { list-style: none; }
    ..links LI { display: inline; padding: 0 .5em; }
    ..links LI A { text-decoration: none; padding: 0 .25em; }

    ..links LI A:link,
    ..links LI A:visited {
    color: rgb(51, 102, 153);
    background-color: rgb(255, 255, 204);
    border-bottom: 1px dashed rgb(51, 102, 153);
    }

    ..links LI A:hover,
    ..links LI A:active {
    color: rgb(73, 81, 92);
    background-color: rgb(255, 255, 102);
    border-bottom-style: solid;
    /*
    since your have a dashed border on the links
    rather than turn text-decoration on and off
    on your links I just change the border style
    */
    }

    HTML:

    <div class="links">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Web Design</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>
    </div>

    I also defined as a class you you can use in other areas on the page,
    like your lower links...



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jun 5, 2006
    #14
  15. Chaddy2222

    BusyGuy Guest

    In article <>,
    Chaddy2222 <> wrote:

    > Hi all.
    > I am currently re-designing my site to use a CSS based layout. I was
    > just wandering if anyone could give me some feedback on how it looks,
    > suggestions on how it could be improved that sort of thing.
    > The test page is at: http://freewebdesign.cjb.cc/test
    > Only the index page is up at this stage, I will add content and build
    > the site from the index page once it's working well.


    Chaddy, are you looking for a critique on thevisual design or on the
    code? I think youy are asking the former but Rik gave you such a useful
    set of comments on the code, i feel outclassed if that was what you
    were looking for.

    (Rik, your generous reply to Chaddy demonstrates the best about usenet.
    I bump into so many assholes in some other other groups I hang out in,
    it's a pleasure to be here.)

    Chaddy, I was lucky enough to marry a woman who was a damned good
    screen designer. And her friend was an excellent coding queen. Now I've
    lost that connection, I'm struggling to develop those skills to 10% of
    the quality they had.

    Also, I'm a photographer by profession so I do have somewhat of an eye
    for design.

    Your page has a nice, clean appearance. If you want to keep it simple,
    my only suggestion would be to replace to navogation buttons. Somehow,
    they clash with the rest of the design.

    I would centre the whole.

    I would eliminate the exclamation marks.

    The green and yellow work well at the top. The pale biscuit/buff
    background works not quite so well. Maybe stay with the ame yellow or
    more to a pale blue. (Or, for that matter, a tint of the green.)

    Would it be possible to come up with a different font for the yellow
    heading? I'm not a fan of using many fonts but it could be that a
    different one on this occasion would be helpful. Or maybe a logo would
    achieve what I'm thinking.

    Anyway, good luck with the site. Are you serious about free web design?

    --
    "I like your Christ. I do not like your Christians. They are so unlike
    your Christ." ‹ Ghandi
     
    BusyGuy, Jun 5, 2006
    #15
  16. Chaddy2222

    Chaddy2222 Guest

    Jonathan N. Little wrote:
    > Chaddy2222 wrote:
    > > Jonathan N. Little wrote:
    > >> Chaddy2222 wrote:
    > >>> Hi all.
    > >>> I am currently re-designing my site to use a CSS based layout. I was
    > >>> just wandering if anyone could give me some feedback on how it looks,
    > >>> suggestions on how it could be improved that sort of thing.
    > >>> The test page is at: http://freewebdesign.cjb.cc/test
    > >>> Only the index page is up at this stage, I will add content and build
    > >>> the site from the index page once it's working well.
    > >>>
    > >> Visually, I would add some left and right padding to your main DIVs so
    > >> that the text has some 'breathing room' from the sides of the viewport.
    > >>
    > >> Similar request for navigational list. You need more separation between
    > >> the items so they are more visually discrete. Either more space between
    > >> or some kind of separator treatment.

    >
    > > Ok. I have made a few change: http://freewebdesign.cjb.cc/test
    > >

    >
    > Okay better, but two things. If you need to adjust spacing in elements,
    > do not employ &nbsp; technique but adjust margins and/or padding. Then
    > you can fine tune with CSS rather then editing your markup. Secondly, I
    > have issue with your use of DL for your links. They are a simple list of
    > links, not a definition list. Use UL not DL. Example and I have cleaned
    > up your CSS a little:

    Thanks for the suggestions.
    I made a few changes to the current stylesheet. Is it better now?
    http://freewebdesign.cjb.cc/test

    >
    > CSS:
    >
    > /* Adjusted margins and padding to improve clickable area on links */


    > .links { margin: .5em; }
    > .links UL { list-style: none; }
    > .links LI { display: inline; padding: 0 .5em; }
    > .links LI A { text-decoration: none; padding: 0 .25em; }
    >
    > .links LI A:link,
    > .links LI A:visited {
    > color: rgb(51, 102, 153);
    > background-color: rgb(255, 255, 204);
    > border-bottom: 1px dashed rgb(51, 102, 153);
    > }
    >
    > .links LI A:hover,
    > .links LI A:active {
    > color: rgb(73, 81, 92);
    > background-color: rgb(255, 255, 102);
    > border-bottom-style: solid;
    > /*
    > since your have a dashed border on the links
    > rather than turn text-decoration on and off
    > on your links I just change the border style
    > */
    > }
    >
    > HTML:
    >
    > <div class="links">
    > <ul>
    > <li><a href="#">Home</a></li>
    > <li><a href="#">About Us</a></li>
    > <li><a href="#">Web Design</a></li>
    > <li><a href="#">Contact Us</a></li>
    > </ul>
    > </div>
    >
    > I also defined as a class you you can use in other areas on the page,
    > like your lower links..

    Thx.
    --
    Regards Chad. http://freewebdesign.cjb.cc
     
    Chaddy2222, Jun 6, 2006
    #16
    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. Wee Bubba
    Replies:
    0
    Views:
    1,020
    Wee Bubba
    Sep 28, 2004
  2. windandwaves

    feedback greatly appreciated

    windandwaves, Oct 6, 2005, in forum: HTML
    Replies:
    12
    Views:
    700
  3. uppe
    Replies:
    5
    Views:
    487
    Dann Corbit
    Jun 9, 2006
  4. Daniel Pitts
    Replies:
    15
    Views:
    492
  5. Ron Longo
    Replies:
    0
    Views:
    310
    Ron Longo
    Dec 4, 2008
Loading...

Share This Page