Mobile Best Practices
Mobile Best Practices
When creating a dedicated mobile experience, there are a few easy steps you can take to help simplify the overall process. And although there is no one size fits all approach, the below tips and tricks will help you get on the right track, whether you are copying and manipulating an existing experience or building the experience completely from scratch.
- Include “Mobile” in title and URL
- Set width to 800px, fold to 400px and height to ~2X original height of desktop experience (adjust as needed)
- Design outside studio at 2X intended size to accommodate for retina devices
- Add additional On Click interaction to any Rollover Hotspot – Rollovers don’t work on mobile
- Ensure body fonts are size 24pt and above (see experience below)
- Avoid “light” and “thin” weight fonts as they may not render well on mobile>/li>
- 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
When you make a copy of an existing experience that you are going to convert into a mobile version, ensure you include “Mobile” somewhere in the title to remove all ambiguity. You’ll also want to move any old variants, or out of date experiences, out of your current project folder and into a separate archived project folder. This will ensure your team is always working off of the most up to date experience.
In the spirit of organization, it’s also a good idea to change the URL slug of the experience to include “Mobile” in the name. This will avoid confusion later on when trying to remember what URL points to what. To change the URL, navigate to the settings menu in the upper right corner of the studio and change the “Experience URL.”
Setting up your Canvas
Now we can setup the canvas to get it ready for mobile devices. The default size we recommend (which works great across both phones and tablets) is 800px wide and ~2x the experience’s existing height. This additional height will help accommodate the increased spacing needed for mobile, and can be adjusted at a later time. If you run out of space, simply add additional pixels to the height, and drag all of your content to the bottom. You can also take this opportunity to ensure the fold is around 400px so your content extends to the full width of your mobile device, and is also full screen when viewed in landscape.
Reminder: we automatically double the size of your canvas to accommodate for pixel dense retina screens. So if 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 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 resize 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. Which 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.
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 a 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 on 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 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 Academy.
Set Up your Mobile Redirects
Now that you have both of your experiences set up, you will most likely want to set up a redirect code so your users are automatically sent to the appropriate experience for their device. Take a look at this short Lesson to learn how to set up a Mobile Variant Redirect.