Creating Mobile Variants using Adaptive Layouts

In this Lesson, we’ll take a look at how you can easily create different variants of an experience for different device types.

By default, Ceros will scale to fit whatever device your user is viewing the content on, but we also allow our users to tailor the design of their experiences for desktop, tablet, and mobile devices.

When you first create an experience, you will always start with the desktop version – which you can see reflected in the Global Layout window. You typically should finalize this initial design before moving on to any of the other variants – to ensure you’re not duplicating work.  

Once you have finished this initial design, you can choose to generate either a Tablet version or Mobile version to customize. Whichever you choose, you’ll see the entire canvas size is automatically adjusted to tablet or mobile dimensions, however we will not attempt to reflow your assets. This leaves the design control in your hands.

Keep in mind that in some cases, customizing a variant may be as simple as resizing the content, and in other cases you may want to do a complete redesign – it’s up to you to decide what works best for your piece.

To reflow your content, first select all of the assets and manually center them on your canvas. From there you can go in and begin making individual adjustments such as moving around your text, re-stacking elements, and maybe even deleting unnecessary sections. Note that if you select a text object, the selection color will be different. This is because your experience will automatically sync any text changes made between variants to save you time while editing. This is only to the characters themselves, so you can still customize the font styles if necessary (you can also turn off text syncing altogether in the inspector panel).

It’s also critical to make sure you are adjusting any faulty interactions that broke when converting to a touch device variant. You’ll see that any hotspots or objects that have “On Hover” interactions on them will have a red dot next to them in the layers panel. This means that this interaction is broken—since you won’t be able to Hover on a touch device. So make sure to adjust any Hover or rollover interactions for the variants you create.

If you have any questions on creating a mobile or tablet variant or have trouble optimizing your versions, feel free to reach out via the support chat and we’ll be happy to help.