In Studio, you can create a mobile variant, or version, of your experience to optimize mobile viewership engagement. While Studio doesn't allow for fully responsive designs, its use of adaptive layouts ensures the correct variant is displayed across device types or set screen widths.
Below are guidelines and best practices for creating a mobile variant of your design.
Understanding Instances
The foundational concept of adaptive layouts is that each variant (desktop, tablet, and mobile) of your experience essentially functions as a separate instance of the design project. So, your edits on one variant won't carry over to the others. Unless, of course, you are utilizing synced content (more details below) or Synced Objects.
The benefits of separate instances are that they allow for greater control and flexibility over the content and layout between variants. For example, you may want to use different header copy for your mobile audience than for your desktop audience. Or, the type of interactions used on desktop don't translate as well to mobile, so you want to exchange them for a more mobile-friendly type.
Adaptive layouts, or separate instances of the same experience per device type, allow you to determine what and how the content on the page is viewed.
Finish Your Desktop Variant First
When generating a mobile variant, Studio copies your desktop layout onto a new, mobile-sized canvas. So, it's crucial to finish your desktop variant before doing so to ensure all your content carries over to the new variant. Per the previous section, any new content added to the page won't sync over to the additional variants; it will have to be manually duplicated. Completing your desktop variant beforehand will save time.
Scale Content for Mobile Viewership
After creating a mobile variant, the first step is to resize and reorganize content to fit the new mobile canvas dimensions.
Canvas Dimensions:
Studio's default mobile canvas width is 800 pixels; we recommend keeping it at that width for an optimal mobile experience. Vertically, your mobile canvas size may differ from its desktop counterpart to appropriately fit the content. So, utilize the canvas adjustment tool while formatting your mobile layout.
Setting Guides:
Utilizing guides will ensure your mobile content has enough padding (or separation) from the edges of the device screen. While the vertical padding will vary between experiences, we recommend setting horizontal guides that are 40px-60px from either canvas's sides. You can think of guides as boundaries; all content should fit within them.
Mobile Text Sizes:
Below is a table with our recommended minimum text size for mobile viewership:
Title
44pt
Sub-title
34pt
Headers
Smaller than titles but larger than body copy to establish a visual hierarchy
Body Copy
24pt
As stated, the above are recommended minimum text sizes. How large the text will be for the above categories will depend on the content volume and your overall page layout. However, ensure that whitespace, font weight, and appropriate line heights are utilized to increase readability. Preview your mobile variant to check readability.
Utilize Synced Content:
When you create a mobile variant, text, images, videos, and embedded objects are toggled on as synced content. So, updates made to one variant will sync across all others. Content syncing can be toggled in the Design tab of the Inspector Panel. Content that has syncing toggled on is indicated by an orange bounding box.
While using content syncing for text and images, it's important to note that the actual content (the words and image file) will sync across variants, but styles and sizes will not, such as:
Font styles, sizes, or weights
Visibility
Duplication or deletion
Don't Forget About Hidden Content:
If your experience includes hidden content, ensure to toggle on its visibility and adapt it for the mobile canvas, along with the rest of the content on the canvas.
Adapting Interactions
On Hover interactions are incompatible with mobile variants; they must be updated to On Click or On View for mobile viewing. A red dot will flag all On Hover interactions in your mobile variant's Layers Panel. Similarly, hover states are incompatible with mobile variants and must be adjusted.
Additional Tips
Autoplaying videos aren't always supported on mobile browsers, so to be safe, turn off the autoplay feature on any video included in your experience
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
To select and move all objects on the canvas at once, use the keyboard shortcut: cmd+opt+A (ctrl+alt+A on PC)
When adapting content for the mobile canvas, work through the layout one section at a time and adjust the canvas as needed
Layout content in a single column; multiple columns on a mobile screen will feel cramped
Video Walkthrough
Taken from the Creating Mobile Designs with Ceros Creative Challenge webinar.