How to design tours for mobile web

A lot of web applications have their own responsive mobile version. Not only is the UI typically different with there being much less space on the screen, it's also possible the elements on the mobile version of the editor will require different CSS selectors. Therefore, in most applications its best to design a different tour for the mobile version.

Segmenting tours based on device type

1. Go to the tour detail by clicking on the tour name in the tours list. 
2. Find the Display for section and click Custom Rules
3. In this section, click on the Add condition and then select Device type
4. Select the is operator and select Mobile

Now the tour is ready to be displayed only on the mobile version.
 

We consider the device to be mobile when the viewport width is lower than 768px.

Designing the tour

We recommend using the built-in Chrome DevTools device emulation mode. It will allow you to view your application as it would appear on a real mobile device.

1. When the editor is open, open Chrome DevTools. There are several ways:
   1. Press F12
   2. Ctrl/Command + Shift/Option + I
   3. Right-click somewhere in the web application and click Inspect
2. In DevTools, click on the Toggle device emulation button. It is the second button on the top left
   

Now, the device emulation mode should be on. You should see something like this:

If the editor is taking up too much of the viewport, select Responsive from the Dimensions dropdown on the top and adjust the size of the emulated viewport.