With everything quickly pushing towards a mobile world, the amount of web traffic from mobile devices compared to the conventional desktop computer is rising every day.
These statistics are causing more companies to request mobile and tablet versions of their website and this is why the buzz word ‘responsive design‘ is being constantly thrown around.
One of the biggest hurdles for web designers when designing a mobile version is space. On a small mobile phone you are restricted to a 4-5 inch screen, so there has to be careful planning in placement of elements across the page.
Probably the most challenging aspect is the navigation menus, mainly because the use of touch screens allow users to use their fingers. The spacial issues combined with size of users fingers means that a conventional navigation is way out of the question. Following the trend of mobile apps, slide/push navigation menus techniques are fast becoming the standard.
Slide and push navigation is basically having a navigation menu slide in from the edge of the screen, either across the top of the content or pushing the content out of the way. Examples of this can be seen on plenty of iPhone apps, including Facebook, with the now universal menu icon triggering the menu to slide-in and out.
The benefit of this is that it opens up almost the whole screen for the navigation, but also the user doesn’t feel the are being taken away completely from the content.
There are a fair few jQuery plugins that you can use for this, in fact you could probably just use straight Javascript or jQuery itself if you’re keen, however one that I found straight forward and easy to use is called jPanelMenu.
In a few lines of code you can turn any navigation into a push menu by passing in the CSS selector name of the navigation element. All you need to do from there is select which element will trigger then menu and you are ready to go. Any styling is left entirely up to you making the web designer happy.
var jPM = $.jPanelMenu({
menu: '#custom-menu-selector',
trigger: '.custom-menu-trigger-selector'
});There also a healthy number of options to muck around with including animations, direction and durations as well as an API for customisation.
Another great feature is that it can also be combined with jRespond which is a separate plugin that manages Javascript on responsive sites. This allows you to do change the way the menus act at different screen resolutions taking into account horizontal and vertical version of you mobile/tablet websites.