With responsive mobile websites all the rage, I noticed a very big problem that needs to be tackled before I can even start thinking about building for mobile, which is how much real-estate will our global navigation consume on our mobile websites.
In my opinion, global navigation is just awful on mobile sites, because since mobile resolutions are so small, navigation must now compete with the very little branding a mobile site may offer at the very top and more importantly it must also compete with whole purpose a user is at your site and that is the content just beneath it. We always talk about “above the fold”, the important information the user sees before the initial scroll of the page, and it’s unfortunate with this mobile navigation problem that a user is forced to scroll way up a page or way down a page to locate and use the global navigation. So, I thought there must be a more subtle and simpler way of enabling navigation for the user within the mobile space.
Therefore, I believe the future of global navigation within the mobile space should only present itself when the user is ready to use it. ™
The solution is for the navigation to sit behind the mobile site from the user’s perspective when in responsive mode and when the user is ready to use the navigation, they may take either 1 or 2 actions:
A. the user clicks a button to reveal the global navigation on the left from anywhere on the mobile site
B. the user performs a gesture to reveal the global navigation on the left from anywhere on the mobile site
At the very top of the mobile site, there would be a soft bar provided by the website when in responsive mode that stays consistent with the user as they scroll down the page or throughout the mobile site, which could include a search function, perhaps a tiny branding logo, and more importantly the menu button to call upon the global navigation when its required.
When I browse mobile sites on my iphone, this navigation concept is rarely used within the web app space with the exception of google’s gmail web app. I’m seeing this navigation concept more and more within the mobile app space such as facebook’s recently updated iphone app.
To repeat, the idea would be for the global navigation that is built at the template level to become hidden when the responsive mode is activated and sit behind the page from the user’s perspective, meanwhile a soft bar would also appear at the very top of the mobile site when responsive mode is activated that scrolls with the user. Finally, when the user is ready to use the global navigation, a simple click or swipe would be performed to reveal the navigation on the left from anywhere on the site.
Facebook
Twitter
email
LinkedIn
