Critique CSS layout (1st go - fingers crossed)

Discussion in 'HTML' started by lime, Nov 13, 2004.

  1. lime

    lime Guest

    I've been using CSS for a while, however always using tables for the layout.

    This is my first go using a CSS only layout. After many versions (about 7 of
    them) this is the final version that I would like critiqued.

    I have tested on the following Win browsers: IE6, NS6 & Mozilla Firefox 1.0.

    http://www.limelightstudio.com.au/iss/html/

    Thanks,

    Helen
    lime, Nov 13, 2004
    #1
    1. Advertising

  2. In article <>, "lime" <> wrote:

    > This is my first go using a CSS only layout. After many versions (about 7 of
    > them) this is the final version that I would like critiqued.


    But think of what you have learned!

    > I have tested on the following Win browsers: IE6, NS6 & Mozilla Firefox 1.0.


    Works great in that ancient Mac browser IE5.5. And MacMozilla 1.2.1. And
    it looks lovely in MacLynx.

    > http://www.limelightstudio.com.au/iss/html/


    And it even validates.

    leo

    --
    <http://web0.greatbasin.net/~leo/>
    Leonard Blaisdell, Nov 13, 2004
    #2
    1. Advertising

  3. lime

    Alan Cole Guest

    In article <>,
    (Leonard Blaisdell) wrote:

    > In article <>, "lime" <> wrote:
    >
    > > This is my first go using a CSS only layout. After many versions (about 7
    > > of
    > > them) this is the final version that I would like critiqued.

    >
    > But think of what you have learned!
    >
    > > I have tested on the following Win browsers: IE6, NS6 & Mozilla Firefox
    > > 1.0.

    >
    > Works great in that ancient Mac browser IE5.5. And MacMozilla 1.2.1. And
    > it looks lovely in MacLynx.
    >
    > > http://www.limelightstudio.com.au/iss/html/

    >
    > And it even validates.
    >
    > leo


    I would love to critique the site, but I can never get to any of you
    www/limelightstudio.com.au links. Every time I try, my browesr (FF1.0 on
    Mac OSX) tries for a while and then times out.... I've tried to get to
    your sites a few times now over the past few days with no joy.

    Al.

    --
    Alan Cole. E-mail: justal at lineone dot net
    http://www.forces-of-nature.co.uk [Coastal Sports]
    http://www.tsunami-site-design.co.uk [Website Design]
    http://tinyurl.com/64xrd [Plusnet ISP]
    Alan Cole, Nov 13, 2004
    #3
  4. lime

    Toby Inkster Guest

    lime wrote:

    > http://www.limelightstudio.com.au/iss/html/


    Looks pretty good.

    Text for the main body of the page is a bit small though.

    Using a <ul> for the navigation menu would enhance its appeal to non-CSS
    browsers. If you don't like the margin and bullet points that a <ul> often
    carries with it, you can use CSS to remove them.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Nov 13, 2004
    #4
  5. lime

    Neredbojias Guest

    Without quill or qualm, lime quothed:

    > I've been using CSS for a while, however always using tables for the layout.
    >
    > This is my first go using a CSS only layout. After many versions (about 7 of
    > them) this is the final version that I would like critiqued.
    >
    > I have tested on the following Win browsers: IE6, NS6 & Mozilla Firefox 1.0.
    >
    > http://www.limelightstudio.com.au/iss/html/


    I get a horz scrollbar in IE 6 at about 850-900 pixels. Not in Moz,
    though.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Nov 13, 2004
    #5
  6. On Sat, 13 Nov 2004 12:54:14 +1100, "lime" <> wrote:

    >I've been using CSS for a while, however always using tables for the layout.
    >
    >This is my first go using a CSS only layout. After many versions (about 7 of
    >them) this is the final version that I would like critiqued.
    >
    >I have tested on the following Win browsers: IE6, NS6 & Mozilla Firefox 1.0.
    >
    >http://www.limelightstudio.com.au/iss/html/
    >
    >Thanks,
    >
    >Helen

    Looks good but lots of broken links.

    <A message to top posters. Type your reply here>

    --
    Never be afraid to try something new. Remember that a lone amateur
    built the Ark. A large group of professionals built the Titanic.
    Titus A Ducksass - AKA broken-record, Nov 13, 2004
    #6
  7. On Sat, 13 Nov 2004 08:45:09 +0000, Toby Inkster
    <> wrote:

    >lime wrote:
    >
    >> http://www.limelightstudio.com.au/iss/html/

    >
    >Looks pretty good.
    >
    >Text for the main body of the page is a bit small though.
    >
    >Using a <ul> for the navigation menu would enhance its appeal to non-CSS
    >browsers. If you don't like the margin and bullet points that a <ul> often
    >carries with it, you can use CSS to remove them.


    Do you have a working example of the css for this technique Toby....
    I am sure you have.

    <A message to top posters. Type your reply here>

    --
    Never be afraid to try something new. Remember that a lone amateur
    built the Ark. A large group of professionals built the Titanic.
    Titus A Ducksass - AKA broken-record, Nov 13, 2004
    #7
  8. lime

    Henry Guest

    lime wrote:
    > I've been using CSS for a while, however always using tables for the layout.
    >
    > This is my first go using a CSS only layout. After many versions (about 7 of
    > them) this is the final version that I would like critiqued.
    >
    > I have tested on the following Win browsers: IE6, NS6 & Mozilla Firefox 1.0.
    >
    > http://www.limelightstudio.com.au/iss/html/
    >
    > Thanks,
    >
    > Helen



    Great effort!!!

    Which Dreamweaver template did you used!?

    ;)
    Henry, Nov 13, 2004
    #8
  9. lime

    Henry Guest

    Toby Inkster wrote:
    > lime wrote:
    >
    >
    >>http://www.limelightstudio.com.au/iss/html/

    >
    >
    > Looks pretty good.
    >
    > Text for the main body of the page is a bit small though.



    Still bigger than browser' menus.

    Size good enough for billions pages, good enough for this bloke.

    Get better glasses, Toby...

    or...

    adjust your browser settings...

    ;)
    Henry, Nov 13, 2004
    #9
  10. lime

    Jim Higson Guest

    lime wrote:

    > I've been using CSS for a while, however always using tables for the
    > layout.
    >
    > This is my first go using a CSS only layout. After many versions (about 7
    > of them) this is the final version that I would like critiqued.
    >
    > I have tested on the following Win browsers: IE6, NS6 & Mozilla Firefox
    > 1.0.


    FYI, is also fine on Konqueror 3.2
    Jim Higson, Nov 13, 2004
    #10
  11. lime

    Toby Inkster Guest

    Titus A Ducksass - AKA broken-record wrote:
    > Toby Inkster wrote:
    >> lime wrote:
    >>
    >>> http://www.limelightstudio.com.au/iss/html/

    >>
    >> Using a <ul> for the navigation menu would enhance its appeal to
    >> non-CSS browsers. If you don't like the margin and bullet points that a
    >> <ul> often carries with it, you can use CSS to remove them.

    >
    > Do you have a working example of the css for this technique Toby....


    That I do, but my example goes further than just playing with the margin
    and removing bullet points. It adds pretty borders and a roll-over effect.

    http://examples.tobyinkster.co.uk/css-rollovers

    It's pretty thoroughly documented, so a quick read should make it obvious
    which bits of CSS are relevant to the OP's page.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Nov 13, 2004
    #11
  12. lime

    Toby Inkster Guest

    Henry wrote:
    > Toby Inkster wrote:
    >> lime wrote:
    >>
    >>> http://www.limelightstudio.com.au/iss/html/

    >>
    >> Looks pretty good.
    >> Text for the main body of the page is a bit small though.

    >
    > Still bigger than browser' menus.


    Smaller than my browser's menu. Smaller than the main navigation. 85% the
    size of my preferred font size. (My preferred font size is 12pt, which is
    17px on my monitor.)

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Nov 13, 2004
    #12
  13. On Sat, 13 Nov 2004, Henry wrote:

    > Toby Inkster wrote:
    > > lime wrote:
    > >
    > > > http://www.limelightstudio.com.au/iss/html/

    [...]
    > > Text for the main body of the page is a bit small though.


    Indeed it is, exacerbated by low colour contrast.

    > Still bigger than browser' menus.


    What's that supposed to mean? You have no idea what my browser menus
    look like

    [...]
    > adjust your browser settings...


    That's fighting talk. I already -did- adjust my browser settings for
    optimal viewing, i.e 1.0em is my preferred size for normal content,
    given a reasonable foreground/background contrast and font face; and
    I'm sure Toby will say he'd already chosen his preference in that
    regard too.

    > ;)


    I'm sorry, but on this group that isn't even remotely funny. You've
    got a damned cheek (and so has the page author) to tell me that my
    chosen default is too big, and in need of reduction to 85% (if I'm
    reading the stylesheet right) -and- aggravate that by significantly
    lowering the contrast.

    So this is another page that's crying out for me to use my
    developer-toolbar to "disable styles" for improved readability.
    Alan J. Flavell, Nov 13, 2004
    #13
  14. lime

    Lachlan Hunt Guest

    lime wrote:
    > This is my first go using a CSS only layout. After many versions (about 7 of
    > them) this is the final version that I would like critiqued.
    >
    > http://www.limelightstudio.com.au/iss/html/


    It's fairly well done from a visual perspective, especially since it's
    your first go at a pure CSS layout.

    * The light blue backgroud with the grey text does make it harder to
    read. Try lightening the background and/or darkening the text colour.
    * The Privacy Statement link needs to be a different color than the
    "Last Updated ..." text. I hovered over Last Spdated, sice the colour
    made it look like a link, then, since it wasn't, I didn't realise
    Privacy Statement was until much later.
    * Try adding more visual feedback when hovering over the navigation
    list. eg. By changing the colour and/or background.


    The headings also should not be written in all uppercase within the
    markup. I've heard it causes some screen readers to speak all the
    letters, rather than read them as words. Use Title Case Like This, and
    then style them using text-transform: uppercase; I would also change
    the footer to this, just to keep the links together:

    _Privacy Statement_ | _Website Design by Limelight Design Studios_
    Last updated: 13th November 2004

    Make both of those links the same colour, but different from the Last
    Updated line.

    There are also some markup issues:

    * Headings. There's no <h1> - <h6> elements in the entire document.
    - Put the ISS logo within an <h1>
    - Page title, "Welcome", in <h2>
    - Then <h3> for the last two that you have in all uppercase.
    * Navigation list: Use <ul> and <li> for each item.
    * Remove most, if not all <br> elements, and replace them with more
    semantic options. (Most will be replaced with correct <li> and <hn>
    elements)
    * There seems to be an excessive number of <div>s, and the main content
    is incorrectly within <div id="pageTitle">, which should really be an
    <h2> anyway.

    --
    Lachlan Hunt
    http://lachy.id.au/
    http://GetFirefox.com/ Rediscover the Web
    http://SpreadFirefox.com/ Igniting the Web
    Lachlan Hunt, Nov 13, 2004
    #14
  15. lime

    kchayka Guest

    lime wrote:
    >
    > This is my first go using a CSS only layout.
    >
    > http://www.limelightstudio.com.au/iss/html/


    f-up set to alt.html.critique.

    Too-small font-size for body text combined with reduced contrast between
    text and background colors makes it quite hard to read.

    You've got mostly div soup here. Failure to use semantic markup can
    create unnecessary accessibility barriers. Use "div" only when there
    isn't a more appropriate element.

    Your headings are a good example of what _not_ to do. You have no
    heading markup at all in these pages. Instead, it's stuff like
    <div id="pageTitle">Title
    <p><strong>SUBHEADING</strong><br>

    Proper heading markup provides navigation aids to several browsers,
    among which are Opera and most screen readers. Typing all caps for the
    subheading creates another problem - some screen readers may interpret
    all caps as abbreviations or acronyms, and read each letter individually.

    Use proper heading levels. The banner should be <h1>, pageTitle should
    be <h2>, SUBHEADING should be <h3>. Use CSS to style margins, colors,
    etc. If you must have all caps, do that with CSS, too, with
    text-transform:uppercase.

    Your navigation menu should also be list markup. See
    <URL:http://www.alistapart.com/articles/taminglists/>

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
    kchayka, Nov 13, 2004
    #15
  16. lime

    kchayka Guest

    Leonard Blaisdell wrote:
    >
    > Works great in that ancient Mac browser IE5.5.


    AFAIK, there is no IE 5.5 for Mac. Is that a typo?

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
    kchayka, Nov 13, 2004
    #16
  17. lime

    Kris Guest

    In article <>, kchayka <>
    wrote:

    > > Works great in that ancient Mac browser IE5.5.

    >
    > AFAIK, there is no IE 5.5 for Mac. Is that a typo?


    IE/Mac goes no higher than version 5.2.3. To put things in perspective,
    IE6(SP1) is older than IE/Mac 5.2.3.

    --
    Kris
    <> (nl)
    Kris, Nov 13, 2004
    #17
  18. lime

    kchayka Guest

    Kris wrote:
    >
    > To put things in perspective, IE6(SP1) is older than IE/Mac 5.2.3.


    How about another perspective? Mac IE 5 hasn't had any real
    embellishments where its CSS capabilities are concerned. It's still
    stuck on good support of CSS1 and dodgy support of CSS2. Overflow is
    quite broken. Handling inline lists is dreadful. I could go on, but I won't.

    It may well have been ahead of its time when it was first released, but
    it has most certainly fallen rather far behind the pack. Its bugs and
    deficiencies have given me, personally, more trouble than IE6 has.

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
    kchayka, Nov 13, 2004
    #18
  19. lime

    Brian Guest

    Kris wrote:
    > kchayka wrote:
    >
    >>> Works great in that ancient Mac browser IE5.5.

    >>
    >> AFAIK, there is no IE 5.5 for Mac. Is that a typo?

    >
    > IE/Mac goes no higher than version 5.2.3. To put things in
    > perspective, IE6(SP1) is older than IE/Mac 5.2.3.


    True enough, but AIUI, IE/Mac 5.2.3 contains fairly minor changes from
    IE 5.2 and, in turn, 5.1, also for the Mac. Whereas IE Win 6.0 contains
    fairly substantial changes from 5.5 Win. Mind, I'm not arguing that 6.0
    is a better browser. In some ways, Mac 5.x is a better browser, most
    notably in support of important standards. No, not CSS! I'm talking
    about trivial things like interworking protocols defining content type
    and such. You know, thoese pesky security concerns. ;-)

    Still, IE 5.x Mac is a fairly old browser.

    --
    Brian (remove "invalid" to email me)
    Brian, Nov 13, 2004
    #19
  20. lime

    Brian Guest

    Lachlan Hunt wrote:

    > * Headings. There's no <h1> - <h6> elements in the entire document.


    > - Put the ISS logo within an <h1>


    That sounds good, but only for the home page.

    > - Page title, "Welcome", in <h2>


    Not so sure about that. "Welcome" is not much of a heading, is it? It
    doesn't separate parts of the document. The whole page is a welcome
    page. Either make it part of <h1>, or put it in a <div>.

    > - Then <h3> for the last two that you have in all uppercase.


    I'd make those <h2>.

    --
    Brian (remove "invalid" to email me)
    Brian, Nov 13, 2004
    #20
    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. Eric
    Replies:
    4
    Views:
    708
    clintonG
    Dec 24, 2004
  2. lime
    Replies:
    14
    Views:
    653
    Stephen Poley
    Nov 17, 2004
  3. Replies:
    1
    Views:
    571
    John Timney \(MVP\)
    Jun 19, 2006
  4. Nik Coughlin
    Replies:
    21
    Views:
    856
    Andy Dingley
    Nov 9, 2007
  5. Nik Coughlin
    Replies:
    0
    Views:
    351
    Nik Coughlin
    Nov 8, 2007
Loading...

Share This Page