2

I'm designing a site (a customer portal) that will probably be used with mobile/touchscreen devices at some point in the future. In the past I've used CSS code like this:

div.Info
{
    display: inline;
    position: relative;
    text-decoration: none;
}

div.Info span.InfoDetail
{
    display: none;
}

div.Info:hover span.InfoDetail
{
    padding: 3px;
    display: block;
    position: absolute;
    top: 1em; left: 1em;
    border: 3px inset Gray;
    background-color: White; color: #000;
    text-align: left;
    white-space: nowrap;
    z-index: 25;
}

to create little CSS popups that display on mouseover and they seem to work very well. However I'm conscious that this may or may not work on touchscreens so I was wondering what the "correct" behaviour was as there doesn't seem to be much consistency that I've found across the limited amount of mobile browsers I've been able to look at. I had looked about a bit and it seems that this hover event may activate if the object gains focus, so I created some test code at http://mad-halfling.webs.com/testcode.htm that displays a small popup if you mouse over the "Mouse over for detail" text or the little up-arrow image:-

  • on iOS (I found a demo iPad in a shop to test it) this doesn't seem to work (I only tried the text as I have only just added the image)
  • on MicroB on my N900, tapping the text and image both bring up the popup, fine
  • on Firefox (I believe it's Fennec) on my N900 tapping on either does nothing

What's your take on this - it seems a shame as it's such a useful way of making popups without having to resort to javascript, but if it won't work with touch-screens going forward I'm going to have to rethink my strategy

Cheers

MH

Mad Halfling
  • 968
  • 3
  • 19
  • 36
  • I believe on Android tapping the hover-area also works. – Bazzz Apr 19 '11 at 11:45
  • 1
    This sounds like more of a lament followed by, "amirite?" Do you want alternatives, or to know if your assessment is correct? – JasonFruit Apr 19 '11 at 11:47
  • I don't think the problem is necessarily with css layers but rather with mouse-over events. I would suggest creating one version of the site for desktops and another for mobiles rather than attempting to create a one-size-fits-all solution. – Mayo Apr 19 '11 at 12:59
  • Just an update - iOS does work, partially, but only if the object is something that can gain focus, like an image or a link. – Mad Halfling Apr 19 '11 at 13:12
  • On the answers side of things, I was wondering how people were approaching this, and what their experiences were. The days of a mobile site and non-mobile site are dying, IMHO, plus this still applies to touchscreen tablets as they will grow in quantity and size/resolution (table surfaces?) so normal websites will have to cater for them (as far as I can see). – Mad Halfling Apr 19 '11 at 13:14
  • In repsonse to Mayo, this is indeed about the mouseover event that triggers the layer being displayed - sorry if I didn't make this clear enough - obviously with a touchscreen (until we all have mini kinects on our phones/tablets) there isn't a "mouseover" event, per se, but currently there seems to be some implementation of this on element focus but is this going to be used moving forward and consistently implemented? – Mad Halfling Apr 19 '11 at 15:35

2 Answers2

2

The fundamental problem with mouseover, including when it is used for desktop websites, is that there is no UI indication of a behavior.

This isn't a definitive answer but I've noticed that in places where you would be using "mouseover" now on a mobile device you can use "long touch". The problem though is that nothing on the UI indicates that behavior. (To be fair UI conventions that have no indication have been around for a while, like double clicking).

The rule of thumb probably should still be that just like mouseovers, critical functionality shouldn't require them.

T. Stone
  • 19,209
  • 15
  • 69
  • 97
  • This is pretty much what I had come up with - I was hoping that there might be more comprehensive ideas out there, but it seems not....... The other thing this will hit is title attributes on objects - I wonder how many sites have these to help users? I've found that different mobile browsers have different support, as I mentioned: iOS will only react if the element can gain focus and so it works on images but not on text – Mad Halfling May 17 '11 at 14:38
0

Why not have a image of a question mark in a circle (which seems to be common idiom) near whatever you'd like a popup for, and have that have onhover and onclick functionality to display your documentation?

Marcin
  • 48,559
  • 18
  • 128
  • 201
  • The only problem is that this needs scripting available and enabled. The neat thing about the CSS :hover event popups is they are so much more simplistic, neat and even work with script-blockers. – Mad Halfling May 17 '11 at 14:37
  • OK, but how would people activate them easily? If "hover" is triggered by a long finger press, it's probably not the best solution. – Marcin May 17 '11 at 15:21
  • I don't know - I was hoping that as smartphones have been out for some time now, this had been discussed and outlines, at least, drawn up - but this doesn't seem to be the case. Alas, currently, there doesn't seem to be much co-ordination or standardisation across the various platforms - unfortunately I'm not particularly surprised at this! It depends on the OS on the activation method - for example iOS with hover on a link seems to activate the hover on the first click and then follow the link on the 2nd click, IIRC. – Mad Halfling May 18 '11 at 11:06
  • As JasonFruit commented on my original question: is this a question or a lament? - it started off as a question but I'm now lining up rows of banshees to begin the wailing.... :) – Mad Halfling May 18 '11 at 11:20