Onboarding processes are essential to let users familiarize with your website/app functionalities as soon as possible. A common user case is the “free trial”: if a user is taking your app for a spin, he’s going to gather as many information as he can in few minutes, before deciding whether your app is worth paying for. You don’t want one of these info to be “how the hell does this work”? The easiest way to improve user experience is to build a simple step-by-step intro tour.
Today we release a handy tour snippet powered by CSS and jQuery, characterized by a user experience that changes according to the device size.
Here is a quick animation that shows the difference between the tour on small devices vs bigger ones:
👋 A new version of this component is available. Download now →.
Creating the structure
The HTML structure is composed by an unordered list: each list item contains a .cd-more-info (step title, brief description and image for mobile version) and a <span> element used to create the dot indicator.
<body>
<button id="cd-tour-trigger">Start tour</button>
<ul class="cd-tour-wrapper">
<li class="cd-single-step">
<span>Step 1</span>
<div class="cd-more-info bottom">
<h2>Step Number 1</h2>
<p><!-- description here --></p>
<img src="img/step-1.png" alt="step 1">
</div>
</li> <!-- .cd-single-step -->
<!-- other steps here -->
</ul> <!-- .cd-tour-wrapper -->
</body>Note that the .cd-nav element (tour navigation visible in each step) is not directly inserted in the html but created using jQuery.
Also, the .cd-app-screen element has been used to create the fake background app, so you can remove it from the html (and the related style) when using it in your live application.
Adding style
On mobile devices, the tour is open as a modal window (with a smooth scale effect achieved adding a CSS3 transition to the scale property of the .cd-single-step list items): each step shows a title, a description and an image representing the feature being displayed. The css for this version is pretty straightforward (you can give a look at the code for more details/comments).
On desktop devices (viewport width bigger than 1100px), we assigned a position to each .cd-single-step list item (we used percentage rather than px so that they preserve their position regardless of the screen size): the <span> element inside each list item is used to create the dot indicator, while the pulse effect is created using the list item ::after pseudo-element and animating its box-shadow.
@media only screen and (min-width: 1100px) {
.cd-single-step {
position: absolute;
border-radius: 50%;
visibility: hidden;
transition: visibility 0s 0.4s;
}
.cd-single-step:nth-of-type(1) {
/* set tour points positions */
bottom: 40%;
right: 30%;
}
/*define here all the other list items position values*/
.cd-single-step > span {
/* dot indicator - visible on desktop version only */
width: 10px;
height: 10px;
background: #ff962c;
transform: scale(0);
transition: transform 0.4s;
/* replace text with background images */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.cd-single-step .cd-more-info {
position: absolute;
opacity: 0;
transition: opacity 0.4s;
}
.cd-single-step.is-selected {
/* visible step */
visibility: visible;
transition: visibility 0s 0s;
}
.cd-single-step.is-selected > span {
transform: scale(1);
}
.cd-single-step.is-selected::after {
animation: cd-pulse 2s infinite;
animation-delay: 0.5s;
}
.cd-single-step.is-selected .cd-more-info {
opacity: 1;
}
}
@keyframes cd-pulse {
0% {
box-shadow: 0 0 0 0 #ff962c;
}
100% {
box-shadow: 0 0 0 20px rgba(255, 150, 44, 0);
}
}4 different classes have been defined to control the position of the tooltip relative to the dot indicator (.top, .bottom, .left and .right, to be assigned to the .cd-more-info element).
Events handling
We used jQuery to implement the tour navigation functionality (with keyboard, touch swipe and previous/next navigation). Besides, the createNavigation() function has been implemented to create the tour navigation element (.cd-nav) and insert it into the DOM.
