We're in the process of redesigning our website, and one of the design goals is to make the site more mobile/tablet friendly.
Our current site is very large, and the navigation is somewhat complicated. Right now our main navigation is divided into 8 drop-down menus that expand when the mouse hovers over them. Each menu has 5-10 items in it.
When we redesign the site, we will likely have a similar number of navigation items, although they may be organized differently. However I don't think it would be desirable to retain the existing navigation format. "Hovering" can be problematic on touch-screen devices, and the long horizontal nav bar from which the menus drop down would have to be very small to fit horizontally on a smart-phone screen. On the other hand, a simple list of links or buttons is also undesirable because there would be way too many without a way to hide or expand/collapse them.
It is also our intention to use responsive design (using CSS media queries) to adapt our site to both desktop and mobile browsers, so a solution that could use shared code for both environments is ideal. I'm trying to avoid having separate "desktop" and "mobile" sites.
I have a few ideas about how we can handle this, but I'm not sure I like any of my ideas. So my question is what is a good touch-screen-friendly and mobile-friendly alternative to pull-down menus for sites with complicated navigation? Examples of sites that implement such navigation methods well would also be very much appreciated.
No comments:
Post a Comment