6

I'm in the process of a website redesign and I'm not really sure what to do with the navigation. The goals of the redesign are to simplify the site and make it more mobile friendly.

The existing site has a two level nav that appears when you mouse over any of the top level links (screenshot below). On devices that don't support mouse events, the secondary nav is permanently visible.

screenshot

https://i.stack.imgur.com/liagI.jpg - high res version of the screenshot

I'm struggling to find a better solution for the navgivation. The secondary pages are important so just losing the secondary nav isn't an option. I also can't simplify it down to just one, long primary nav.

What are my options?

Improve this question
3
  • 2
    I don't know if you intended to completely mask the identity of the original website, but there's enough info in those screenshots to allow me to identify the source...just letting you know in case it matters.
    – Roger Attrill
    Nov 11, 2012 at 14:06
  • I'm very glad this is being redesigned - the drop down menus (including headers) aren't even in the same position as the headers before the menus come down!
    – Roger Attrill
    Nov 11, 2012 at 14:11
  • Yeah, I know that the site can be found if someone takes the time to do so. I just hid the logo so it isn't 100% obvious. The primary nav positions are one of the reasons the redesign is going ahead. It was a decent idea but not executed as well as it could be.
    – boz
    Nov 11, 2012 at 14:19

2 Answers 2

Reset to default
2

Accordion based navigation menus are a common pattern in mobile designs. And when properly done, it can help the user explore the applications in a very simple, easy & intuitive manner.

You can also get some ideas from this article that explains several different ways to implement navigation on mobile applications - http://stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design

Also, this one - http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/

Hope that helps.

Improve this answer
1
  • The last link has given me some good ideas - thanks a lot!
    – boz
    Nov 11, 2012 at 19:24
2

I've been working on a very similar problem. The solution I've come up with feels good to me but I haven't had it exposed and received any feedback. You can see a skeleton that shows how it works here: http://handcraftedweb.com (make your browser narrow to see the mobile layout).

Basically I don't worry about how much vertical space the nav takes up. It just expands from the top (pushing content downward) and once displayed can be scrolled. I went with what I hope is a conventional expandable tree similar to a tree-view in file browsers with the goal being that will be familiar enough to be immediately understandable.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.