We're fairly new to Canvas, and are about to launch to our whole institution. As far as I can recall, we've been told that Canvas' web experience is not mobile responsive because Instructure expects most users to use the App instead. However, we've been trying to design and build exciting Course sites, but find many features that make this happen just don't work in the App? It's actually quite a poor user experience :-( The following are some examples:
Like other Canvas Users, we would like to implement an FAQ page in a Canvas Course. We have tried to use the Element Toggler class to achieve this – but have found that it does not work in the app as the expand behaviour does not function? This is killing what could be a great FAQ option - and a really nice way of presenting video resources for students.
The .tab class does not work in the App either – meaning that all content otherwise laid out well in a browser is just listed vertically in the App. I know that certain jQuery features are deprecated – and .tabs may be part of this group? However, we are unclear how .tabs can be deprecated when it is used both in Settings and as the Content Picker structure under Edit (i.e. Links, Files, Images)? Is it that Instructure can use them - but we can't?
The experience between the Android and iOS App is also inconsistent. For example – we have designed a Course so that it does not use/need the Course Navigation (and hiding or disabling these in Settings / Navigation creates more real estate on the screen). This doesn’t pose an issue for the Android App – but if you do this the iOS App will not show any content at all (the whole course is blank)! So we have had to re-enable the Home navigation option to get the course content to show up in the iOS App. Why?
We’re really shocked how poor the App can be – it seems to be degrading some content so much – and appears to be restricting the options of what we can use, just so that the content isn’t spoiled once it is rendered inside the App interface.
Are we alone in feeling this? How have other Canvas users dealt with this - overcome these issues?
cheers
We have experienced many of those same frustrations at Utah State University over the years. In fact, prior to the update of the app that Canvas released last year(?), we discouraged our students from using the mobile apps. While I will agree that the Canvas app is still far from perfect, Canvas has made some vast improvements over the last two years and I am hopeful that progress will continue. While I cannot speak to all of your points, I will put in my two cents when it comes to user content.
Canvas does not add jQuery or features of their desktop style guide to the mobile app. I assume this is because it would add a lot of unnecessary data usage as files are downloaded onto a phone that are not used for their app interface. However, one of my favorite changes that Canvas has introduced in their mobile apps is the ability to add custom CSS and JavaScript through the theme editor. We stopped relying on the Canvas style guide several years ago since the style guide evolves as Canvas evolves and often old courses do not. We still use features like button and table styles but they are not very hard to duplicate in a custom stylesheet that can be loaded in the mobile app.
For example, a page that looks like this on the desktop:
Can look like this on an iPhone:
Or like this on an Android phone:
Using custom CSS and JavaScript will not help with the differences in how you navigate the apps but it opens up a world of possibilities when working with your content. Custom CSS and JavaScript can definitely require effort on your part but it helps a lot as you try to develop consistencies between what users see on the desktop and what they see in the app.
If you have any questions about custom CSS and JavaScript in the mobile apps, let me know and I will try to help.