Ceros experiences are viewable across desktops, tablets, and smartphones. But to ensure the best user experience possible, we recommend you size your canvas to the device it’s intended for. Below are our recommended canvas dimensions for the different devices.
Reminder: Design assets outside the studio at 2x to accommodate for retina dense screens.
|Device||Ceros Canvas Size||Photoshop Design Size (2x)|
|Laptop/Desktop||1280 x 720||2560 x 1440|
|Smartphone Portrait||540 x 960||1080 x 1920|
|Tablet Landscape||768 x 1024||1536 x 2048|
When creating your device variants from the Global Layouts panel, your canvas sizes will default to our recommended width; however, you are free to adjust the dimensions to best accommodate your particular experience.
Check out MyDevice.io for a more complete list of specific device sizes.
Actual Size vs. Pixel Count
Even though some smartphones have the same resolution as a desktop monitor, the screen sizes are clearly different. That’s because your phone squeezes in more pixels for every inch on the screen.
When designing for mobile, be sure to increase the font and button sizes so your visitors can easily read and tap through your content.
Fold Lines on Scrolling Pages
All the content above the fold line on a long scrolling page will fit vertically within a browser window. Everything below that line will be seen when your visitor scrolls.
The exception to this rule is when the fold line is shorter than the device's actual height. In this case, Ceros will stretch to the width of the device and will scale the height proportionately.
To learn even more about Ceros Experience sizes, check out this article.