When Apple's CEO, Steve Jobs, introduced the iPad earlier this year, he opened the door for a frenzy of activity and consumer demand around new web-enabled devices that primarily rely on human interaction rather than a mouse pointer.
While this may seem like no big deal to consumers, it caused a lot of fear and worry for web developers that depend not just on clicking (touching) but also on hovering to make sites interactive.
"Although the iPad has an optional keyboard, " wrote respected web designer Craig Grannell in the April issue of U.K.-based .net Magazine, "it's still primarily a touchscreen device. To that end, you touch the screen to interact with something. That might seem obvious, but many web designers use a lot of hover effects for important things (including mega menus), which work poorly or not at all on these kinds of devices."
No Hovering on the Touchable Web
The revelation that Grannell and other leading web developers recognized was that the touchable web didn't support one of the single most popular CSS and JavaScript events, hovering.
In mobile optimization, developers managed the hover deficiency with mobile specific style sheets, scripts, or similar tactics that were generally employed on devices with a screen resolution below 480 pixels in width, but the iPad or HP Slate, for example, render web pages in the same resolutions as many laptops or even desktop systems, and they generally behave the same way as laptops, too. So as these sorts of touch-based devices become more popular, techniques like fly-out menus (see the KangaROOS example below) could become untenable since touch users would not be able to interact with them.
Concerns about hovering were strong enough that some developers and designers ruled out using hovering effects in future designs.
Help Is on the Way
Fortunately, touchscreen and touchscreen component makers are also aware of the problem. And two separate revelations have provided hope for the future of hovering.
First, Cypress Semiconductor, a leading supplier of mixed-signal semiconductors and other electronic components, announced a capacitive touchscreen technology that recognizes a user's finger tip before it touches the screen.
Cypress's solution is primarily aimed at smaller mobile screens, but it represents a step toward addressing the hover issue on tablets or even tabletop touch systems like Microsoft's Surface.
Separately, in January of this year the U.S. Patent and Trademark Office awarded Apple a patent for what appears to be a hover-sensing touchscreen that would work on devices ranging from the iPad to newer versions of the iPhone, iPod, and MacBook.
If nothing else, the patent demonstrates that Apple is doing something to address hovering in touch devices.
Summing Up
I hope that this post makes you feel a little better about using hover effects in your designs. While today's iPad and HP Slate users won't be able to hover, these folks make up a relatively small percentage of the Internet's population. So plan for hover-dependent site navigation to degrade gracefully on these current tablet platforms while you wait for the next generation to support hovering.
