Transcript
In this final part of our three-part series, we’re taking the landing page we just built and adapting it for mobile.
When you're working in Studio, desktop designs are just the beginning, mobile layout variants make it easy to tailor your experience for smaller screens without starting from scratch.
Before we get started, let's go over some basics;
The main concept of adaptive layouts is that each variant (desktop, tablet, or mobile) of your experience, essentially functions as a separate instance of that project. So, your edits on one variant won't carry over to the others. Unless, of course, you are utilizing synced content or Synced Objects.
Synced content updates across all variants when changed. You can tell it’s synced content by an orange bounding box when selected on the canvas.
Synced Objects are very similar to synced content, but the primary difference is that synced objects don't just pertain to variants. Instead, their updates are also synced across every instance or copy of the object. You’ll be able to differentiate by the green bounding box that synced objects have instead of the orange that synced content have.
It’s important to note that 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.
Now that we have a good grasp on the basics, let's put it into practice by adapting this landing page to a mobile variant.
To start, we’ll go to the Layouts menu and select Mobile.
Then, I’ll select “Customize Layout” so I can have full creative control over how my experience looks on mobile devices.
Right away, we’ll begin updating the layout to fit smaller screens by adjusting the size and positioning of our content.
Some of the design choices that look great on a wide desktop experience, don’t translate well into a narrow scrolling mobile experience, so be sure to stay open to adapting things here and there to make the most user friendly experience possible.
As you can see, I’ve repositioned all of my content. To keep things consistent, I’ve added guides 60 pixels from the either edge of the experience to make sure none of my text or buttons crosses over into an area that can get difficult to read or interact with.
I love how the experience is looking, but I’ve quickly run out of canvas height. Instead of selecting the canvas and manually entering the height in pixels, I can simply use the canvas adjustment tool. I’ll select where I want the additional canvas space to start, then where I want it to end, then hit confirm! This process works the same way if I were to want to remove some chunks of canvas as well.
Keep in mind that mobile devices don’t support On Hover interactions. It’d be pretty difficult to “hover” when navigating on a touch screen.
So, If any hover effects exist, Studio will flag them in the Layers panel with this red dot. Simply update those interactions to On Click or On View in the Interact Tab.
Now we can get into the synced content we went over in the beginning of this video. I have this CTA button that’s synced. I can tell by the orange binding box. I can reposition and resize it without affecting my desktop version, but if I change the text within the button to say, “Learn more” instead of “Book Tripp”, that will be applied to both the mobile and the desktop variant. I want to change the button, but I want it to stay the same for desktop, so I’ll simply toggle off Sync Content, and now I can change the text without affecting the desktop variant.
Once everything is laid out, we’ll clean up our layers panel and recheck animations to make sure nothing feels off during scrolling. Subtle fades and slide-ins help guide attention, even on smaller screens.
Now we’ve got a landing page, designed for both desktop and mobile.
Mobile Variants can be a little tricky to get the hang of, so be sure to check out educate.ceros.com, where we have articles going deeper into the process, best practices, and design tips for mobile, tablet, and desktop variants.
If you missed part 1 or 2, be sure to check out how we built the teaser page from a blank canvas in part 1, then transformed it into a landing page in part 2.