Mobile design is no longer just a nice-to-have—it’s a must. With mobile traffic skyrocketing, creating experiences that look and feel great on any device is now a must-have skill for designers. This guide covers Studio’s mobile design best practices, showing you how to turn your desktop experiences into smooth, intuitive mobile variants that keep users hooked.

Here’s what we’ll dive into:

• Adaptive layouts – Leverage Ceros' Adaptive Layouts to create flexible, device-specific designs. Sync text across variants while customizing content for different screen sizes.
• Introduction to mobile – Understand mobile-first design. Prioritize mobile usability, streamline content, and design with mobile traffic in mind.
• Canvas size – Learn how to set the right canvas dimensions and adjust breakpoints for optimal mobile display.
• Restacking content for mobile – Master techniques for restructuring desktop designs, resizing text, and creating intuitive mobile navigation.
• Optimizing for mobile usability – Adapt interactive elements for mobile touchscreens, ensuring your design works seamlessly on real devices.

Let’s get started!

Adaptive layouts panel

Adaptive layouts

The Adaptive Layouts panel lives in the top center corner of Studio, making it easy to manage all three variants of your experience under one admin link.

What are adaptive layouts?

Adaptive Layouts are our solution to the “responsive design” paradox. With Ceros, designers have full control over how their experiences behave across different devices—whether for desktop, tablet, or mobile.

Synced text

Adaptive Layouts lets you sync text across all variants, so updates made in one automatically apply everywhere. But when designing for mobile, you can unsync text to adjust for smaller screens and keep the content concise—without messing with your desktop or tablet versions. This gives you the flexibility to optimize for each device, improving the user experience.

2. Introduction to mobile

The starting line

Starting with mobile in mind sets you up for a smoother design process and helps avoid major rework later. For projects that see high mobile traffic, like those shared through social media or email campaigns, it's smart to prioritize mobile usability right from the start.

Planning for mobile-friendly layouts—like stacking horizontal elements vertically and simplifying complex features—makes it easier to adapt content for smaller screens down the line.

Content prioritization

Mobile users have limited screen space and shorter attention spans, so it's crucial to focus on what matters. Streamline key messages and cut out unnecessary elements to create an engaging experience. For projects with high mobile traffic, designing mobile-first can help optimize usability and keep users engaged from the start.

Some ways to achieve this are:

• Using elements that are easy to transition from a horizontal layout to a vertical layout
• Applying a grid system
• Looking at mobile sites for inspiration for desktop design

Preview, preview, preview

Check the mobile variant frequently during the build. Ceros’ built-in previewer lets you view your design in context, but it’s best to test it on an actual device. Share the preview URL via email or DM and see how updates look in real-time.

3. Canvas size

Resizing for mobile devices

If you’re not thinking about mobile users, you’re losing a significant—and growing—user base. Although there is no one size fits all approach, these tricks will help you get on the right track!

Setting breakpoints for mobile

Breakpoints determine when your layout adjusts from desktop to mobile. Setting them correctly improves readability and user experience. While 800px is a common starting point, breakpoints can range from 800px to 1000px, depending on factors like text size, image clarity, and layout design. For most mobile and tablet views, a canvas width of 800px works well, but feel free to tweak it based on your specific needs.

Testing on different devices

Testing on real devices is key to ensuring your designs work as expected. Send preview links to your mobile device or teammates' devices to check readability, image scaling, and interactivity. Fine-tuning breakpoints and layouts based on real-world testing ensures the best mobile experience for your audience.

Canvas settings

Access your Canvas Settings via the Canvas Tab or the shortcut CMD+SHIFT+A. Here, you can adjust the height and width of your canvas to fit your design goals. Using the Browser Scaling option, you can also set the canvas to scale to the full width of the screen, ensuring a responsive experience for both portrait and landscape orientations.

Canvas adjustment tool

Need to tweak your canvas size? The Canvas Adjustment Tool allows you to easily add or remove space in your canvas. All objects, hotspots, guides, and anchors below the adjusted area will shift accordingly, giving you full control to make quick adjustments as needed.

