One of Canva's goals is to empower the world to design on every device. This means, where practical, apps should be designed to work well on both desktop and mobile devices.
Support the required operating systems
At a minimum, Canva expects apps to support the following versions of mobile operating systems:
- iOS 12
- Android 6.0
To confirm if these browsers support a feature, visit caniuse.com(opens in a new tab or window).
An example of a useful feature that is not available in iOS 12 is OffscreenCanvas.
Optimize interactions
It's easy to be precise with a desktop computer and a mouse, but many users interact with a touchscreen using their finger. Find a balance that works well across a range of hardware.
Handle low-power mode
If a user's device enters low-power mode, it affects the capabilities of the app. For example, iOS throttles the requestAnimationFrame method.
To confirm how your app behaves in low-power mode, enable the mode(opens in a new tab or window) and test the app.
Test the app on real devices
You can use Chrome DevTools(opens in a new tab or window) to simulate different resolutions and devices, but ideally, you should test the app on actual hardware, as certain nuances aren't captured in simulations.
To test an app on a real device:
-
Set up, configure, and connect the app via the Developer Portal. This is most easily done on a desktop device, because the Developer Portal is not responsive on mobile.
To test your app on a real mobile device, you can't use a localhost development URL for the app's Development URL. You must upload the app's JavaScript bundle via the App source field. To learn more, see Previewing apps and Bundling apps.
-
Open Canva on a mobile device, either via the browser or with the iOS(opens in a new tab or window) or Android(opens in a new tab or window) app.
-
Open the draft version of the app via the Apps tab.
Consider content "below the fold"
On mobile devices, apps have limited vertical space. As a result, some of the app's content may appear "below the fold" — that is, it might not be visible without scrolling.
This can be a problem when a user can make a choice — for example, checking a checkbox — that affects the content rendered by the app. If the affected content appears below the fold, the user may not see the change, and the app may appear unresponsive.
An alternative is to split multi-step processes across separate screens. Then, when a user makes a choice, update the entire screen to show the next step. This makes the impact of the user's action much more obvious.