You can't touch a hover effect
July 23, 2010As of April 2010, there were over 85 million iPhone OS/iOS devices and as of February 2010, there were over 8 million Android devices. Add the other competing touch devices and you have a huge audience that can't see the fun hover effects on your links.
Hover effects are great—they provide a visual feedback that a user's mouse has found a link. They can be subtle, they can be jarring, but one thing they are not is in short supply. Unfortunately, the growing numbers of touch devices that have have web browsing capabilities have highlighted the importance of not only relying upon :hover to make a link visible to your users.
With a touch device, the continuous feedback of a mouse pointer is no longer present; there is no arrow to turn into a pointing finger. As a result, users can't identify links unless they are visually distinct without any action.
Some options to make your links more visible
- Location: Most users can identify a primary navigation area just by its position. Lists, or list-like items running along the top of the body, or down the outer edges are sure to be looked at as a navigation section.
- Color: Since almost the beginning of the web, links have been colored blue, followed by purple for links that have been visited. This tends to work better with links in the body of a site, as navigation links are often styled in a more site-specific color.
- Underlines: The standard convention for links is an underline. I generally prefer using a 1px bottom border, as opposed to text-decoration:underline;, as it helps prevent letters with descenders (p, q, g, etc.) from getting struck through by the underline. This helps with readability for certain demographics. (Be careful when using this technique by itself, as it can be mistaken for a normal underlined section of text.)
- Link icons: Style a link to include an icon that represents a link. Add small side margins to give the link some extra space and it'll really stand out.