Clear and timely! Thanks for the great piece. I was just doing some layout sketches today and having a self-debate about my main menu items and the whole touch/mouse conundrum. With your help, I think I’ve got an appropriate solution.

Basically a good introduction to hover effects. However there are two issues in my eyes:

1. In chapter 3 you have this avatar image and a hover reveals a bio. But as we all know, you shouldn’t hide content from “mobile” (read “no hover”) users – but that’s exactly what you are doing here. That’s also the reason why I often think twice if I add a hover effect to anything. Because what’s it worth, if mobile users – a share steadily growing – can’t see it? And often making a good hover effect can be quite some work.

2. You suggest a solution where the user can choose between touch and hover, but that’s a choice you shouldn’t pass on to the users; some may even not know, what that is about. In my eyes a site should “just work” – and that’s an option that makes things way to complicated for users.

Dear Jenn! I actually meant the second example in chapter 3 in my original comment.

However when you say
bq. The bio is unnecessary – unless of course this is a site for specifically Twitter bios, then you would probably need it! :) Content between devices and size doesn’t always have to be the same, it depends on the content.

Why do you think content is necessary or interesting for one group (no-touch) and not for another (touch)? And if it’s unimportant why not just omit it for both groups? These are assumptions you simply can’t make as a developer but should be made by the user.

Great review of the state of hovers, though I would have liked to see Pointer Events discussed.

I agree with Patrick – I’m particularly looking forward to Pointer Events maturing (the first iteration leaves something to be desired) and would love to see widespread adoption. Yes, I’m sure there will be a paradigm shift in how we create/use websites, but that’s kinda what I like about this field. Ever-changing and improving!

@Christian K: Sorry I missed the second part of your comment! By all means, I agree that I’m not sure that this switcher is the best solution for all/any of our sites. How did you feel about the text size switchers that used to exist? I think that they didn’t solve everyone’s problem, but it helped. I love the idea of a website that just works. But with how things change all the time, sometimes we need to hack things. Whether that’s CSS browser hacks or polyfils or having users manually fill in their locations or providing switchers to meet multiple peoples needs. I think in general, erring on the side of touch is the safest and best bet. But sometimes web designers are going to be move adventurous and I think the more we brainstorm ways to support that, the better!

regarding IE11 and aria-haspopup, I actually stand corrected. It seems that the feature had been dropped only in early versions, but it eventually made it back into IE11 final. (hat tip to Christof for pointing this out to me on Twitter). See MSDN Hover touch support).aspx

Very good article, although I’m not sure I like the idea of choosing input… there must be a nicer way by detecting the input device?

What a great article – thank you, Jenn.
I love working with hovers – was a sad day when I realised that touch screens came along and changed the game. Great links and examples.

And thanks for your comment, Patrick ~ very useful :)

On a few of my sites I’ve designed the menus to respond to both hovers and clicks (including touches). So the menu will open and close on mouseover/mouseout, respectively, but also toggles on click. Then you can save yourself the trouble of designing extra pages that duplicate the navigation.

Anyone remember when it was best practice to include a little arrow to indicate that the navigation element had a drop down? I’ve done this on one site and was able to add touch events that mobile users access the navigation that was enabled based on hover. Wasn’t THAT hard …

I cannot believe I never heard about the aria-haspopup attribute!

Some proclaim the importance of content for good reason. Content is what users are seeking. If you’ve got it and it’s really good, excellent! If you have it and it’s just on par with others, then decorative flourishes and visual images might convince users that yours is the go to source. But if you’re content is no good, then no amount of visual flourish will convince users otherwise.

Some encourage methods like mobile first also for good reason as well. Users are aggressively using mobile or non-desktop devices to access the web at a rapid rate. There will be a point in the future where the desktop web user will be in the minority. The web experience is officially in the process of being disrupted. The music industry was disrupted by MP3s. The movie industry is getting disrupted by things like UltraViolet. Both industries initially reacted by rejecting the disruption. We knew that would’t work.

We should avoid rejecting the web disruption. There are new constraints to be considered, but constraints can be effective tool for creativity. It’ll force us to realize new and better UI conventions, that I’m certain of.