With responsive web design being used a lot, one of the challenges is what to do with the main navigation on mobile devices. At kc web design Kent we build a lot of responsive websites and the issue of navigation on mobile devices comes up a lot.

With the mobile market growing rapidly and more and more website designs being tailored to handheld devices it no wonder that new usability issues are cropping up. Mobiles require a different approach to tackle the limited screen real-estate so the websites kc web design Kent design are made to work in a different way.

Responsive navigation solutions from kc web design kent

There are a few simple solutions to this problem and one idea on how it can be improved.

Some of the current solutions we use at kc web design Kent include not showing the navigation at all at the top and just have a footer navigation. The main focus of a mobile website is the use of vertical space. Users need to get to the content quickly and free from any extra ‘fluff’ so some websites choose to not display the navigation in that particular website design. Having the navigation appear at the moment solves this by leaving more important space at the top for the content but still allowing the user to navigate once the content has been read.

Another solution is to change the main top nab to a select list. This takes up less screen space but the navigation is still a click away at the top where the user expects it to be. This does create a few other problems though such as lack of styling and no way to support sub levels.

Yet another approach is to hide the navigation behind a button so that when the user touches the button the navigation pops-out or slides in from off screen. This is a more elegant solution but has its draw backs in animation and reliance on javascript.

This last option also brings up another issue – what to use on the button as a universal symbol to denote to the user that navigation will show if they click it? Lots of different icons are used currently with some sites showing a grid and others a list style icon. Some of the bigger players on the web such as Facebook have chosen to use an icon showing 3 lines and this does seem to be the best suggestion so far and may well become widely accepted if the big players use it.

At kc web design Kent we build lots of responsive site for all devices so get in touch if you’d like your website to be mobile friendly.