Menus for tablets

If you have questions about using mojoPortal, you can post them here.

You may want to first review our site administration documentation to see if your question is answered there.

This thread is closed to new posts. You must sign in to post in the forums.
12/16/2013 4:05:04 PM
Lars Rathje
Gravatar
Total Posts 137
View Posts
When enough isn't

Menus for tablets

Hi,

I'm using Artisteer 4.2 and MojoPortal 2.4.0.0 to make a responsive design for all screen sizes.

It generally works great, but when there is a menu difference between pc and tablet that I can't solve. Maybe someone have a good suggestion?

On PC: If you hover over an item in the horizontal menu it displays the submenus as planned and then you can hover down and pick your choice.

On tablet: You can't hover, so I try to click the same item in the horizontal menu. For a short second it shows the submenu, but you don't get the chance to pick any submenu item. It just goes with the top item as if this one is clicked.

You can see an example here: http://www.boostmarathon.com. Just try one of the top items like training plans or race calendar.

I hope someone can guide me ...

Possible solution directions?

  • Settings in Artisteer?
  • Enable unclickable menu items?
  • Settings of Flexmenu?

Best regards

Lars

12/17/2013 4:25:18 AM
Lars Rathje
Gravatar
Total Posts 137
View Posts
When enough isn't

Re: Menus for tablets

Hi again,

In the meanwhile I have read a general article about the issues with hover versus clik on tablets, pc, mobile etc.

My understanding is that it would be better always to open a menu by a click rather than hover. However Artisteer seem to be locked onto hovering. So now I have developed a custom module that combines the two. This is how it works on my site http://www.boostmarathon.com at the moment:

  • You can (if you're on pc) still hover and go directly to the submenu by clicking on it. Frequent users can benefit from this direct link.
  • Or you can click on the top item, e.g. "Race Calendar" and that will open a list on the page from where you can click to any of the submenu items

I'm still not sure if this the best solution, but now it works on all devices at least. Here is the article that inspired me: http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/

If anyone has a better solution or a different viewpoint I would very much like to know.

 

Anyway, thanks for a great product - I'm a huge fan of Mojoportal despite these minor issues ....

Best regards

Lars

12/18/2013 10:23:00 AM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: Menus for tablets

Hi,

When I try our demo site with ipad, the artisteer skin menus seem to work pretty well. For example I touch the product demos menu once and it expands, only if I touch it again it navigates.

Same thing when I visit this site with ipad (though we are not using an Artisteer skin here), if I touch the Store menu once it expands, if I touch it again it navigates. As far as I know we are not doing anything special to make it work like that it just does. I'm not sure what Artisteer may be doing with javascript, but I'm pretty sure we aren't doing anything with javascript on this site to work differently with tablets, it just works, at least for ipad.

Best,

Joe

12/19/2013 2:42:43 AM
Lars Rathje
Gravatar
Total Posts 137
View Posts
When enough isn't

Re: Menus for tablets

Hi Joe,

Actually you're right. I have now tested it on ipad and android. It works on an ipad, but not as I was testing on an android.

This has been tested both on my site and on the demo site. The demo site is special as it default makes an android tablet go on the mobile kit, but if you turn it back to normal view you will get the problem.

In both cases, though, the demo site and my site sends you to the top-menu page where you can pick your next move. The lessons learned are these three:

  • Don't setup your top-menu page to redirect directly to e.g. the first item on the submenu as you then can't access the other items.
  • For your notice there might be an improvement issue to work into a comming release - I don't know if it's possible and certainly I will be nice to avoid using javascript for it.
  • A another option is to activate the mobile kit, but there are a lot of other things to consider in that case and then you can not utilize the responsive design of Artisteer - or can you?

Thanks for your reply - it helped me to clarify exactly where the problem occurs.

Best regards

Lars

You must sign in to post in the forums. This thread is closed to new posts.