cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Community Member

Canvas App a huge disapointment

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

59 Replies
Highlighted
Surveyor

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:

247448_pastedImage_1.png

Can look like this on an iPhone:

247449_pastedImage_2.gif

Or like this on an Android phone:

247460_pastedImage_6.gif

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.

Highlighted

Agreed. This app is rife with redundancy and takes longer to log in than is required to answer the bloody assignment question[s]. Was it designed by a committee of xenophobic lunatics?

Highlighted

You are not alone.  Incredibly disappointed in the mobile experience.

Highlighted

Hi Kenneth

Apologies for the delayed reply - I've been following the responses but we've been tied up in launch.  We'd be interested in understanding a bit more about the custom CSS etc. that you've been using (for accordion / expander panels and tabs) although note that a revised 'student app' is on its way.

Highlighted

Hi kenneth.larsen@usu.edu

I've just stumbled onto this discussion and if you have a moment, I'd love some help with with the CSS needed to style the mobile login page - I've tried styling based on the f1 container but haven't been able to get it to work. Am I missing something obvious?

Thanks

Martha

Highlighted

I dunno, i'm just a hardware kinda guy but maybe this might help,.

Martha Zumack wrote:

Hi Kenneth

I've just stumbled onto this discussion and if you have a moment, I'd love some help with with the CSS needed to style the mobile login page - I've tried styling based on the f1 container but haven't been able to get it to work. Am I missing something obvious?

Thanks

Martha

<form action="action_page.php">
<div class="imgcontainer">
<img src="img_avatar2.png" alt="Avatar" class="avatar">
</div>

<div class="container">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>

<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>

<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked"> Remember me
</label>
</div>

<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</div>
</form>
Dunno...
Highlighted

Nice sheldonj@otc.edu! One of the hardest parts of working in the app is getting at the actual code. That is very helpful.

Highlighted

Smiley Wink

Sent from my Verizon 4G LTE smartphone

Highlighted

Hi martha@wolseyhalloxford.org.uk

What exactly are you hoping to achieve? The page structure provided by sheldonj@otc.edu is a great starting point to know what elements to style. My institution uses a single sign-on system for logging into Canvas which means that only a few of our admins will ever see the Canvas login screen on the app so I have never dug into changing it.

Labels