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 the studio will be set to 540px for mobile and 768px 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 – Rollovers 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 over to the Global 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 540 px wide for mobile and 768 px wide for tablet. These heights will be set for you automatically when creating your mobile or tablet variant.
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 Ceros. e.g. 200px x 200px in Photoshop = 100px x 100px in Ceros.
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 back to this state when you’re done manipulating the assets. Toggle ‘Outside the Canvas’ on in your 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 additional 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 guess and check. 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.
- Rollovers will not work on mobile since there is no way of rolling 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 have the ability to 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. Additionally, you can also explore including carousels and creating multi-page experiences to better break up content.
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’ link in your studio for a list of all of our keyboard shortcuts and access to our Help Center and Video Lessons.