In this guide:
Is Ceros Responsive?
When creating content in Ceros, you may be wondering - is Ceros responsive? Will my content restack as I scale my browser? The short answer is no. By design - Ceros is not responsive.
The fundamental difference between responsive vs. adaptive design is that responsive web content is built in a grid system with rows and columns. As these rows & columns shift (by a user scaling their browser to a different size), a responsive page's content will restack and adjust to adapt to the new browser size. However, organizing content into grids and columns can potentially restrict a designer's creativity and ability to create the best possible user experience across different device types and screen sizes.
Our solution was to design Ceros experiences to be adaptive by allowing users to create different device (desktop, tablet, mobile) layouts, providing complete freedom to design what they want for each device view. This means that an experience's aspect ratio and layout will be maintained as you scale your browser down. The browser will not responsively load any device layout variants when it is scaled to a specific grid pixel. Instead, you'll want to refresh the experience at a specific browser size to see those other layout variants, so long as your layout settings are set up to do so - which we'll cover in the next section of this article.
In the example below, take notice of how the (desktop) experience layout's content scales and maintains its aspect ratio as we scale down the browser:
Adjusting Layout settings in the Studio
As we covered in the previous section of this article, a browser will not automatically/responsively load a different device layout variant when it snaps to a specific grid pixel. By leveraging the Studio's layout display settings, however, a different device layout can be served to a user once the browser has been refreshed after scaling it down to a specific screen width breakpoint. Here's how:
- After you've created your different device layout (tablet, mobile) click the Adaptive Layouts button at the top center of the Studio.
- Click the "gear" icon in the dropdown menu that opens to enter the Layout settings.
- Within our Layout settings, change the Display layout based on setting to Screen Width
- You can then specify the layout switch breakpoint as needed to display your layout variants at different grid pixels.
- Once our experience has been published/updated, open the published experience in your browser. Now when we scale down our browser to the layout switch screen breakpoint that we specified in the Layout settings and refresh the browser, we will be served our device layout variant.
For more information on how to create Adaptive Layouts in Ceros, please refer to these resources:
- Adaptive Layouts: How to Create Mobile Variants (Help Center article)
- Creating Mobile Variants Using Adaptive Layouts (Video Lesson series - 3 videos)