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…
- First, complete the design of your Desktop/Global layout, which is the initially displayed layout when creating a new experience. We typically recommend that you finalize this design before moving on to any other variants to minimize duplicate work.
- Hover over the Adaptive Layouts panel and then click to generate either a Tablet or Mobile layout. 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.
- Now it’s time to customize your layout variant. This process may be as simple as resizing the content to fit the new canvas size. In other cases, you may want to do a complete redesign with tablet/mobile users in mind. It’s up to you to decide what works best for your experience.
- When you’ve finished your redesign, simply click the Publish button (or if the experience is already published, click the Update button) and we’ll take care of the rest. Now when someone visits your experience, they’ll be served the respective layout version for the device they are viewing 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 text character contents itself, not font styles or canvas 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 interactions within your mobile layouts. Ceros will identify these faulty interactions with a red dot in the layers panel:
- By default, Ceros will detect the device a user is viewing the experience with and serve up the correct device layout variant, but you also have the option to have the experiences switch by screen width breakpoint. Toggle the gear icon in the global layouts panel to specify layout detection based on “Screen Width” or “Device Type”:
- Lastly, before publishing, remember that you can test your experience on various devices by selecting a particular device type in the preview panel, or by sending the experience's 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 layout variants, feel free to reach out via the support chat and we’ll be happy to help.