Simon Battersby

I’ve got a little curious lately about the nature of support for css driven drop down or flyout menus on touchscreen devices. A bit of Googling yesterday failed to find anything very definitive and found a number of misunderstandings.

The problem

Drop down and flyout menus (like the flyout menu on this site) are driven by hovering the mouse over a parent element (try hovering ‘Photos’ on the left if you can). But of course there is no hover on a touchscreen device. Now, if you use Safari on Apple iOS devices (iPhones, iPads and iPods), it’s clever in this regard, and if the user taps on ‘Photos’ the flyout menu is displayed without moving to the new page. So the pages linked from the dropdown/flyout are still accessible. But on at least some Android tablets, this isn’t the case, if you tap on ‘Photos’ you’ll just go straight to the Photos page (just as you would if you were using a non touchscreen device).

For my particular site, this isn’t a big issue as the Photos ‘sublinks’ are displayed on the Photo page, so a user on an Android tablet can still reach the page, albeit via an intermediate one. But if your site has pages which are accessible only via a dropdown, then the user is both unaware of them and unable to access them.

So I don’t need to worry about Apple devices then?

It isn’t quite as easy as that I’m afraid. By experimentation, using Opera Mini on an iPhone does not give the behaviour above, the dropdown is never displayed. I accept that few people will use that combination however.

Solutions?

I’ve seen a few sites which claim to solve this by the addition of some javascript which in some way replicates the behaviour I’ve described above on Apple devices. The big issue here is that this is going to happen for all users, not just those on touchscreen devices, which introduces additional issues with usability, I think. You might try to detect a touchscreen with the javascript, and do something clever to only trigger this behaviour on a touchscreen device, but it seems to me that reliably detecting the increasing profusion of touchscreens is likely to be difficult (akin to browser detection). So really I’ve come to the conclusion that at the moment the only solution is to provide some sort of submenu that’s displayed on a page.

Summary of the behaviour I’ve noted

Sadly, I don’t have access to every mobile device known to man….but here’s what I can confirm.

Tap on top level menu item displays submenu Apple iPhone 3G/Safari, Apple iPad 3/Safari. Samsung Galaxy Ace/Android Gingerbread

Tap on top level menu item goes straight to that page, no sub-menu: Apple iPhone 1/Opera Mini, Android Tablet/Chrome

Further, if you’re very careful on Android Gingerbread, the dropdown menu does display on a longer hold and it’s then possible (but difficult) to slide your finger on to the submenu and tap on an item. You need to be know the dropdown is going to appear and be ready for it though….so not very user-friendly.

If you’re reading this page on a touchscreen, give it a try and tell me what happens. Especially interested in Windows 8 users.

Tags: touchscreens