Skip navigation
Skip to main content
Design guidelines
Design guidelines

Mobile

Guidelines for designing apps for mobile devices.

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.

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 and test the app.

Test the app on real devices

You can use Chrome DevTools 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:

  1. 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.

  2. Open Canva on a mobile device, either via the browser or with the iOS or Android app.

  3. 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.