Skip navigation
All Places > Canvas Mobile Users Group > Blog > 2017 > June
2017

I am not new to coding HTML and CSS and have written JavaScript and jQuery when necessary. I have worked with Bootstrap and used the Chrome and Firefox inspector tools to test presentations on different sized screens. So when I downloaded the Canvas app to my Motorola phone, I didn’t expect too many challenges.

The first thing I did in the Dashboard was choose one course to view in the “Course & Group Selection”. I selected my sandbox course. The software put a star in the icon to indicate selection. Looking around the course pages, I found a video that was not showing. I went to the PC, logged in to my Canvas account to get a look at the code, and … only the sandbox course remained in the dashboard! What? Back on the mobile app, I selected all the other courses in the “Course & Group Selection” menu. A refresh on the PC showed all the courses were back. Whew!

I have only just started, but already I see that my Canvas icons are not rendering and the Canvas-styled buttons are not styling. On the other hand, my custom drop cap and block quote styling is working nicely and my Twitter iframe looks great!

I would like to hear what surprises you’ve had.

Josh Frielich

Students on iphones:

Posted by Josh Frielich Jun 28, 2017

I have loved using Canvas, the switch has basically guaranteed student success. Students can turn in work from phones, use cameras to document project based learning assessments. When students are sick they return with all work and lessons complete. My students walk into the classroom, look at pop-up notifications and know exactly what to do, and what we will be doing in class that day. I love this!

I was recently browsing the internet for random quotes or facts to put put on the backside of some personal business cards. I found interesting information such as "76% of MOOC attendees are male." (Chronicle of Higher Education). Or the amazing gem that "82% of employers think you're better suited for a job if you've been travelling." (Business Insider). But one of the most compelling bits of information I found was that "5 BILLION people worldwide now have a mobile device" (Digital Trends). As I dug further into that information, I found that 80% of the US population has a mobile device (this was from Venture Beat, but from further research I have found that this should say smartphone).

 

If we begin to expand upon the world wide mobile device saturation, we find that a bit more than half (2.6 billion) of those devices are smartphones. But that figure is from 2 years ago (2015)! And two years ago, there was an estimation that "total mobile" footprint (which could be multiple devices per user) could reach 9.2 billion!!

 

I purposefully titled this blog as "reaching everyone" because when we typically think of mobile devices in education, we automatically revert to "classroom on the go", or "mobile friendly classes/quizzes". We have had those discussions before, but I want to think about mobile in a different way - mobile devices for reaching economically disadvantaged individuals in their education around the world or in rural areas of the United State.

 

We have a duty to the students we teach and/or support to ensure they receive a quality education and that they can access course material wherever they are (and that includes financially). When the iPad first came out and we were all scrambling about what this meant for us; but the device was not ready yet. The apps weren't ready yet either. But now? Now the various platforms are finally to a point to where a student would actually be able to facilitate their learning from a mobile device; whether it's a phone or a tablet.

 

If you look at the information from the Tech Crunch article where I'm getting most of my numbers, they are forecasting that the majority of the growth for mobile devices will be in Africa, the Middle East, and the Asia Pacific. Even though I do not directly support students from those areas, I may have a student with family there that will need to go back for a visit, and I need to ensure the technology is in place. Or I can do my part and push educational app developers, such as Instructure, to create applications that affect more than one type of student. This is why I made my voice heard on How do you feel about offline content for Canvas Mobile? Other than pushing our vendors or making sure the technology is there, how can make sure our students are supported with mobile?

 

I'll leave you with two thoughts:

  1. I purposefully left teachers off of this and focused only on the students. The Canvas for Teacher app is being re-built, so if the conversation went app specific "problems", I wanted to stay away from that app.
  2. Here's a great quote I'm putting on the back of my business card:
    • Interest does not always equal attention.

Canvas provides instructors with an opportunity to rethink the technological side of their course - and mobile activity is one of the major areas in which this occurs! As I watched the video series for mobile assignments (which is fantastic, by the way), it really made me think that we design courses as if we are transferring them from paper to electronic, instead of being "born digital."

 

The examples of taking a picture of specific items was interesting! I could imagine a sort of a library scavenger hunt that included these pieces (i.e. take a picture of this book on the shelf in the Library, take a selfie of yourself working on a computer in the lab, take a picture of a 3-d object that you printed in the makerspace). It would transform the regular "get acquainted with your Library" into a sort of an "Amazing Race" experience.

 

I could also imagine a more research-based assignment. Perhaps the course is on ecology, and you encourage the students to take pictures of flora and fauna, requiring geo-referencing of the image. Then, you download the results and generate a custom Google Map of the results.

 

What other examples can you think of, as ways to creatively engage students with mobile activities?

 

There are so many exciting opportunities available when we begin to think about the tools that are available, and how to best use them. The instruction becomes more of a transformational experience where students realize that education and learning is real and could be a lifelong pursuit.

 

After all, curiosity is one of the early steps of expertise, right?

When listening to the various presentations in 

Playlist: Mobilize Your Assignments

I found it very unfortunate that I could not change the ṕlayout rate. Generally, I like to view material at 1.5x or higher - otherwise, the data rate is so low that it is basically hard to concentrate on the material.

 

This is not a criticism of the speakers, but rather a problem of conversational rate speech. Moreover, there is evidence that this reduces the level of recall.

We've all been there. You find the perfect website that has content that you would love to share in your Canvas course, only to find, after the fact, that the content doesn't scale appropriately or doesn't render when opened on a mobile device.

 

I wanted to use this post to talk a bit more about what web designers refer to as "responsive" content. For those of you who maybe aren't 100% familiar with this term, responsive content is simply content that will render the uniquely, but appropriately based on the size of the screen that is used to access it. Additionally, I wanted to discuss some additional tips and ticks for making sure that the content you are sharing will render properly on a mobile device.

 

Responsive vs. Non-responsive Examples 

I wanted to make sure we were all clear on the concept of responsive content first, before I reveal some easy tips and tricks to test websites as a means of determining if the content is truly responsive or not. Below I have included a few sites that have non-responsive or responsive content.

Responsive

 

ESPN

 

ESPN Desktop siteFigure 1. ESPN site rendered in a traditional desktop orientation on a laptop screen.

ESPN Mobile SiteFigure 2. Ward's Science site rendered on an iPhone 7+ screen.

Notice that the content for both the desktop and mobile site remains the same, but the way that the content is render changes based on the screen size of the device that is being used to access that the site. 

Non-responsive

 

Ward's Science

 

Ward Science Desktop Site
Figure 3. Ward's Science site rendered in a traditional desktop orientation on a laptop screen.

Ward's Science site on iPhone 7+ ScreenFigure 4. Ward's Science site rendered on an iPhone 7+ screen.

Notice that while the site renders in an appropriate manner for desktop users, mobile users are left with small text based links to tap on. Links that are this small, and this close together can result in the user accidentally tapping on an incorrect link, which can then lead to user frustration. 

 

Tips and Tricks to Assessing Responsiveness of a Website

You could, in theory simply access sites from your mobile device as a means of checking their responsiveness, but I am assuming that you will most likely be building most of your Canvas courses on a traditional desktop PC or laptop. As such, it may be cumbersome and counterintuitive to your work flow to have to pull out your phone and visit a site that you currently have open in your computer's browser.

 

So, how can we remedy this complication, while keeping everything isolated in your desktop's/laptop's environment?

 

There are actually two ways that we can go about it. We can either actively resize the browser window while a website is loaded in it, or we can user developer tools in that browser to "trick" the webpage into thinking that it is loading content onto a mobile device.

 

Resize the Browser Window

Resizing the browser is pretty easy. Simply load any website you would like into the url bar, and then grab the right side of your browser window and pull it left to shrink the width. If the website is responsive, based on screen size, then you should see the content of the site shrink to fit the new orientation. Note: the degree of responsiveness may vary based on the website. Some websites will re-render content at a myriad of widths, while others may only re-render content at two or three distinct points. The video below demonstrates how the Canvas Community site renders at a traditional desktop and how it responds to the browser window shirking to a more mobile style width.

Figure 5. The Canvas Community page renders differently when the browser window's width shrinks.

 

Using Browser Developer Mode

Modern day Internet browsers have a developer mode that can be used for a variety of purposes (especially if you are a web designer/developer). One of the functions that this particular mode has in it is a Responsive View, which allows the user to render a specific site as though it were being displayed on a mobile device. The way in which you can enable this particular view may differ slightly between browsers, but, once it is enabled, it allows for versatile assessment of a website (you can set very specific widths, or even choose from a lists of devices to see how the site will render).

Figure 6. Safari's Responsive Design Mode allows for the visualization of how a website would render on different devices.

Below I have provided links that will allow you to enable this mode on any of the major browsers.

 

Google Chrome

  1. Enable the Developer Tools.
  2. Toggle Device Mode.

 

Mozilla Firefox

  1. Use the menu to enable Responsive Design Mode.

 

Microsoft Edge

  1. Enable the Dev Tools by pressing the F12 button (in some cases Fn + F12) on your keyboard.
  2. Enable Emulation Mode.

 

Opera

  1. Click on the Opera logo (Windows) or the View option in the menu bar (Mac) and select Show Developer Menu
  2. Click on the Opera logo (Windows) or the Develop option in the menu bar (Mac) and select Developer Tools
  3. Once the Developer Tools panel opens press Control + Shift + M (Windows) or Command + Shift + M (Mac) to toggle Device Toolbar on or off.

 

Safari

  1. Click on Safari > Preferences in the menu bar.
  2. In the window that appears click on the Advanced tab.
  3. Make sure that the checkbox next to "Show Develop in the menu bar" is checked.
  4. Click on Develop > Enter Responsive Design Mode in the menu bar or press Command + Alt + R

 

Additional Mobile Friendly Tips

While responsiveness is going to be one of major requirements for content that is shared to mobile devices, there are a couple of other things that you want to keep an eye out for when determining if a particular page is worth sharing or not, or if you need to include a disclaimer.

 

Image Size/Content

Many people don't think about this in the context of mobile devices, but if a particular page on the internet is filled with images, and each of those images is large, then it is going to take a long time for the page to load on mobile devices. More modern day websites have found a variety of ways to handle this issue, but older sites may not have such techniques implemented. If the page that you are linking to is not one that you maintain, and therefore has content/images outside of your control, you can do a very simple test to determine how quickly the page could load on mobile devices. 

 

Google has an excellent mobile site testing tool.

 

Flash

Flash was the standard for web based animations, games, and more when most websites were accessed via a traditional PC or laptop. However, Flash requires a great deal of processing power, and, as such, is a drain on the battery of most mobile devices. Additionally, both Apple and Google have deprecated their usage of Flash, or have pledged to stop support of it in the not too distant future. As such, most students will be unable to access any content on a webpage that is built on Flash when they are accessing that webpage using their mobile device or tablet.

 

You can use this tool to determine if a particular site uses flash.

 

Java (not the same thing as Javascript)

Some online applications utilize Java (applets), specifically the Java that is handled by an operating system. Mobile operating systems have no access to the Java framework from an end user standpoint, and as such, they will not be able to run any applets that rely upon Java.

 

Unfortunately there really isn't an easy way to quickly test if a page requires Java or not without actually visiting the page with one or more devices.

Filter Blog

By date: By tag: