Designing with Mobile in Mind

Students are frequently interacting with our course sites via mobile devices. The mobile platform can change the way your course looks, and the way students interact with the site. Canvas estimated that fall of 2016 almost 50% of students would access their course content via the mobile app. Here are some things to keep in mind when designing your course site to ensure mobile compatibility.

  1. Custom Styles – Some custom styles such as colored boxes and custom styling for horizontal rule (shown below in the image) don’t come across the same in the mobile app. We have both iOS and Android tablets available for viewing your course content in a mobile format.

custom style

  1. Content Chunking – A recent study, at another university, showed the following average time students spent accessing course content using different devices – fourteen minutes, seven seconds on a computer; ten minutes, twenty-two seconds on a tablet; and six minutes, forty-six seconds on a smartphone. This means that content needs to be chunked into small usable pieces. If your course content is extensive on one content page, it can cause what is referred to as the never-ending scroll. This causes users to quickly lose interest and not thoroughly view the content, especially when using a mobile device. Consider breaking the content up by setting your module up like a table of contents, and multiple pages to cover the content. This helps students work through the content in small chunks. If students are only giving you six minutes at a time, they want to be able to have a good stopping and starting point.chunking content
  1. Tables – Tables can be used in many different ways –to show tabular data, such as a course schedule, for design layout, as shown below, etc. Tables do not always convert from a desktop/laptop format to a mobile format easily. You can see from the image below, the mobile format has reduced the images to the size of a small bullet. Instead of using a table format for content, as in this image, how about adding the image with the content listed below it.

tables

  1. File sizes – When you add files to your course site, be mindful of the size of the file. For accessing files from mobile devices, we suggest files that are 30 MB or less, specifically images and videos. If your students are accessing the course content from a mobile device, they may be in and out of mobile service. You will want files that will load quickly for them, and these small sizes help with that.
  1. Media types – While we are talking about media file sizes, we also need to talk about media formats, mainly Flash and Java. Flash and Java formats are not mobile friendly. The mobile app doesn’t always tell them that it is not a supported media type, it may just show a blank screen. Also, some YouTube videos are not mobile friendly. Some video owners have set the video to only be accessed via web browsers. If you are using one of these formats, consider giving the student additional ways to get access the media. This could include a link directly to the YouTube video, as well as embedding it in the course site. If you are including Flash in your course site, make a note to the students in the course site that says that particular portion of the course must be accessed from a desktop or laptop computer. The following formats and platforms are considered mobile friendly media types: HTML5 (replacing flash), MPEG 4, MP3 audio, YouTube, Vimeo, SoundCloud, and the Canvas media upload/record option.
  1. Inform – If you have something that is not mobile compatible, be sure to let your students know that you are aware that it is not available for mobile devices. This is can include quizzes also. If you are using a flash video in the quiz question, the video will not work with mobile devices. Consider adding instructions to the exam asking the students to please arrange to take this exam from a desktop computer.
  1. Student Prompts – Sometimes we add student prompts to our course sites to assist students in how to proceed with their course, for example, “Select submit assignment button above.” In the mobile application, the submit button is not above the description of the assignment, it is on another tab called Submission. Just be sure to double check all of the prompts that are added to your site.
  1. File types – Given the option, which file type is the best? The image below shows the exact same content in a Word document (looks ok), in a PDF (not quite as nice as the Word format), and the Canvas Content/Wiki Page format (looks the best). Any of these formats are acceptable, but one would be more easily read than the others.

    file types

  2. Review your courses from a mobile device. Some functionality is different between Android and iOS. We have both available in our office, if you would like to make an appointment to check your course site. You can also use this interactive checklist to review a course – http://bit.ly/canvas-mobile-check.