The prevalence of mobile screens which rely on finger actions instead of mouse actions has created a bit of culture shock among seasoned Internet developers and designers alike. We, well they, can’t seem to cut that “hover” umbilical, and mobile device users are still faced with negotiating a “light” tap vs a “hard” tap (if they even have that option) to access design elements only available on hover.
If I had my way, I’d do away completely with hover effects in all websites. They are landmines for the mouse-enabled, and elusive for the finger-enabled. However, the ever-pressing need to add hover effects persists despite my most sincere arguments against it.
Project meetings with both clients and designers inevitably come to a point of discussion on this topic. The arguments (most of them valid) sway back and forth across the table as if suspended on a pendulum. I say hover effects are out-dated and have outlived their usefulness. They say hover effects are still the expected behavior on things like menus and links, even if it’s just a little opacity change, it’s still expected.
How will that hover effect behave with no mouse?
It’s at this point that I bring out the big guns. “There is no hover on mobile devices.” I have said this more times than I can count on all of my appendages, and I would shout it from the mountaintops if it were socially acceptable to do so. There is no hover! All those beautiful hover effects the designers are already dreaming about will be rendered absolutely useless for half of their user base.
They look at me like I’ve just said a curse word or something. There is silence across the table as what I just said sinks in. I break the silence with a simple question directed at the designer across the table, “How will that hover effect behave with no mouse?” They are dumbfounded. Well, maybe not dumbfounded, but still it’s a fact that they hadn’t considered.
StatCounter Global Stats found that mobile and tablet devices accounted for 51.3 percent of worldwide internet usage in October , compared to 48.7 percent via desktop – zdnet.com
The discussion continues, the designers remind me that hover effects are still viable, and they’ll “think of something” for the mobile “version” of their design. I make a note in my book to expect follow-up discussions on how other people “handle” not having hover effects on mobile devices.
I admit, it is hard to untether from the “cool” effects that can be created on hover. I sit at a desktop all day, so I have the pleasure of enjoying all the “coolness” of the expanded effects of a full desktop size. I even find that I have to remind myself every so often while in an expanded responsive view in Chrome Developer Tools, that my hovers won’t work. It’s a bit cathartic.
Happy coding, and remember, there is no hover!
Cheryl Velez, Grumpy Bunny Dev