Showing results for 
Search instead for 
Did you mean: 
Community Contributor

Best Design for Mobile Users?

I use Canvas exclusively with my face-to-face classes. I post assignments and instructional handouts/resources there; students submit all their work through Canvas; I use many Canvas features: the calendar, grade book, announcements, collaborations.

My students primarily use Canvas through the mobile app.

My question is this: What is the best way to structure/design a Canvas course so that students have easy access to what they need both through the computer interface and the mobile app? I have viewed my courses through both the student and teacher mobile apps, but I still am unsure about what makes the most sense.

For example, with the computer interface, I prefer using a page as the home page because it shows the To Do list on the right side and gives students a visual/web-like welcoming page to land on. I also like being able to use color to draw students' attention to changes in our course schedule, important announcements, etc. However, I don't think that's the best for the mobile app. Or is it?




Tags (1)
23 Replies
Community Coach
Community Coach

 @james10  what a great question. I'm curious about what people will say as we are still getting our heads around using Canvas. The app is super cool but, as you have noticed, it has quite a different feel about it. Thanks for getting the ball rolling with this discussion. 

Community Participant

First: Collaborative conversations about mobile design...

A man talking into a microphone, stating Yes

Second: Sorry if there is too much in what I am about to post. I am here for this discussion! we go:

To rephrase: "My question is this: What is the best way to structure/design a Canvas course so that students have easy access to what they need both through the computer interface and the mobile app? I have viewed my courses through both the student and teacher mobile apps, but I still am unsure about what makes the most sense."

Once the outcomes and objectives are in place, I set about reverse-designing the course. I use the following devices to check my course design for consistency (for example; are the UX and UI consistent across all platforms). The following list key is in (Device)(Design or Test)(User Agent) format.

  • 13" Macbook Pro, macOS 10.13.5. Design and Test. Chrome, Firefox and Safari.
  • Dell 22" external monitor. Design and Test.
  • 9.7" iPad Pro. Test. Chrome and Safari. Canvas Student and Teacher.
  • iPhone 6S. Test. Canvas Student and Teacher.
  • 13" Lenovo Thinkpad, Windows 7. Test. Chrome, Firefox and Internet Explorer.
  • Samsung Galaxy Tab 2, Android 7. Test. Chrome, and Canvas Student.

Our student and faculty population is all over the map, technology wise, and I want my course designs to be equitable and accessible during dedicated or non-dedicated moments of learning and teaching. I wrote a blog, Anywhere, Anytime: My Adjunct Faculty Experience with Canvas Teacher., detailing my experiences with Teacher for iOS.

While some users are of the tried-and-true desktop variety, we are seeing an increase in mobile usage as students come to us having more and more experience with smaller devices. To that end, the Calendar and To Do list in the app is handy...but isn't the same immediate visual as the To Do list on the web.

Using a combination of the Canvas Style Guide, responsive design (H/T to Minimalistic template design), collaborating with Instructional Designers on practices that have worked well in their courses, and looking for HTML5-friendly embeddable content (such as H5P) to change up the experience, we are slowly working towards something that works.

I am in the process of redesigning a course for fall, and have landed on this layout as my favorite so far. Sharing second-half-of-the-screen from iPad and Windows for comparison...

Canvas on iPad

Canvas on Windows

Hope this sparks some ideas, and happy to keep the conversation going!

Community Coach
Community Coach

 @rseilham ‌ has some great resources in the Community I'll share on his behalf!

Community Contributor

Oh my goodness, cgaudreau, you are so out of my league! I can check it on my own phone (iPhone) and laptop, and I peer over my students’ shoulders on their phones to see what it all looks like for them (through their cracked screens and all), but that’s it. 

I have two primary concerns in the course design (and remember, my classes are not online/distance courses): 

  1. students can easily find what they need...
    • the class calendar/what’s due when
    • assignment instructions & where/how to submit their homework
    • my feedback on their assignments
    • their grades
  2. it’s easy for me to remind them about due dates and so on

Are the two screen shots you shared from the modules page?

Community Contributor

That is so helpful,  @klundstrum ‌! Thank you!!

Community Participant

 @james10 ‌, the screenshots were of a content page in the course, not the module layout. The module layout is still a work in progress, and quite messy. Not ready to share those screenshots yet Smiley Happy

It sounds like there is a strong need for Notification preferences to be reviewed on the first day of class. On mobile, push notifications for everything from Announcement, Due Date changes, Submission Comments (feedback), and Grades make everything pretty seamless.

To model the behavior, you might consider using the Teacher app for your grading and feedback, along with the Student app, to test the notifications and how they would be beneficial for your students.

You also mentioned assignment instructions and how to submit their homework: If I can ask, which strategies or introduction-level courses to digital learning in on ground classes do you or your institution employ?

Community Contributor

This may be super basic, and may also be a repeat of some of the things that  @rseilham ‌ has posted, but it's a quick slide deck from a presentation that I did last year. And it has nuns and otters in it. 

Tips for Designing for Mobile Devices - Google Slides  

Great share thanks  @tom_gibbons 

Nuns and otters appreciated. 

This is a great discussion, but what's interesting is that we still have presentations called ".... Designing for mobile devices".    In my K12 school district we have measured that nearly 50% of students are accessing their Canvas courses on mobile devices.  That said, I pose the question - Have we reached the point where we should still be talking about two different kinds of designs (mobile and web)?  Or should we just be talking about design - period, and take into account that our users are using different kinds of devices and the content has to function and look good on all of them, all the time?