Mobile Navigation Via Taps and Gestures Instead of the Mouse
Mobile web has strongly influenced our habits of when, how, and where we use the world wide web. The way of how we navigate through websites has changed the most. A few years ago, the mouse had the main responsibility for the navigation, and now, tablets and smartphones are controlled via simple taps and gestures. Thus, contemporary websites should definitely consider taps and gestures when it comes to user interfaces and mobile navigation.
The Hover ProblemNavigation on a smartphone or tablet works fine without paying close attention to taps and gestures. Links are opened via tap instead of a click, and scrolling is done by swiping. However, when it comes to hover effects, which are quite popular in web design, mobile devices will already give you trouble. That's because a hover effect, using the CSS pseudo class ": hover", for example, just doesn't exist on mobile devises, and thus, it won't be triggered when calling up links via tap. So, when equipping links with hover effects, the link target and the hover effect are processed at the same time on mobile devices. At best, the visitor will see the hover effect for a short period of time, until the page referenced in the link is accessed. Navigation Via Hover Effect on Fotolia Of course, web developers can generally forgo hover effects to guarantee a homogeneous user interface on desktop and mobile devices. Or you could choose to take a different approach for desktop and mobile devices. If the hover effect is only used as ornamental art, you should just leave it out on mobile devices. When information, like texts, is displayed using a hover effect, you should find a way to display them without the hover effect for mobile devices.
Media Query and "pointer"CSS might not give you an explicit way to choose between controls via mouse, and touch displays. However, the "pointer" designation allows you to distinguish between high and limited pointer accuracy. On touch devices, "pointer" hands out the value "coarse", which is equivalent to a limited accuracy. For other devices, the value "fine" is used for a high precision.
Links and Buttons Require SpaceAside from hover effects, there's another aspect that you should consider when designing mobile user interfaces: the size of and the distances between links and buttons. Example for Menus With Sufficient Size: Google+ and FontShop While the mouse allows you to click small links and buttons very precisely, the finger tap is not as accurate. Thus, you should make sure that your elements are large enough on mobile views. It is also important to leave enough space between the individual elements. All of this prevents the visitor from accidentally choosing a wrong link or button. If you want to distinguish between desktop and mobile view, you could, once again, use the "pointer" designation to design different menus and forms. Making the design of these elements dependant on a device's display width, like it's common in responsive weblayouts, doesn't make much sense. After all, tablets are also operated via taps and gestures, and usually, they display the desktop view.