Living and working on the web, with a British point of view

RSS feed
  • One navigation list to rule them all?

    (0)
    Posted on November 24th, 2009David Meadweb

    I’ve been using unordered lists for navigation for some time now, and I remember my excitement when the I first read about the suckerfish method. But one thing that keeps popping into my head recently is using one list for the main and secondary navigation on a page. I can’t recall if I’ve ever seen anyone talk about this or try it for that matter.

    The lists

    Say we have a site with four main sections and within each section is four pages.  Normally I would code up the following:

    <ul id="navMain">
    <li><a href="#" title="">section 1</a></li>
    <li><a href="#" title="">section 2</a></li>
    <li><a href="#" title="">section 3</a></li>
    <li><a href="#" title="">section 4</a></li>
    </ul>

    Somewhere further down the page, within a section, I’d have:

    <ul id="navSection">
    <li><a href="#" title="">page 2a</a></li>
    <li><a href="#" title="">page 2b</a></li>
    <li><a href="#" title="">page 2c</a></li>
    <li><a href="#" title="">page 2d</a></li>
    </ul>

    Another approach

    Which normally would be displayed like image 1. Now what was tickling my mind was writing the code out like this:

    <ul id="navMain">
    <li><a href="#" title="">section 1</a></li>
    <li><a href="#" title="">section 2</a>
    <ul id="navSection">
    <li><a href="#" title="">page 2a</a></li>
    <li><a href="#" title="">page 2b</a></li>
    <li><a href="#" title="">page 2c</a></li>
    <li><a href="#" title="">page 2d</a></li>
    </ul>

    </li>
    <li><a href="#" title="">section 3</a></li>
    <li><a href="#" title="">section 4</a></li>
    </ul>

    Usual position for secondary navigation

    Usual position for secondary navigation

    Where the correct sections navigation is inserted as the page is called. It could then be positioned absolutely on the page using CSS.  If you’re using skip links for screen readers, then “skip navigation” would only have to skip the one list, and if read out, then it’ll be read in context.

    I know I’m not taking into consideration:

    • drop down navigation (not a big fan now)
    • footer navigation
    • problems with certain layout designs and absolute positioning

    but I think these could be overcome fairly easily.

    I’m not suggesting that this is a be-all-end-all thing to use, more that I haven’t seen it implemented like this and wondered if anyone had any thoughts on the subject. I would love to hear any feedback.

    Technorati tags: , , , ,

    Blogged with the Flock Browser
    , , , ,
  • How do you solve a problem like IE6?

    (2)
    Posted on July 13th, 2009David Meadweb

    A recent article on Ajaxian.com looked at Digg’s survey about IE6 use.  I think it really just validates what we already know, which is…

    • Most IE6 users are at work and cannot upgrade
    • Some user just don’t care to upgrade

    So how should you address this?  The one solution that I personally feel most comfortable with is Andy Clarke’s Universal IE6 stylesheet.  This lets the visitor access all the content as well as releasing the designer/developer from a spiraling descent into madness, trying to make pages look the same. I’ve recently added it to my freelance site.

    One IE6 solution I cannot get behind is proposed at http://ie6update.com/.  This displays a bar designed to mimic IE’s own information bar.  When the user clicks on it they get directed to the IE download page.  This is so open to misuse and, even with the best intentions, still smacks of trickery.

    As to that old chestnut of ’supporting IE6′, well I’m not Microsoft, so I don’t have to “support” anything they make. Same goes for supporting Apple, Mozilla, or Opera products.  What I do have to do however, is make sure that any visitor, using any method, can access information and perform transactions on a site I’ve built.

    Should it look graphically the same for a seven year old browser as it does for the latest & greatest? No. Should it prevent the seven year old browser from entrance? Certainly not.

    So here’s to IE6 slowly going away but, in the meantime, lets not make the visitors who have no choice in using it feel alienated.

    Technorati tags: , , , , ,

    Blogged with the Flock Browser
    , , , , ,
  • Reply to latest “tables for layout”…

    (0)
    Posted on February 5th, 2009David Meadgeneral, web

    I’ve posted a reply to the latest “use tables for layout” distraction over at Refresh Cleveland.  Feel free to drop me your thoughts there.

    Technorati tags: tables, css, layout, comment, reply, refreshcleveland

    Blogged with the Flock Browser
    , , , , ,