When creating your mobile variant from your desktop layout, there is no one-size-fits-all approach—but the tips and tricks below will help keep you on the right track!
Key Takeaways
The default width in Studio will be set to 800px for mobile and 1024px for tablet, this is what we typically recommend for each
The height should be ~2X the original height of the desktop experience (adjust as needed)
Add additional On Click interactions to any On Hover hotspots – hovers don’t work on mobile
Ensure body fonts are size 18pt and above (see experience below)
Avoid “light” and “thin” weight fonts as they may not render well on mobile
Autoplay videos are not always supported on mobile browsers. Mobile Safari and mobile Chrome currently support autoplay
Ensure hotspots are at minimum 60px x 60px on mobile
Getting Organized
Once your desktop experience is 99% finished, navigate to the Layouts panel and select Mobile to create a copy of the experience to optimize for mobile.
Setting up your Canvas
The default size we recommend is 800 px wide for mobile and 1024 px wide for tablet. When creating your mobile or tablet variant, these widths will be set for you automatically.
The mobile or tablet variant height will typically be about double the height of the desktop version, but this is something you can adjust at any point.
Reminder: we automatically double the size of your canvas to accommodate for pixel-dense retina screens. So whenever you are designing outside of the studio, be sure to create your assets at 2X their intended size in the Studio. e.g. 200px x 200px in Photoshop = 100px x 100px in the Studio.
The next and final step before moving on to the actual assets is to take note of which objects and folders are currently marked as visible to ensure you can return to this state when you’re done manipulating the assets. Toggle on Show outside canvas inside the View dropdown menu in Studio to ensure you are not missing any objects.
Finally, ensure all of your objects and folders are unhidden and unlocked. This will make it easier to see the entirety of your canvas and ensure no objects are left behind.
Tip: add DEFAULT to the end of each folder/group or object name that is visible by default for easier identification later.
Manipulating and Resizing Your Assets
To make the process easier, we recommend starting from the bottom of your canvas and working your way up. This way you are only moving a small number of assets at once which will ultimately speed up the process.
Tip: when selecting objects use CMD + Click (SHIFT/CTRL + Click for PC) to add an object or remove an already selected object from the group selection.
Once you reach the bottom of the canvas, you can begin resizing the objects to better fit the smaller-width canvas. Holding Shift during resizing will ensure the proportions are constrained. As you resize images on the canvas, we will automatically generate a new copy of that image to save space. We create image variants when you resize in the studio for JPG/JPEG, PNG, and BMP images, variants are not created for SVG or GIF files, so be sure to resize outside of the studio to save on experience weight.
Now that you have resized and spaced those objects, simply grab the next bottom-most assets and continue working your way up. You can also load up a preview at this point to ensure the look and feel you’re going for translates well on mobile. As you finish spacing items out, you may need to add or remove some canvas, however, the double height serves as a great starting point.
Tip: To move all objects at once use CMD + OPT + A (CTRL + ALT + A for PC) to select all objects on the canvas. Then simply drag them to their designated area on the Canvas.
Mobile Text Sizes
Choosing the correct text sizes to use in a mobile experience can sometimes take a bit of guessing and checking. This is why we created the experience below to demonstrate how various text sizes render on mobile devices. Be sure to view this demo on a mobile device for the best experience.
Important Tips
Although the above tips will get you 75% of the way there, there are a few additional areas to consider when working on a mobile version.
Choose a text that is appropriately sized for mobile devices. We recommend size 18pt as the minimum text size for the body copy on a mobile experience. We also recommend using even-numbered fonts as they render better on smaller screens.
Hovers will not work on mobile since there is no way of hovering over an object. Ensure all interactions have On Click or On View triggers for your mobile experience.
Autoplay videos are currently supported on select mobile browsers like Safari and Chrome. Much like for desktop, you can require the user to click to play a video or show a poster image if the browser does not support autoplay videos. Additionally, Android and Safari handle mobile videos differently. On Safari, videos will automatically scale to fill the entire screen, whereas on Android the video may play inline with the option to scale fullscreen.
Ensure hotspots are significantly larger for mobile than they are for desktop. We recommend the smallest hotspot be no less than 60px x 60px for the best user experience. Fingers are much less precise than mouse pointers.
You probably can’t and definitely shouldn’t try and show all of the desktop content on a mobile device. Ensure your copy and chosen elements serve a purpose and are as concise as possible. You can also explore including carousels and creating multi-page experiences to break up content better.
When working from a template experience, you may find a mobile layout has already been created. If you would prefer to start fresh with your mobile design, you can delete the template's existing mobile layout in the Layouts panel at the top of Studio. With the panel open, hover over the Mobile option and click the trash can icon on the right to delete the layout.
Keyboard Shortcuts to Remember
CMD + Click Add/remove object from selection (SHIFT/CTRL + Click for PC)
CMD + +/- Zoom canvas in or out (CTRL +/- for PC)
SPACE Hold to pan around the canvas (same for PC)
SHIFT Lock movement axis and preserve proportions (same for PC)
CMD + OPT + A Select all objects (CTRL + ALT + A)
OPT + CMD + C/V Copy/Paste animations (Alt + CTRL + C/V for PC)
Click on the Help button in the Studio for a list of our keyboard shortcuts and access to our Help Center and Video Lessons.