Unleash the full power of your creativity with the seamless integration of your MarkUp.io and Ceros Studio accounts!
Logging in is a breeze; when signing up to MarkUp.io, just use the same email you registered for Ceros Studio with.
Once you've signed up, you'll be prompted to link both accounts together. Simply enter your full name, and voila! You can also use the same password you have for your Ceros Studio account, and you're all set to bring your ideas to life.
Uploading your Ceros Studio experience into MarkUp.io is simple:
Click ‘Publish’ on your experience within Ceros Studio.
Copy the published URL link and paste it into MarkUp.io to create a Website MarkUp.
Open the MarkUp and start commenting!
Viewing Experience in MarkUp.io
Whenever you mark up an experience, you'll be able to preview different screen sizes in MarkUp.io. This is done by clicking the device selector icon in your screen's lower left-hand corner while editing a project.
Remember: Studio experiences will show different layouts based on the device being used. Therefore, selecting another device will shrink the viewable area but will still show it on the desktop version.
That said, here are a couple of easy ways to mark up each Studio layout:
1. Ceros Preview Links
The first option would be to create separate MarkUps 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 will be generated and available within your browser's address bar.
If you’re 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 URL below.
After generating a preview link, you can then use it to create a new MarkUp. If you create a new MarkUp using a mobile preview link, 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 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 option one would require a separate MarkUp for each device type, the second option lets you use one URL to create a single MarkUp so you can 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’ll get an option to change how 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 dimensions for desktop, tablet, and mobile layouts, but the default is as follows:
Desktop = 1280px wide and above
Tablet = 800px - 1280 px wide
Mobile = anything below 800 px wide
Please note: 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. You will then be able to use the device selector to view and comment on each layout within that one project.