I have a website that has flyout menus.
If someone hovers over the top level menu, they see the flyouts. If they click the top level menu, they go to a page that has the links that would be in the menu.
The problem? Mobile/touchscreen. On the iphone (only mobile device I have a the moment) if I hover over the menu with my finger nothing happens. If I tap, it triggers the :hover but then goes to the page anyway meaning a quick glimpse of the flyout and then it disapears quickly as the page changes.
I'm a bit stuck on what the best practice here would be. I could make it so that the click is disabled so the inner page isn't reached but that page is actually needed.
The only option to me then is to disable the hover on touchscreens as it serves no use unless it can be shown when the finger is just touching it. I'm guessing though that if that happened the finger would obscure the content anyway.
I can't figure out the best appraoch to do this though. Any suggestions would be welcome
Maybe there should be a "mobile" forum for these kind of questions?
Unfortunately Yahoo just splooooeooeeegs all the text on the page, but you can /Device independence. to find where the relevant area starts.
You might want to consider making a mobile version of your site (without dropdowns but plain links like a sitemap) and offer a link to that page near the top, so users of any kind of funky touch mobile can choose to go there instead of playing with the dropdowns.
The other option is to put a layer of JS over your already-working dropdown that uses click events to do slightly other things, but I'm also leery of making a mobile (who is likely using G3 or some lesser network or are leeching off some cafe's wireless internet or whatever) load a bunch of scripts, which they will try to do if they are available (plus page loading stops until the scripts are loaded).
Dropdowns already have some basic usability issues with them even without touch taken into account. I figure any site with deep menus should also already have a sitemap-style page, showing the relationship between the links like the dropdown does except without stuff hiding/reappearing.
If it's just the dropdowns of the site that are making trouble for touch devices, then instead of a whole mobile site, just a link for the sitemap page should be enough. That link should be somewhere in the vicinity of the dropdown so users notice it.
I would not try to do content-negotiation based on user agent, as browsers lie and you wouldn't want to hit any desktops by accident (like Facebook does with Konqueror: clearly they use bad stupid browser sniffing).
*edit looks like they finally added KHTML to their desktop list. So it should be "like Facebook did with Konqueror: clearly they use bad stupid browser sniffing)." lawlz
Great thanks - I'll watch the
Great thanks - I'll watch the video a bit later. Tried reading through the text but my brain started to ache!
The dropdowns in this case need to stay. Think of them as quick links, or even a quick overview. Someone simply hovers and they get to see a load of places they can go. They don't need to wait for the next page and once they know the link is there they can go quickly again and again.
Definitely, don't want to create a mobile version as I'm just dipping my toes at the moment and have more of a publish once everywhere mindset. I don't mind creating mobile style sheets or using @ media queries. What do you think? I was hoping I could use the "@ handheld" query but it seems that's not supported. Its almost as though a @touchscreen would really help. Maybe I should assume that all window resolutions below a certain width are mobile and probably touch screen. If I did that I could easily overwrite the :hover CSS and just turn it off for this. Does that sound like a sensible start or do you think there is a better way?
Don't really want to run a bunch of mobile only scripts for all the reasons you say.
Wh00ps I said G3 I meant 3G.
Maybe I should assume that all window resolutions below a certain width are mobile and probably touch screen. If I did that I could easily overwrite the :hover CSS and just turn it off for this. Does that sound like a sensible start or do you think there is a better way?
I would not make such a drastic assumtion, however it can't hurt to make buttons larger for those devices who are touch-based.
There are touch-based devices who also have a cursor, so why restrict those ones?
Someone simply hovers and they get to see a load of places they can go. They don't need to wait for the next page and once they know the link is there they can go quickly again and again.
But it's not that easy when they CAN'T hover. It becomes absolutely useless.
So, you'll still need something like a sitemap link that non-dropdowners can use. The dropdown is useless for touchscreens just as they are useless for most people without mice (like when I use my laptop).
I've been using @media queries with the max-width statements. Google "css3 media queries" to see these. They don't work for older browsers at all, including older mobile browsers, but they'll work in newer ones (like the safari on the iPhone and the Opera on others).
Make this demo page smaller and you'll see some stuff that was done:
The larger images are removed, the menu becomes a list of thick full-width bars, the smaller categorie list becomes larger (more padding and margin added around each list item compared to the desktop-width version), the sidebar dropping down and the font there getting larger as well.
I haven't done this on a page with a dropdown though but I have to do it to one and I'm currently thinking of letting the submenu appear as just a bunch of links in a section, with skip links around it for people who don't want to scroll past them all the time.
Found another one
This is a pretty cool article:
He basically says use "links" that iWhatever users can click on which then show further options. That sounds doable. I still don't like the idea of a dropdown menu though unless they are Megas:http://www.asdafinance.com/insurance/car-insurance/