The default desktop experience size in Ceros is set to 1280 x 720 pixels. This 16:9 aspect ratio is ideal for displaying content on a laptop, however, you can change it to whatever size is best for your design's needs. You can refer to this cheat sheet to help you choose a size that works for your content.
Adjusting the Overall Experience Size
In order to change your overall experience size, select ‘Canvas’ at the top of the Layers panel, and then you’ll see your 'Canvas Settings' populate in the design tab of the Inspector Panel:
The maximum experience size for the fold area is 5120 px wide x 5120 px tall while the minimum experience size is 50 x 50px.
In addition, you can create long scrolling pages within an experience by adjusting the Page Height setting. Individual pages can be up to 100,000 pixels tall at maximum.
Note: Exercise caution when creating experiences that exceed 30,000+ pixels in height, as lengthy experiences can cause loading issues for you and your viewers.
Within the Browser Scaling dropdown menu you can select one of three scaling options: Scale to Fold, Full Width, and No Scaling.
If you choose Scale to Fold, the fold line that you set specifies the amount of content that will appear in the viewport initially. All of the content above the fold line on a long scrolling page will fit vertically in the browser window initially. Everything below that line will be seen when the visitor scrolls.
Full Width will have your experience fill the entire browser window, and No Scaling will not have your experience scale to the browser at all.
Keep in mind in order to accommodate retina screens you should export any assets from Photoshop or another design platform at 2x their intended size in your Ceros experience. This enables the experience to scale up for retina devices without sacrificing clarity.
Scaling Up and Down
Ceros experiences will scale to fit whatever container they are embedded into and will also scale down to whatever screen size they are being viewed on. However, you can optimize your experience for mobile and tablet viewing by creating mobile and tablet variants from the Global Layout panel in the top center section of the studio:
If you are designing for mobile or tablet, the default experience width will be 540 pixels and 768 pixels, respectively. These widths are ideal for viewing Ceros experiences on those devices, but these can be edited directly in the studio as well.
Common Aspect Ratios
- 1024 x 578 (16:9)
- 1024 x 768 (4:3)
- 1020 x 850 (6:5)
- 1024 x 1024 (1:1)
- 1020 x 680 (3:2)
- 1024 x 512 (2:1)
Note: Avoid using extreme ratios such as 111:88. Scaling those can lead to unexpected results by browsers when the math doesn’t add up.
To learn more about the most common screen sizes, check out this article.