4. Restacking content for mobile

Restacking for mobile

Converting your desktop variant to a mobile-friendly layout involves “restacking” your content to fit the narrower canvas. Think of this as stacking blocks or Lego pieces vertically to create a streamlined, top-to-bottom flow. This approach ensures users can scroll through content easily without losing context.

Using grid systems

Start with a grid system during desktop design to simplify the restacking process. Organizing content into columns (like 2- or 3-column layouts) makes it easier to rearrange elements into vertical stacks for mobile. Designing with mobile in mind from the start reduces rework and ensures a smoother transition.

Designing for usability and navigation

To craft an effective mobile experience, prioritize simplicity and usability. Tailor your layout to smaller screens while keeping navigation intuitive and user-friendly. Focus on these key elements:

• Touch targets: Increase the size of buttons, icons, and other interactive elements to make them easier to tap with fingers, improving usability and engagement.
• Simplifying content: Streamline complex images, animations, and interactive elements to enhance load times and user experience. Swap detailed animations for static visuals and focus on essential content.
• Optimizing navigation: Resize and rearrange text, images, and assets for better readability and a smoother, distraction-free journey. Highlight key messages and maintain intuitive layouts to guide users seamlessly through your content.

Resizing text for legibility

Make sure your text is easy to read on mobile by adjusting its size accordingly. While synced text updates across variants, mobile layouts might need text size tweaks for better readability. A good rule of thumb is 16-18pt for body text, balancing clarity with design aesthetics.

By following these tips, you can create a mobile experience that’s visually appealing, functional, and user-friendly.

For a useful chart on mobile text sizing, check out the View Ceros Educate Mobile Best Practices article from our Educate team.

Note: Synced text only applies to the plain text inside the box. Style, size, color, etc., will need to be adjusted for each variant.

5. Optimizing for mobile usability

This is a must when creating your mobile variants. Simplifying interactions and reworking complex elements, to be easily accessible on a smaller screen, will help you create a successful variant.

Converting interactions for mobile

Touchscreens don’t support hover functionality, so it’s crucial to adapt those desktop interactions for mobile:

• Cosmetic hovers: For hover effects that only change visuals (e.g., button color), make these changes visible by default or use clear visual cues to indicate the interaction.
• Functional hovers: If hover states reveal additional info, switch these to "on-click" interactions. Add visual indicators like plus icons or arrows to show interactivity and make clickable elements easily recognizable.

Placing key content above the fold

Make sure crucial content—like headlines, calls to action, and key visuals—appears above the fold (the visible area before users scroll). This ensures users can quickly access important messages, minimizing unnecessary scrolling and providing a smoother, more focused mobile experience.

Continuous testing on real devices We've already covered this, but it's worth repeating—testing on real devices is essential to ensure your interactions, layouts, and touch targets perform as expected. The Ceros preview tool is a great starting point, but real-world testing will always catch the nuances that might slip through in previews.

• Preview on devices: Send preview links to your mobile device or team members to check for readability and interaction accuracy.
• Catch usability issues: Testing on real devices uncovers issues that may not show up in previews, ensuring your mobile experience is smooth and seamless.

Adding/editing UI

Mobile variants often need extra design tweaks or interactions:

• Use the Layout Settings Panel (find it via the gear icon in the Global Layout area) to customize how versions appear based on device type or screen width.
• Add any additional elements to improve usability and ensure clear navigation for mobile users.

Once you're ready, publish your design and receive the embed code and a view.ceros link for deployment.

Enhance your Studio expertise with mobile design

Ready to level up your mobile design skills in Studio? Explore these resources to build your expertise:

• How to Create Mobile Variants: Learn the step-by-step process for building effective mobile variants in Ceros.
• Mobile Layouts: Discover best practices for optimizing layouts for mobile experiences.
• Designing Landing Pages for Mobile: Get expert tips on crafting high-converting landing pages tailored for mobile users.

Dive in and take your Studio skills to the next level!