When creating content in Studio, you’ve probably noticed that as you scale your browser, the content will automatically resize to fit your screen. However, there may come a time when you want to further customize how your experience looks across different screen sizes and device types. Enter Adaptive Layouts.
Adaptive Layouts are our answer to the “responsive design” paradox, mainly that most “responsive” platforms completely ignore the design portion of responsive design. With Studio, we instead embrace the design and put our users back in control of how their experience behaves across different devices— whether that be for desktop, tablet, or mobile.
To use the Adaptive Layouts panel to create a variant of your experience for a new device…
First, complete the design of your Desktop/Global layout, which is the initially displayed layout when creating a new experience. We typically recommend that you finalize this design before moving on to any other variants to minimize duplicate work.
Open the Layouts panel in the top center of Studio and then click to generate either a Tablet or Mobile layout. Whichever you choose, you’ll see that everything you created on your desktop layout will be copied over to the tablet or mobile layout, but the Studio will not attempt to resize or reflow your content. This leaves the design control in your hands.
When creating new Tablet and Mobile layout variants:
Tablet layouts will be generated from the layers in the mobile layout if they exist, otherwise, it will use the layers from the desktop layout.
Mobile layouts will be generated from the layers in the tablet layout if they exist, otherwise, it will use the layers from the desktop layout.
Now it’s time to customize your layout variant. This process may be as simple as resizing the content to fit the new canvas size. In other cases, you may want to do a complete redesign with tablet/mobile users in mind. It’s up to you to decide what works best for your experience.
When you’ve finished your redesign, simply click the Publish button (or if the experience is already published, click the Update button) and we’ll take care of the rest. Now when someone visits your experience, they’ll be served the respective layout version for the device they are viewing on.
Some key things to remember:
Everything you've created on your desktop layout will be copied over to the tablet or mobile layout, including naming conventions, folders, groups, animations, and interactions.
Your experience will automatically sync any text changes made between your variants to save you time while editing. This only includes changes to the text character contents itself, not font styles or canvas location. You can turn off text syncing at any time in the Design tab.
Hover interactions will not work on a touch screen, so be sure to adjust any hover interactions within your mobile layouts. The Studio will identify these faulty interactions with a red dot in the layers panel.
By default, an experience will detect the device a user is viewing it with and serve up the correct device layout variant, but you also have the option to have the experiences switch by screen width breakpoint. Toggle the gear icon in the Layouts panel to specify layout detection based on “Screen Width” or “Device Type”.
Lastly, before publishing, remember that you can test your experience on various devices by selecting a particular device type in the preview panel, or by sending the experience's preview URL to your mobile or tablet device.