Improving the W3C Recommendation for Mobile Web Navigation

Navigation for mobile web is a tricky subject; it has to conform both to web and native app conventions while being as useful and unobtrusive as possible. Both the W3C and Luke Wroblewski (in his book Mobile First) propose to position the navigation below the content at the bottom of the page with a link at the top of the page. Using a link this way has one big problem though; it messes up the history stack. When clicking the back button in a browser the expected result is to go to the previous page, not the menu button at the top of the page. Starting to mess with the stack can be done but then the beauty of a simple solution is lost and it’s easy to create much more problems down the road.

I’m not going to argue with either the W3C Mobile Recommendations or Luke about the basic theory since I believe it’s sound

1. the user sees the content first
2. the navigation is visible with JavaScript disabled
3. the user has somewhere to go after reading the content
4. the navigation is positioned at the bottom of the screen where it’s the easiest to touch using thumbs when holding the phone one-handed

However, I believe that users expect app-like conventions when websites looks adapted to mobile devices and by creating a more app-like transition to the navigation menu the user feels more at ease with what’s happening than a sudden jump does. The expected behaviour from native mobile apps would probably be to transition to a menu page or to overlay a menu on top of the content.

Make a trigger hide everything except the navigation

So, the main navigation should be positioned at the bottom of the screen, it should be available there when the user is finished with the content and a way to show it from the top of the page should be available. But how do we create a more app-like transition without disturbing the history stack?

The best way I can think of is to fade out the actual content on the page and only leave the navigational menu at the bottom. This can be accomplished using a bit of JavaScript (and possibly CSS to smooth out the animations) and the beauty is that if the user has disabled JavaScript it’ll still work per the original recommendation.

Using jQuery it’s really quite easy, just make sure that the nav-trigger is a direct children to the body element (since it’ll be hidden otherwise). By preventing the default action (if nav-button is a link) we don’t add anything to the history stack

$("#nav-button").click(function(e) {
    e.preventDefault();
    $("body > *:not(body > footer, #nav-button)").fadeToggle();
    $(this).toggleClass("active");
});