Skip to main content

Creating Desktop & Mobile Variants in the Triptease Messages Platform

Learn to design and customize separate desktop and mobile versions of messages in Triptease for optimal performance

Updated over a week ago

TL;DR

  • You can design separate variants of each message for desktop and mobile.

  • This ensures optimal layout, readability, and performance across devices.

  • You can also sync variant changes - for example, if you make a change to the desktop version, the mobile one will be updated.

  • Want your message to appear on just one device? You can choose Desktop only or Mobile only from the Settings tab.


When to Use It

Use desktop and mobile variants when:

  • You want to optimize font size, image scale, or placement per device

  • You're targeting guests based on device type


How It Works

Each message in the Triptease Messages Platform can be customized separately for desktop and mobile.

When you:

  • Create a new message, both variants are generated by default

  • Want to use the same design for desktop and mobile without recreating it from scratch - just go to the Settings tab and click Sync

  • Edit the desktop layout, it does not automatically update the mobile one - unless sync is turned on

  • Switch between views using the toggle at the top right of the editor

  • Want the message to appear on only one device - select Desktop only or Mobile only from the Settings tab


Step-by-Step Instructions

1. Open the Creative Builder

Navigate to your message from within a campaign and click the pencil icon.


2. Choose Which Device to Display your Message

In the Settings tab, choose whether the message appears on:

  • All devices (default)

  • Desktop only

  • Mobile only


2a. Sync Variants (Optional)

If you want to use the same layout across both desktop and mobile:

  • Go to the Settings tab

  • Turn on the Sync devices toggle

Now, changes made in one variant will automatically apply to the other.


3. Select a Device View

Use the toggle in the top toolbar to switch between Desktop and Mobile.

Important: Changes made in one view won’t carry over to the other unless sync is enabled. Edit each variant individually if syncing is off.


4. Customize Each Device Variant

  • Reposition or resize blocks as needed

  • Adjust padding, alignment, and font sizes for better mobile UX

  • Delete blocks on one view if they aren’t needed (e.g., large images on mobile)


Pro Tips

  • Use simpler layouts on mobile (single column, stacked blocks)

  • Preview both views before publishing

  • Don’t forget to translate each variant if you’re using multi-language support

  • Syncing is ideal when you want to maintain the same structure across both views — just tweak the content once


FAQs / Troubleshooting

Q: Can I design just one variant and have it apply to both?

A: Yes! Enable the Sync toggle in the Settings tab to mirror changes across both variants.

Q: How do I make the message show on just mobile or just desktop?

A: Head to the Settings tab and select either Mobile only or Desktop only under the Devices section.

Did this answer your question?