Adaptive Layouts: How to Create Mobile Variants

3 Minute read

Reading Time: 3 minute

When creating content in Ceros, you’ve probably noticed that as you scale your browser, the content will automatically resize to fit your screen. However, there may come a time when you want to further customize how your experience looks across different screen sizes and device types. Enter Adaptive Layouts.

Adaptive Layouts are our answer to the “responsive design” paradox — mainly that most “responsive” platforms completely ignore the design portion of responsive design. With Ceros, we instead embrace the design and put our users back in control of how their experience behaves across different devices — whether that be for desktop, tablet or mobile.

To use the Adaptive Layouts panel to create a variant of your experience for a new device…

  1. First, complete the design of your desktop/global layout version—which is the initial layout when creating a new experience. Typically, we recommend you finalize this design before moving onto any other variants to minimize duplicate work.
  2. Hover over the Adaptive Layouts panel and choose to generate either a Tablet or Mobile version. Whichever you choose, you’ll see that everything you created on your desktop layout will be copied over to the tablet or mobile layout, but Ceros will not attempt to resize or reflow your content. This leaves the design control in your hands.
  3. Now it’s time to customize your variant. Keep in mind that this process may be as simple as resizing the content, or in other cases, you may want to do a complete redesign. It’s up to you to decide what works best for your piece.
  4. When you’ve finished your redesign, simply hit publish and we’ll take care of the rest. Now when someone visits your experience, they’ll get the appropriately designed version for the device they are on.

Some key things to remember:

  • Your experience will automatically sync any text changes made between your variants to save you time while editing. This only includes changes to the characters themselves, not font styles or location. You can turn off text syncing at any time in the design tab of the inspector panel.
  • Hover interactions will not work on a touch screen—so be sure to adjust any hover triggers for your mobile experiences. Ceros will identify these faulty interactions with a red dot in the layers panel.
  • By default, Ceros will detect the device your user is coming from and serve up the correct variant that way, but you also have the option to have the experiences switch by breakpoint. Toggle the gear icon in the global layouts panel to detect based on “Screen Width” or “Device Type”.
  • And lastly, before publishing, remember that you can test your experience on various devices by selecting a particular device type in the preview pane, or by sending the preview URL to your mobile or tablet device.

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.

Was this helpful?

5 1
5 out of 6 people found this helpful