Article featured image Content Is Like Water by Stéphanie Walter, licensed CC-BY-SA-3.0

Canvas Mobile Awareness

Thanks to Tom Gibbons, Instructional Designer for eLearning at South Seattle College, for this video demonstrating the differences between the desktop and mobile screen experience of Canvas. It’s a great reminder that the Canvas user interface and layout changes based on the screen size and device you use to access it.

As Tom points out, many students rely on a smartphone for their internet access off-campus. According to Pew Research Center’s report U.S. Smartphone Use in 2015, one -in-five American adults reports either having no high-speed internet access at home other than a smartphone data plan, or having a limited number of ways to get online other than a smartphone. And:

Certain groups of Americans rely on smartphones for online access at elevated levels, in particular:

  • Younger adults — 15% of Americans ages 18-29 are heavily dependent on a smartphone for online access.
  • Those with low household incomes and levels of educational attainment — Some 13% of Americans with an annual household income of less than $30,000 per year are smartphone-dependent. Just 1% of Americans from households earning more than $75,000 per year rely on their smartphones to a similar degree for online access.
  • Non-whites — 12% of African Americans and 13% of Latinos are smartphone-dependent, compared with 4% of whites.

Your students are using mobile devices to engage in their learning experience. And you can support them by making your Canvas course mobile-friendly.

Canvas Mobile-Friendliness Checklist

These tips come from a 30-minute CanvasLIVE Mobile Series webinar: Just-in-Time Design Checklist (2015) presented by Ryan Seilhamer.

  1. Use Text Headers for Module Organization

    Indents are not supported on the Canvas mobile app. Since smartphones have narrow screens, indented content would be truncated and difficult to read.

    Left: Desktop view with indents in a module; Right: indents disappear in mobile view

    Instead, you can use text headers within modules to organize the module content. This is much easier to read on mobile screens.

    Left: Desktop view with text headers in a module; Right: indents facilitate ease of module navigation in mobile view
  2. Chunk Content into Smaller Sections

    Ideally, chunk content into segments a student can get through in 5-10 minutes. Think about mobile use of Canvas as something students do in between other tasks. They need to be able to easily pick up where they left off, and this is best accomplished in small bits.

  3. Limit Use of Tables for Content Layout

    Tables are fine for tabular data, like a statistics table. But table layouts may not render the same in the Canvas mobile app. At minimum, double-check your tables using the mobile app to make sure they look okay.

    Left: mobile view showing images in a table – the size has been reduced so the table will fit the screen, and images are tiny; Right: desktop view showing images in a table
  4. Display Content in Canvas Pages Instead of Word or PDF Files

    Canvas Pages provide the a much better mobile experience. With Word files, mobile users have to zoom in to enlarge text so it is readable. With PDF files, mobile users can’t zoom in at all, making content difficult or impossible to read.

    Left:mobile view of a Word file; Center: mobile view of a PDF; Right: mobile view of a Canvas Page
  5.  Keep Uploaded Files Sizes Under 30MB

    Be mindful of the file size of images you upload into Canvas. Mobile devices use varied data transfer speeds and may be much slower and less reliable than Wi-Fi. And data plan charges may be incurred for large file downloads.

  6. Use Mobile-Friendly Media Types, Avoid Flash and Java

    • MP3 audio files and MP4 video files are compatible with mobile devices
    • the Canvas media recording and upload tools inside the Rich Content Editor are mobile optimized
    • SoundCloud, YouTube and Vimeo are good sources of mobile-optimized audio and videos
    • HTML5 media is the best alternative to Flash and Java for games

    Often, a mobile device will display nothing when it encounters a media type it doesn’t support. Also, some video producers restrict their video from mobile playback. So it’s always good to double-check whether media displays in mobile view. You can also include a link to access the media outside of Canvas.

    Left: an interactive Flash game fails to render in mobile view; Right: a certain video fails to load in mobile view (but in this case YouTube provides a link for viewing)
  7. Inform Students When Content Isn’t Mobile-Friendly

    It’s not always possible to use mobile-friendly content. So when you can’t, inform students about alternative means for accessing the content. Then at least they’ll know why they aren’t seeing it, and to go to a desktop computer.

    Examples of informing users of how to access content that isn’t mobile-friendly
  8. In Prompts, Reference Canvas Tools, Not Location

    Be mindful of directing students to specific buttons or icons in the desktop interface. These items may change or be unavailable in the Canvas mobile app interface. Instead, refer to course tools such as Assignments, Quizzes, Announcements, etc.

    Left: content contains reference to “Submit Assignment” button, but in mobile interface it is a “Submission” tab; Right: content says to click “Next” button, but Canvas mobile app doesn’t support previous/next module navigation

How Mobile-Friendly Is Your Course?

Ryan Seilhamer created a Canvas Mobile App Course Report hosted by University of Central Florida. You can review a course for yourself, or for someone else (opting for someone else activates text boxes where you can note specific feedback). After answering the questions, you’ll receive a mobile-friendly course grade. Bookmark this form and review your courses periodically:

If you just want to review a specific module of your own course, you can do it yourself by installing the Canvas app on your own mobile device. Check out our video tutorial on how to install the Canvas app.

If you don’t own a mobile device, you can make an appointment with one of the CTLE staff and we can help you log into your course on an iPad to check the mobile-friendliness of your Canvas course. Email us at


Shared by: