Should top-level menu items link when a dropdown is present (reactive only)
This may be a little long, but I'm a bit fired up about this right now because it was a big debate with my boss and coworker (that is still unresolved). It wasn't heated really, but we have starkly different views on the subject. I'd love to hear everyone's opinion on it.
So, we're working on some responsive websites. On a regular computer hovering on menu items and accessing subitems isn't an issue; it's pretty straightforward. However things change when you look at touch devices such as phones or tablets. Hovering doesn't really work, and if it does, it's quirky at best and implemented differently depending on the device manufacturer or browser vendor. Simply put, there's no standard (that I know of, anyway) of how that operates. As of now with my phone, I can press a top level menu item, hold it, and sometimes the menu comes up (but I have to release before the browser thinks I'm "right-clicking"); half the time it just "clicks" the menu item. If I cancel the right-click menu, the drop down menu is there and I can freely press any of the links. My phone is rather old, but my boss has the new Galaxy S4 or whatever, and he was having issues accessing dropdown menus as well. Simply put, it's spotty at best.
So, obviously at smaller screen sizes you offer a mobile-friendly menu. Pretty straightforward. But here is where the debate started. When my boss sells a reactive site to a client, he is essentially selling him the exact same website, just fitted to different screen sizes. This includes the menu. He wants the menu to be exactly the same as the desktop version - but - since pressing or tapping top-level menu items has proven to be troublesome, this doesn't really work. So I offered two solutions:
1) Serve a different menu (I don't mean a differently styled menu - that's a given. I mean a menu with different options, styled for mobile of course). You're on a mobile device anyway, chances are you're browsing the site differently than you would on a desktop. It is in my opinion that a mobile menu should only serve the important menu options (about us, contact, etc.) and shouldn't as a rule mimic the desktop menu exactly.
2) Serve the same menu, but make sure the top-level menu items link to the first item in the dropdown. For example if the top-level item is "About" and the first submenu item is "Who We Are". This is a little more case-by-case, but it works well enough. For the mobile menu that mimics it, I have written some jQuery to ignore top-level menu times so it just expands and shows the sub items (looks good in my opinion if it's styled correctly - see Microsoft's website as an example).
My boss doesn't like these solutions really. He would rather have the same menu in all cases, but just never have the top-level items link. Not even on the desktop. He wants to "sell the client the same website in all cases", and thinks that it will be too difficult for clients to update two menus (don't see how - we're talking WordPress here), or it's just too much work for us to create multiple menus. Apparently the "rule" has always been this with responsive sites (that we have made).
Personally, I think the top-level menu items should always link on a desktop, whether they go to their own page, or to the first item in the dropdown. I think it's non-intuitive for someone to click on it, and nothing happens, even if a dropdown is there. Also, you may have top-level items without a dropdown. Those do link. In my opinion that's inconsistent and, well, wrong. All the top-level items should behave the same way (on a desktop menu), regardless if they have a dropdown or not.
The only exception to the above is when the dropdown is not activated by hover, but by click, like Microsoft's website; you have to click the top-level items to show and hide the dropdowns. That makes sense. But otherwise they should always link. I started searching around the web and found big company sites with dropdowns and reactive, and every single one of them had their top-level menu items link. Also found this brief discussion, where some people were also discussing the issue and I have to agree with them.
So what do you guys think? Sorry if it's a bit jumbled; my thoughts may be racing around right now.
Declare variables, not war.
Un Re Member
yes completely agree
I had to refit an old site to make it responsive - was an interesting job as it has 3 depth menus- (not my preference, but it's a big site)
Luckily I only have to please the client and he's all for what works best.
Mobile size was fully 'touch to operate' menu - i.e. you only see three little bars when it's closed - then everything is a hard 'click to show' , 'click to hide'.
I went through a lot of half way attempts while getting the feel for what works - i.e too much animating or 'auto hiding' is confusing - and js is essential for the fine control -css alone is not enough.
I found a brilliant js script called meanmenu where they had thought it all through
As for top level, it matches the site and is just a label.
Cursor doesn't change so it 'feels' unclickable.
Next level down is styled differently so it all looks natural and clickable.
On another (non-responsive) site I did a back end (e.g. primarily functional and for only a few users) where the top level is not clickable so you have to rollover everything even if there's only one item - it was a mistake and it feels nasty to operate. I need to look at it again.
I think a lot is in the visual cues..
Your boss is being dumb - you can't make the same tool work on mobile size and full screen size.
Does a bicycle have a steering wheel?
Originally Posted by cretaceous
Just a few thoughts
- Option 2. seems reasonable in my opinion.
- If it made sense for the two versions of the site to be exactly the same... you wouldn't have the responsive layout to begin with
- If you navigated the site with a joystick you'd... need a third way of navigating
- The client shouldn't have to keep updating several menus if they only differ in response to interaction
- When you are short on time, money and workers, while features are plentiful, the "never-link-top-menu" may be acceptable albeit annoying
- Bu if money isn't lacking, then boss-man should never ever sell a dekstop-broken-menu - just make them pay more for a working version
Is there a way to detect difference between tap and click? And I don't mean a round-a-bout way, as in "the screen is small and tiltable, let's call a click a tap". I mean as in true tap event vs true click events that you could differentiate between on a system with both a mouse and a screen?
Originally Posted by cretaceous
Settled 4 red convertible
Can't click and hover produce the same action (in this case, opening a menu)?
I was looking at mouse events at MDN and noticed they now have MouseEvent.mozInputSource, matching constants such as MOZ_SOURCE_TOUCH and MOZ_SOURCE_CURSOR. Considering the names, it doesn't look like there's anything cross-browser, but it will probably get there. Using dalecosp's idea you could enhance any browser with similar support by making the top level menu item linked for mouse-generated click events, while simply expanding and retracting it on pads.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)