SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Layout divs order

    This schema is typical:
    <body>
    <div id="header">
    <div id="horizontal_menu"></div>
    <div id="content"></div>
    <div id="footer"></div>
    </body>

    and you use "skip to content" link to skip the navigation section.
    So in fact you HAVE TO click on this link after visiting pages.

    How about this:
    <body>
    <div id="header">
    <div id="content"></div>
    <div id="horizontal_menu"></div>
    <div id="footer"></div>
    </body>

    in this case user get content first and if it`s not what was expected to see the link "skip to navigation" may be used to skip the content.

    Shouldn`t this approach be the correct one from the usability point of view?

    Thanks for opinion.

    I also have a problem with footer to be below the content because of position: absolute used on #content. To solve this you have to move #footer into #content (or similar). But than you get menu below the footer which is not good.

    What you think about that?

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I do it this way (content before navigation), since I think the content is more important and should come first. I always navigate by keyboard, but since I use Opera's spatial navigation I'm not really dependent on the source order. For those who use inferior browsers that only allow linear tabbing, however, source order is important.

    From what I've seen of usability studies, there's approximately a 50/50 split in user preferences. That means you can choose one or the other, but you'll need a skip link in either case.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for feedback.

    If I`d like to get content first, how should I code the footer than?
    Could you please give me some advices on that?

    i thing footer should be the very last section and not like:

    Code HTML4Strict:
    <body>
    <div id="header">
    <div id="wrapper">
        <div id="content"></div>
        <div id="footer"></div>
    </div>
    <div id="horizontal_menu"></div>
    </body>

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The footer usually takes care of itself, in my experience. If you have floated content columns, you may need a clear:left on the footer (if it's a full-width footer).

    A typical structure for me would be something like this,
    Code HTML4Strict:
    <body>
      <div id="header"/>
      <div id="wrapper">
        <div id="content"/>
        <div id="sidebar"/>
        <ul id="secondary-nav"/>
        <ul id="primary-nav"/>
      </div>
      <div id="footer"/>
    </body>
    Here, secondary-nav is probably a vertical navigation menu in the left-hand column, while primary-nav might be a horizontal tabbed navigation menu below the header.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, it was more about position:absolute, but I solved it using margin-top on content instead.
    You say something about usability studies and user preferences.
    Could you please paste any links or is it your personal experience?

    Thanks again.

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't have any specific links. I've seen a number of these over the last few years, but none of them have been conclusive.
    Birnam wood is come to Dunsinane


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •