3 Alternatives for Hover Effects on Mobile Devices

Jamie Read more October 1, 2018

Hover has been used on websites for years as a way to provide a snippet of information to visitors without triggering an action. With smartphones and tablets gradually taking over the internet, we have to give them increased attention when designing a website. As touchscreens can’t handle hover, we need to look at alternatives to hover effects. If you’re setting up your own website or don’t have the resources to employ a professional web designer, this tutorial is for you.

3 Alternatives for Hover Effects on Mobile Devices

You can manage hover effects with touchscreens but it can be a little awkward. You may be better off designing them out altogether and using something else entirely. If you’re set on using them on your desktop site, you generally have three alternatives to hover effects on mobile websites:

Remove them altogether and replace them with the primary action.
Add a secondary menu where you can either tap once for the hover effect and once more for the primary action.
Place the hover information on its own page.

All will work well on touchscreens and desktops but will require some design tweaks to implement within an existing design. You can work around it with JavaScript or clever jQuery code too if you have the skills but if you’re trying to figure it all our yourself, you may be better off using design alternatives than code. If you want to explore code alternatives for hover effects, visit this page.

Remove hover effects from your design

Unless you can employ a freelance web designer to help you out, you may be better off removing hover effects altogether. Sure they look neat and can offer useful supplementary information but there are always other ways to achieve the same effect.

You could retain the menu action as the primary action and include the supplementary information elsewhere on the page. You could use breakout boxes, popups, increase the descriptor content for the point you’re trying to make or something else. If you don’t have the skills to implement jQuery, this is probably the simplest option.

Add a secondary menu

A secondary menu includes the first tap which would simulate a hover effect. You could include the information within the menu and show a second menu within the same element. That second menu acts as the actual selection as it would happen on a desktop. The first press simulates the hover of a mouse and the second press simulates the user taking the primary action.

This is a neat alternative to hover effects but is constrained by screen size and limits the amount of information you can add to your effect. Hover effects are limited by their nature but are more limited on mobile by the screen real estate you’re dealing with. If you really want to include supplementary data in a non-standard way, this could be it.

Place the hover information on its own page

Perhaps an easier option would be to include the hover information within its own page with a text link. This simplifies your menu and keeps navigation straightforward. Hyperlinking works across devices and you get an extra page for site size and SEO. The downside is that you will have to increase the supplemental content by at least 300 words or so to make it work.

As long as you can pad the information carefully enough so it reads well and adds value to the reader, I personally think this is the best alternative. Deciding where to place those links to the supplemental data is up to you and will depend on your design but extra pages gives you an extra opportunity to add calls to action, to add your phone number, email address and any extra information that could be used to make a sale.

Staying with hover

If you want to use some kind of hover effect on your main website, you are going to need to work it into your mobile site, or the mobile version at least. There are toggle menu alternatives or JavaScript solutions but they will require an expert to implement. This page discusses your alternatives should you want to explore them further.

One of the easiest traps to fall into when you’re starting out on your own or building your first website is designing for yourself and not your audience. You certainly have to design something you like, but when considering usability you have to prioritize the audience. You also have to take into account the devices they will use and the way they are most likely to engage best with your website.

If your audience is young, they will use mobile. If they use mobile, hover effects and other design options like it are not your best option.