Marking Up Ceros Layouts

MarkUp is a great tool to share feedback with designers who build experiences within Ceros Studio! 

When building in Ceros, designers have the ability to create separate desktop, tablet and mobile layouts. By default, Ceros will display the appropriate layout on page load based on the type of device being used to view the Ceros experience. This is important to keep in mind when reviewing your Ceros experience in MarkUp since the layout shown will depend on the type of device you are using when working in MarkUp.

More often than not, you'll most likely use a desktop computer when working in MarkUp. This means that, by default, the Ceros experience will show the desktop version of your Ceros experience.

Viewing Experience in MarkUp

Whenever you mark up a project, you'll have the ability to preview different screen sizes in MarkUp. This is done by clicking the device selector icon in the lower left-hand corner of your screen while editing a given project.

It's important to keep in mind that because Ceros experiences show different layouts based on the device being used, selecting a different device will simply shrink the viewable area, but will still show the desktop version. That said, there are a couple ways that you can easily mark up each Ceros layout.

1. Ceros Preview Links

The first option would be to create separate MarkUp projects using device-specific Ceros preview links. Whenever you preview a Ceros experience, the URL in your address bar will be specific to the layout you were editing when you clicked the preview button.

So if you're editing a desktop layout when you click preview, a desktop preview link like the one below will be generated and available within your browser's address bar.

https://support.preview.ceros.com/preview-example/page/page-61e877cf4b731

If you are editing a mobile layout when you click the preview button, a mobile preview link like the one below will be generated instead. Note the inclusion of the word "mobile" within the below URL.

https://support.preview.ceros.com/preview-example/layout/mobile/page/page-61e877cf4b731

After generating a preview link, you can then use it to create a new MarkUp project. If you create a new MarkUp project using a mobile preview link, for example, the MarkUp preview will show the mobile version of your Ceros experience for you to mark up.

You'll notice that it will display in the full screen by default, but you can use the MarkUp device selector to shrink the viewable area to the size of a mobile device. 

2. Ceros Layout Settings

Whereas the first option would require a separate MarkUp project for each device type, the second option would allow you to use one URL to create a single MarkUp project that allows you to comment on each layout.

When editing your Ceros experience, you will see a gear icon near the device layout icons. When you click the gear icon, you will be given an option to change the way each layout is displayed. By default, it will display each layout based on the device type, but you can change this setting to the "screen width" option instead. 

You can customize the breakpoints for desktop, tablet and mobile layouts, but the default breakpoints for each are as follows:

• Desktop = 1280px wide and above
• Tablet = 800px - 1280 px wide
• Mobile = anything below 800 px wide

Please note that if you do not create a tablet layout, the default breakpoint will be 800 px. Any screen wider than 800 px would show desktop and anything narrower would show mobile.

Once you've configured your Ceros layouts to display based on screen width, you can publish your experience and use the live URL to create a single MarkUp project. You will then be able to use the device selector to view and comment on each layout within that one project.