Ready to take your Ceros experience from desktop to mobile? Creating a mobile variant in Studio lets you tailor your content specifically for smaller screens—so your design feels just as thoughtful and engaging, no matter the device!
🔑 Here are some key tips for building an effective mobile variant:
Start with Desktop: When you create your mobile variant, all of the assets from the desktop variant will carry over, so make sure it's just about finished before generating the mobile version. It'll save you time and effort in the long run.
Resize for Mobile: Once you've got your mobile canvas (default width is 800px), it's time to reorganize your content to fit the new size. Add horizontal guides about 40–60px from the edges to keep everything feeling nicely spaced and easy to tap.
Keep Text Easy to Read: Use 44pt for titles, 34pt for subtitles, and at least 24pt for body copy. You can send the experience preview URL to your mobile device to make sure it reads well on a small screen.
Use Synced Content: Text, images, and videos are automatically synced between variants—but keep in mind things like size, font, and positioning aren’t.
Rethink Interactions: On Hover effects don’t work on mobile, so swap them out for On Click or On View. Studio will flag them for you in the Layers Panel with a little red dot.
Don’t Forget the Hidden Stuff: If your design includes hidden layers or content, be sure to unhide and reformat them in the mobile version too!
Optimize Media: To accommodate high pixel density mobile displays, export images at 2X scale from image generation tools (Figma, Illustrator, Photoshop, etc.) before importing them into Studio
Stick to One Column: Mobile screens are small—multiple columns can feel cramped. Go for a clean, single-column layout and adjust the canvas height as needed, section by section.
Designing for mobile in Studio is all about giving your audience the best experience. With a few simple tweaks, you can make your content feel just as polished and interactive on a phone as it does on a desktop!
We'd love to hear any other tips and tricks you have about designing for mobile 🎉