Explore how the web design practice of “Mobile First” can be applied to course design to create mobile-friendly courses.

Before we start, a quick warning. I’m going to assume that you value creating a good learning environment for all your students. Your students are using smartphones all the time, and that includes interacting with your course (more than 70% of Ball State students regularly use the Canvas mobile app). At the core of this post is the question, “How can we better design courses for students using mobile devices?”

If you want to be a curmudgeon about students using mobile devices – inside your class or outside your class – then this is not the place for you. You have been warned.

What Is “Mobile First”?

Historically, websites have been developed first and foremost for larger devices like desktops and laptops, then adapted (often with ugly results) for mobile devices. 

While modern websites are more similar across all devices, there are still differences in the user experience on different devices. 

For example, online shops often present products in a carousel which large-screen users browse through left and right arrow buttons. On mobile devices, those buttons must be very carefully placed to still fit on a narrow screen and not cover the product information. Plus, many users know to swipe left or right, so those gestures need to work consistently. 

The reality of web development is that anyone building a website will be doing so on a larger screen, generally a monitor. They likely also were trained to build large-screen websites. So, it’s no wonder that many developers will spend 95% of their time creating the large-screen website, then the final 5% tweaking it to work well on mobile devices. 

By prioritizing “desktop first,” though, mobile becomes a retrofitted afterthought. This inevitably results in gaps and missed opportunities where mobile users get the short end of the stick. 

In contrast, a “mobile-first” approach flips this and focuses on making the mobile website the “foundation,” then adding in features and options that will only be workable on larger screens. In a world of mediocre mobile websites, those that are designed mobile-first tend to shine bright for mobile users. This approach also benefits large-screen users, as most mobile-first websites carry over design elements that benefit the desktop experience, such as more compact navigation menus.

What Does This Have to Do with Teaching?

It’s likely that you build your course in Canvas (and often access it) on a laptop or desktop. So, it’s only natural that your tacit assumption is that students will also access it on a laptop or desktop. After all, if you have them taking quizzes, responding to discussion boards, and writing essays, then they must be using larger screens for that. (Hahahahaha. No.) 

The reality is that mobile devices are mostly woven into the fabric of our lives, especially for younger adults. Students may check on what they have to do in your course on their bus ride home. They may listen to a school-related podcast while commuting. They may start a quiz in the library on their phone when their laptop battery dies just to finish it later in their room with the laptop plugged in. 

In fact, according to the Pew Research Center, 15% of American adults are smartphone dependent, meaning they have a smartphone but no home broadband internet connection. 

Unfortunately for our students, teachers generally aren’t thinking about the LMS and course technologies with a mobile-first approach. We’re designing courses and coursework for familiar devices like laptops and desktops, then perhaps we’ll add in a few concessions to mobile devices. 

Practically, this means that students (again, more than 70% of them) are met by frustrations at many different points in the learning process. Maybe they can’t access a key reading that they want to do. Maybe they’re asked to download a file that’s prohibitively large for mobile devices. Maybe they are asked to read something on a website that doesn’t work on mobile. 

While some learning activities will only be the province of larger devices, a significant portion of learning in online environments can be done well on mobile devices if it is designed for those devices in the first place. Everything from interacting with learning materials to taking quizzes to writing on discussion boards to checking progress in a module to asking questions of peers or the teacher can be done well with mobile devices. 

Don’t we owe it to the 70+% of students using these devices to make our learning experiences work for them?

Mobile-First Teaching Practices

What follows are some teaching practices that are informed by a mobile-first approach. Note that none of these are mobile-only, as 4-5% of your students do not own a smartphone at all. The idea here is to design in a way that is mobile conscious and yet also works well for users of other devices (many of whom will also use mobile). 

• Chunking is the process of taking larger concepts, knowledge, or processes and dividing them into a handful of smaller pieces, usually 4-6 pieces. This is beneficial for mobile learners, as it allows for more opportunities for “microlearning” or learning in short bursts. When you commit to chunking, your students can meaningfully interact with your course while waiting for the bus or eating breakfast. 
• Audio recordings of readings allow learners to use their mobile device to interact with course materials at almost any time. For example, a student with a long commute may not be able to carve out time for sitting down to read articles but may be able to listen to them on their commute. Accessible PDFs are a great starting point here, as they can work with text-to-speech software. Many publishers are moving toward native text-to-speech options, as well, such as Taylor and Francis. 
• Captioned videos, like audio recordings, offer learners the freedom to interact with course materials in a variety of settings. For instance, many students work in loud environments. If videos are not captioned, they may have to wait until they are at home or in the library to watch them. With captions, though, they can watch during a break at work if they want to do so. 
• Don’t bury information. When you put key information, such as the due dates for a project or your email address, in downloadable documents that are only linked in specific places in your course, you make it much more difficult for students using mobile devices to quickly and easily locate that information. As much as possible, put this information in Canvas Pages, preferably with easy access from your home page or Modules. 
• Designing your LMS content for mobile devices also goes a long way toward reducing frustration for mobile users. While the mobile app for LMS’s like Canvas does a lot of heavy lifting to make content mobile-friendly, you also need to be aware of how the content looks on mobile devices. I recommend downloading the Canvas Student mobile app and opening your course on it. Some content – especially large images, videos, and other software embeds – does not work well even in the mobile app. 
• Accepting video and/or audio submissions for assignments and/or discussions can help busy students complete coursework from their mobile devices. While this approach obviously won’t work for all coursework, I recommend starting with low-stakes assignments and assignments/discussions where the thinking matters much more than the form. Most faculty default to the written form because they are familiar with it, but you may be surprised by how delightful and insightful video and audio submissions can be. 
• Choosing mobile-friendly sources can prevent the frustrations that learners encounter when they try to access a required course material only to find that it is near-unusable on a mobile device. Pay particular attention to your course textbook and any other major sources you are using. If students cannot access a course material in its entirety on a mobile device, then they are forced to find other devices and may be more unlikely to work with that material. 
• Minimizing the number of logins students have to go through makes accessing course materials quicker and easier. Many services, especially those through universities, require 3 or 4 logins total to access the content. For the busy student on the go, this is essentially the same as it not being usable on a mobile device. Where possible, make your content immediately accessible, straight from the LMS, without additional portals or logins. 
• Splitting essay questions into a separate quiz can help students take the “automatic” parts of the quiz that are easy to do on mobile devices first, then complete the essay questions on another device at a later point. While this isn’t always feasible for grading purposes, if it does work for your grading system, then it can encourage students to use their mobile devices for completing quizzes. 
• Converting files to PDF from common formats like Microsoft Word can help students using mobile devices access those files without downloading special apps on their phones. Try to download any file your students will need to access on your phone – if it does not open natively, then it’s likely students will have issues opening the file as well. 

You may notice a common theme among these techniques. Access your course through a mobile device and you will likely find many areas where the user experience can be improved. Your students, who are absolutely already using their mobile devices to access your course, will thank you. 

What mobile-friendly or mobile-first design techniques do you use in your courses? Weigh in through the comments below.

References

Pew Research Center. “Mobile Technology and Home Broadband 2021.” Updated June 3, 2021. https://www.pewresearch.org/internet/2021/06/03/mobile-technology-and-home-broadband-2021/ 

Did you enjoy this blog post? We would appreciate it if you shared it with your contacts on social media.