Get our posts emailed to you with our monthly newsletter, subscribe here.

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.

Divi WordPress Theme

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

Vittorio Vittori

Makers Quarter

Create DM

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:

World Wildlife Fund

The Next Web




Tree House

Tiger Lily Apps

PH Digital Labs



Kick Point

Wolcott Yacht Club


Chris Wilhite Design

Cole Townsend


The Twelve

Posted by David Martin

David Martin is a WordPress developer & entrepreneur from the UK. He owns DesignWoop, CardDsgn and WhoDesignToday. Catch up with David on Twitter.


  1. Why am I the only one who hate responsive design. Website used to look great on my iPad now they layouts jumble up when I visit responsive websites. I hate them. I think maybe it would be good to make them resposive sites only for iPhones. But I love normal sites on the iPad portrait or landscape.

    1. Rat, I hear ya. I think most sites should display desktop version of the site on iPads. Absolutely. I think it is gimmicky that they display an iPad-tailored version. Unless they have a really good reason to do so or if it’s a web app that actually makes it better than the desktop counterpart (gmail is a good example), then they should render the desktop version.

      If they so want you to use a “tablet-optimized” version of the site, they should give you a way out to display the full site.

      Responsive is good, when used responsibly.

    2. Agreed, but I do like responsive design a lot. I do a lot of it as well. The problem is when people only recognize two screen sizes: mobile and desktop, and lump in tablets, which can actually be larger than some cases of desktop browsing. Be sure you’re not confusing responsive design with simple cases of mobile “optimized” sites.

    3. Great post.

      Highly, higly disagree Rat. IF done correctly RWD is a dream to use, the website your using now is Responsive. A tablet solution is also hugely better. On some WELL designed fixed websites you had to pinch on zoom on a tablet.

      A good example is this very page.

      Scroll down to iPad portrait:



      I know what I’d rather browse..

Comments are closed.