How to design tours for mobile web

A lot of web applications have their responsive mobile version. Usually, the UI is different as there is much less space on the screen. Therefore, you may want to design a different tour for the mobile version.

Displaying tours based on a 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 Rules
3. In the Rules, 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 will use the built-in Chrome DevTools device emulation mode. It will allow you to display your application as you would use a real mobile device.

By default, we open the Product Fruits editor in the new window. Chrome doesn't allow the emulation mode in new windows, therefore we have to force Chrome to open the editor in the tab instead.

1. Before clicking on the Editor button, press and hold the Ctrl key (or Command on Mac) and then click on the Editor button. It will force the editor to be opened in a new tab instead of a new window.
2. 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
3. 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 too big, select Responsive from the Dimensions dropdown on the top and adjust the size of the emulated viewport. Then, you should see Minimize button next to the editor panel.