Web Depot: Tackling Tours Across Multiple Devices

Stephen Yagielowicz

According to developer Sebastiano Guerriero, Product Tour is a CSS and jQuery powered responsive tour snippet, providing a systematic guide to help users understand how to use a website, as an easy way to improve the user experience, which is a particularly useful tool for offering a free trial, subscription or product up-sell.

“If a user is taking your app [or site] for a spin, he’s going to gather as much information as he can in few minutes, before deciding whether it is worth paying for,” Guerriero explains. “You don’t want one of his questions to be ‘how the hell does this work?’”

Product Tour creates an HTML structure composed of an unordered list, where each list item contains a step title, brief description and an image for the mobile version, along with an automatically generated used to create the tour navigation, which works via keyboard, touch swipe and previous/next links for flexibility.