Often when browsing a website on my iPhone I am impatiently zooming in and out trying to make use of their standard non responsive menu, this often leads to some clumsy fat fingered iPhone stabbing which only results in me being taken to the wrong page anyway.
When creating your website, in a majority of instances you would take the decision to make it responsive on all screen sizes so the website still provides a great user experience, no matter if the user is on an iPhone or a small tablet device.
A decision you need to consider in the early concept stages is how best to present your website menu structure to your user. Depending on the menu size and hierarchy will influence how you decide to present your responsive menu.
Today I wanted to take a look at a couple of different ways responsive websites are presenting their menu structures to mobile and tablet users, helping in the fight against fat fingered navigation errors.
The Condensed Navigation
For websites using a smaller and simpler menu structure, simply condensing and only showing a select few menu links is a common practice.
This style tends to lend itself to very few menu links without complex nested menu items. You can this responsive navigation trend in the below example
The Dropdown Toggle Navigation
The drop down toggle style navigation is another way of displaying both simple and more complex menu structures.
This dropdown style of navigation is certainly a better way to present a multi-level deep menu on small screens and it has the added benefit of saving some valuable screen space when the menu is not toggled. Take a look at these examples of the dropdown style responsive navigation: