navigation - Should I reduce the number of menu items when showing on smaller devices, or use a 'hamburger' responsive menu?

So I was thinking about how I could make a responsive menu a better experience rather than just firing it into a drop down on mobile that has a hamburger as an icon.

Would it perhaps be a better user experience to limit the amount of navigation items, for example if you had:

(We'll use this site as an example)

Questions, Tags, Users, Badges, Unanswered and Ask Question...

To perhaps keep the menu visible but only hide the less important navigation items under a drop down called more with:

Questions, More and Ask Question

Or is the hamburger menu the better experience?

Answer

Paddi MacDonnell wrote an interesting article on the hamburger menu and related mobile-first approaches to design a few days ago:

It outlines some of the problems of hamburger menus, and concludes with the observation that the device is something of a way to brush the navigation of a complex app under the carpet of the hamburger icon (my carpet analogy, not hers!).

Facebook’s app famously swapped their hamburger icon for a tab bar, and as a result saw improved conversions. But Facebook have done something far more significant than swap menu designs. Recently they’ve released their Messenger app, and the big deal about that is that they already had a perfectly functional and popular app that they could have integrated the messaging with. Facebook have compartmentalized their functions, by focusing each app’s role they’ve arrived at two simple apps, instead of one complex one. The reduced functionality results in a reduced set of menu options, and less need for a hamburger menu.

Good apps are highly focussed, and they’ve evolved that way through far more rigorous user testing than the Web is subjected to. To create an app-style experience we need to simplify our sites, simplify again, and then simplify a bit more. If necessary, break your architecture down into manageable bite-sized pieces, microsites almost. When we present our users with a simple set of options, the problem of a complex menu never arises.

Making use of the hamburger icon is like slapping a band-aid on an injury: it patches it up, but underneath something is still broken.

As suggested in the question, if you can sensibly break down the architecture of the app/site in such a way that you can supply enough relevant and useful navigational items without having to resort to the hamburger icon, then that simplifies things for the user.

If, superficially it seems impossible to reduce the number of items to a manageable number, then perhaps it may be worth taking a step back and considering what you might have to do in order to make it possible - and whether that chunking or restructuring process would improve the mobile experience overall.

I would add that while reducing the navigation to the point where a hamburger menu is not needed, you should ensure that you still provide the basic navigation needs of being able to go back to where you came from, proceed to a similar item, move to a next stage, and avoid being left down a dead end.

Edit: See also: Why and How to avoid Hamburger Menus by Luis Abreu, where the same conclusion is reached:

The solution is reviewing your information architecture.