Replicate mobile-specific experiences on desktop effortlessly, and vice versa
Often, we begin by designing an experience specifically for mobile devices, considering the unique context of use.
Although it is possible to create experiences for both desktop and mobile devices, there are several benefits to dividing them into two separate experiences:
- Each device has its unique context and requirements. What may work effectively on a desktop may not translate well to a mobile device due to variations in screen sizes, resolutions, gestures, and overall user experience.
- You may have to adjust parameters like target audiences, pages, or triggers separately for each device during the optimization process. This level of customization would not be achievable if both desktop and mobile experiences were combined into one.
To duplicate experiences without impacting the mobile versions, follow these steps:
Step 1 - Duplicate and rename the experience
- Select the experience you wish to duplicate > click on the three dots on the right > click 'Duplicate'.
- Name the new experience. We recommend specifying the target device with the experience's name for easy retrieval. Once you're done, click 'Duplicate'.
Step 2 - Adjust the 'Devices' parameter
Within the parameters of the experience (on the top right of the editor):
Choose 'Devices' > select the specific device you want this experience duplicated for > click 'Select'.
This guarantees that the experience will exclusively run on the chosen device.
Important!
If you discover that the experience is currently configured for 'All Devices', it is advisable to also tweak the parameters of the original experience. This adjustment helps prevent conflicts between the two experiences.
Step 3 - Adjust or modify the changes
Now it's time to duplicate and adjust the experience's changes as well!
When making a change or adding a Visually widget, it will initially be set for the current Preview window's device and page type. In order to adjust the changes to the new device:
Duplicate each change
For each change, click on the change's options > select 'Duplicate to Desktop' / 'Duplicate to Mobile'.
- This will create a similar change, but set to the current device.
- You may need to re-adjust the position by clicking on the change's options > select 'Replace Position' > set the intended position to make sure it is also visible on the quick preview on the left side of the screen.
Customize the design to suit the specific device
As the original widget may have been designed with a different screen size and layout in mind.
Consider adjusting font sizes, image sizes, and even the overall layout of the widget to ensure it fits seamlessly on the chosen device.
Delete the original change
Click on the original change's options > select 'Delete'.
This step is optional, but it will clean up the editor and make sure you only display the changes affecting the current experience.
Step 4 - QA & Publish
Prior to launching your new experience, it is crucial to conduct a quality assurance (QA) session to ensure that everything is functioning as expected.
Be sure to refer to our Preview & QA guide for further assistance.