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.
Note: Design assets outside of the Studio at 2x to accommodate for retina-dense screens.
Laptop/Desktop
Canvas Size: 1280 x 720
Photoshop Design Size (2x): 2560 x 1440
Smartphone (Portrait)
Canvas Size: 540 x 960
Photoshop Design Size (2x): 1080 x 1920
Tablet (Landscape)
Canvas Size: 768 x 1024
Photoshop Design Size (2x): 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 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, the experience will stretch to the width of the device and will scale the height proportionately.
To learn even more about experience sizes, check out this article.