Navigation after content?

[Mat30]

I've just seen this article at Tutsplus that promotes putting navigation after content to cater for (or should that be pander to?) mobiles.

As you can imagine, the author has used absolute position to show the menu on larger screens, breaking the source/display order relationship, which doesn't feel right at all. Even if the tab order is altered to start with the menu anchors, it just seems like reducing accessibility for the sake of another group of users.

But I would really like to know what other people think before I write off this idea completely. Is this sort of thing ever OK to do, and is this the kind of thing that we are going to see more of, and need to do, now that everyone wants the web to work well on their phones? I would be quite happy to do this if any drawbacks that it may have are small enough, but I don't know whether the balance is right.

[Stevie D]

A few years ago, we were having exactly the same debate for screen readers and the like. A common theme was that logically it makes more sense to have the content first, but practically most people are so habituated into seeing the navigation first that reversing the model is more likely to confuse them, at least for a moment or two, which is as long as takes them to skip past the navigation when it does come first.

I dislike the examples he gives. The "problem" site, London & Partners, is how I would want a site to be. If I go to a website home page, particularly on my mobile, it's far more likely that I want to navigate to a subpage than to read their corporate guff about how wonderful they are. Having the navigation first allows me to do just that. If I want to read the corporate guff, it is but the work of a moment to scroll past it, which is what I expect to have to do.

The example he creates to show navigation at the end I found confusing and disorientating. I was expecting the menu to pop open from the button on the nav bar, but instead it shot me down to the bottom of the page. That in itself shouldn't be a major problem, but because there's no visual indication of what's happened, it isn't necessarily obvious that you have gone to the bottom of the current page. Particularly as, on my mobile, the final subheading was exactly at the top of the screen, so it looked just like a heading, a short bit of content and a menu, making up a 1-screen page, rather than being just the end of a longer page.

[Mat30]

I was expecting the menu to pop open from the button on the nav bar

Yes, I was expecting to be shown how to do that when I started reading the article. I would like to try using a dropdown for mobiles, if I can make it accessible.

[Stomme poes]

Now, I believe you can do either way.

I think how David Hund did it on his (one-page) site valuedstandards.com is fine. I am planning something similar for my web page.

Ultimately, so long as there is a (keyboardable, not relying on the user having a screen reader or some native appy thing) skip link to the "other" part of the page, it's good.

But, if the menu is short and sweet (just a few options), since traditionally menus came before the content, this is probably still a better idea just out of user experience.

Many sites have long crazy menus though. Especially if their "desktop" versions are dropdown menus. While on a wide screen this makes a long, complicated menu look short and sweet, tab-wise it's a monster. I'd much rather have those after the main content (even on a corporate guff page), though again only so long as there's an easy way to skip to the menu if I need to.

The only thing I think is silly is everyone jumping on some new iBandwagon going "ZOMG RESPONSIVE WEBSITES MUST HAZ MENU ON BOTTOM LAWLZ" without thinking it through, or doing user testing for your particular site (if it's large and corporate and it really matters and you might lose a boatload of money choosing the wrong solution blah blah)... but I think it can improve the user experience in some? many? cases.

I would like to try using a dropdown for mobiles, if I can make it accessible.

Hm, I'd be interested in knowing your solution if you come up with one. Touch Events come to mind, except lots and lots of mobiles don't support it, let alone those who don't even run JS at all, or well...
David's :target trick is cute but he deliberately didn't worry much about older IE's for example...

[Mat30]

Thanks, poes, but I can't promise anything! I saw that good dropdown menu that deathshadow created a while ago and maybe his method might be the right way to go for this. Not sure. I'm naively hoping that what works with :focus can also work with :active, but I don't suppose that it will be that easy. Probably have to go inside a breakpoint anyway, keeping it well out of my base styles. Chris Coyier had what I think, IIRC, was some sort of a faux-select dropdown solution a while back, but that had to be scripted of course.