Studio allows you to create dedicated variants of your experience for desktop, tablet, and mobile viewing. This feature will enable you to create completely separate instances of the same experience for varying device types (i.e., desktop and mobile). The benefit of using multiple variants is that they allow more design flexibility for each dedicated layout.
For example, you may want shorter header text on your mobile layout than on your desktop. Or, you may want to use a tab menu on desktop but flip cards on mobile to display the same content.
You can add, remove, resize, or hide content on the canvas without worrying about altering the other layout variants. Hence referring to them as completely separate instances of the same design.
How to create a mobile layout variant:
Before creating a mobile variant, ensure your desktop design is complete. Doing so will make editing the new variant more efficient; additional information in the sections below.
Once you're desktop variant is complete:
Navigate to the Layouts section in the center of the top bar of Studio
Select the Tablet or Mobile layout icon
Select the "Customize layout" option from the Mobile (or Tablet) Layout pop-up window
After selecting a new variant, Studio will automatically open its view. Here, you'll notice the canvas is sized to the default dimensions for the selected variant, but the content is still formatted based on the desktop variant. Next, resize and restructure the content to fit the canvas dimensions.
Important: On Hover interactions are incompatible with mobile variants; they'll need to be updated to On Click or On View for mobile viewing. A red dot will flag all On Hover interactions in the Layers Panel of your mobile variant. To learn more about mobile design best practices in Studio, click here.
To switch between variants, select the desired variant icon from the Layouts section of the Studio top bar.
Editing content across variants:
When editing and updating content across variants, there are three types of content to consider:
Synced content
Standard content
Synced objects
Though each type of content is created the same way within Studio, they each update differently when used across layout variants.
Synced content
Synced content updates across all variants when updated. Synced content is designated by an orange binding box when selected on the canvas. Specific asset types that can sync updates across variants include:
Textboxes
Images
Videos
By default, the above asset types are set as synced content; however, if you don't want a selected asset's edits to sync across variants, you can untoggle the setting using the orange "Sync Content" toggle in the Design Panel. Doing so will change the selected asset's binding box to blue, indicating it is no longer synced (and is now standard content).
When working with synced content, the following are examples of edits that will sync across variants:
Changes the text within a textbox
Replaced images
Replaced embedded content
Applied interactions
Applied animations
Examples of edits that won't sync across variants include:
Font styles, sizes, or weights
Image dimensions
Opacity, scaling, rotation, or positioning
Visibility
Duplication or deletion
The above examples don't sync across variants to allow for more design flexibility for each variant's canvas size.
Important: Content syncing is only enabled for content added to the initial desktop variant before a new tablet or mobile variant is created. Any new content added after a variant is created can not be synced. Learn more about mobile variant best practices here.
Standard content
Standard content refers to any content on the canvas that isn't synced, indicated by a blue binding box when selected. All edits to standard content are contained within the layout variant in which they are made. So, no changes to standard content will sync across variants, which allows for greater design control per variant.
For example, you can edit the text within a standard textbox on your mobile variant, and that same textbox will remain unchanged on your desktop variant.
Synced objects
Similar to content syncing, synced objects are assets (individual or multiple grouped together) that update across all variants and instances when edited. However, the primary differentiator from synced content is that synced objects don't just pertain to variants. Instead, their updates are also synced across every instance or copy of the object.
For example, you may have the same footer section across multiple pages. If the section is set as a synced object, any update you make will apply to all instances across multiple pages and variants.
Synced objects will have a green binding box when selected on the canvas. Learn more about creating and editing synced objects here.
Editing layout setting:
From the Inspector Panel, you can decide how your layouts are displayed, either based on the device type or the screen width.
Device type
Device Type is the default setting for displaying variants. This option will ensure that your variants will automatically display based on the device type the experience is viewed on (desktop, tablet, mobile), regardless of screen or window dimensions.
There is a separate option for tablet devices to choose the mobile or desktop variants if you haven't created a tablet variant.
To update the tablet device view:
Select the "Canvas" from the Layers Panel
With the Canvas selected, navigate to the "Device Layouts Settings" in the Design Panel
Select the target variant under the "Scale tablet from" dropdown menu
Screen Width
Selecting the Screen Width option will allow you to set "breakpoints" where your experience will switch variants, regardless of the device type.
To select Screen Width:
Select the "Canvas" from the Layers Panel
With the Canvas selected, navigate to the "Device Layouts Settings" in the Design Panel
Select Screen Width from the "Display layout based on" dropdown menu
Using the "Layout switch breakpoints" slider that appeared to set the preferred screen width for switching variants
The recommended width for mobile variants is 800px
Important: Your experience will not automatically switch variants when resizing a browser window; you'll need to refresh your page to update the variant.