Rollover Blues

Adding interactivity to websites is fun and makes them interesting to use. However, technology keeps moving on and sometimes things that looked cool a few years ago can now look dated. Even worse, they can fail to work!

Have a look at the demo below. If you’re using a computer with a mouse, hovering over the clouds will show you some words. This is called a rollover but, unfortunately, rollovers don’t work on tablets and phones. If you look at these pictures on one of those, you’ll need to click in the right place to see the words and there’s nothing to show you that clicking is a sensible thing to do.

Hover over the clouds to see the possibilities:
clouds Heavens above
clouds Floating away
clouds Cloud nine!

This causes trouble if you’ve used rollovers to reveal important information on your website. For instance, you may have used pictures or symbols as links and rely on rollovers to reveal the words that show where the links lead. Apart from the issues caused by expecting your visitors to pay guessing games, you now have the added problem that tablet and phone users can’t even see that the pictures are links, let alone where they go.

This doesn’t mean that you have to give up rollovers completely – it just means you have to think carefully about how you use them. In the above example, a bit of redesign does the trick. The picture below allows everyone to see the necessary words. A different rollover effect adds interest for anyone with a mouse, but tablet and phone users don’t miss out on anything important.

To see this working effectively, take a look at the website for childen’s author,  Valerie Wilding.  Mouse users can see the cover picture in the corner switch as they rollover the left-hand links. This doesn’t happen on tablets and phones, but those users can still use the site without any problems.

Steve Kimpton


Use our search page to find the right editor, designer or illustrator to help produce your book.