Order of the Bath

One aspect of web design that has become very popular in recent years is the functionality available by hovering the mouse pointer over some object and for it to do things. Hovering in this case means moving the pointer over the object but not clicking any buttons.

The effects can be achieved in a number of ways. One of the simplest is automatic in many browsers; if you hover over some pictures and links, if they have the “title” attribute then that title will pop up in a little box. Try it in the “Latest Comments” in the sidebar of this blog. Another simple and more controllable method is to use the CSS property “a:hover”. You can also see that in action on the sidebar and almost all other links on here—the background changes colour as you move over the link. Other effects can be achieved in the same way, some more desirable than others.

A more complex but much more versatile method can be obtained using Javascript “onmouseover” and “onmouseout” properties. A good example of this can be seen on our church website: the drop-down menu is created using that type of code. Another very widely used technique is using Adobe Flash. In fact it seems that nearly all Flash objects use mouse hover actions in some way. Take for example YouTube; The video starts automatically (I hope you enjoy it), but if you move the mouse over it then the progress bar becomes more prominent. This is even more pronounced on Vimeo. Other uses of Flash are much more sophisticated using not only hover but mouse movement to activate functions; games often do this.

Now to the point—how do you hover on a touch screen? I have done a few experiments using an iPod Touch and have discovered that the title & CSS codes don’t work at all; there is no way of activating the hover functions. Javascript, however, seems to be quite clever; the first touch activates the hover functions and touching elsewhere cancels it. If you want the click function then you need to touch the object twice. This means that the drop-down menus work intuitively. In fact I hadn’t noticed what was happening until I consciously thought about it. But Flash is just a big bag of eels. As we have been made very aware recently, it doesn’t work on the iP* devices at all. If Adobe/Google ever get it working properly for the Android phones, I wonder how they will cope with the crippled UI? Many video web sites like YouTube detect the device type and send a different form of video to mobiles and Apple is banking on this happening generally. HTML5 promises to offer many features in this area but each will need to be considered in the context of the user.

The challenge for web designers is to think in advance for mobile devices and how people will interact with then and also to do extensive testing on different types. For professionals they can offset samples against tax and expenses but for people like me; no chance, I will just have to think, hope and pray.

This entry was posted on 25 May 2010 at 12:46 by Rick and is filed under Browsers, Technical. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.