How to Make Moodle Mobile-Friendly with a Responsive Theme

How to Make Moodle Mobile-Friendly with a Responsive Theme
September 14, 2016 Rajiv Sathian
In Moodle Solutions

moodle-responsive-theme

“mLearning is already a $5.3 billion dollar industry and is predicted to reach $12.2 billion in 2017!”

– Ambient Insight

Unless you’ve been living under a rock for the past quinquennium, you’ll know mobile is not the future, it is the present.

Just like you and me, learners gravitate towards mobile devices because of content access flexibility. Learning on a mobile device is convenient, can be self-paced, and course content can be quickly accessed from anywhere at any time.

So, how do you adapt your Moodle LMS to a mobile device?

There are two approaches you can take here:

  • Using a responsive theme
  • Building a mobile app

Let’s take a look at both.

#1 Using a Responsive Moodle Theme

A responsive layout is one that adapts content based on the device or browser it is being viewed on, for optimal user experience.

It contains fluid layouts. An example of a fluid layout would be one that displays a grid on a wide screen, but converts the grid to a list on a narrower screen.

responsive-layout-example

A responsive theme just makes it easier for students to read and interact with content on your LMS.

This is a cost-effective and effective solution to make your LMS mobile-friendly.

And if you needed an additional reason to use a responsive theme, you should know that Google uses mobile-friendliness as a ranking signal.

“Google Search will be expanding its use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in Google Search results. Users will find it easier to get relevant, high quality search results optimized for their devices.”

– Google Webmaster Blog

With Google’s Mobilegeddon update, you pretty much don’t have an option, your Moodle theme needs to be responsive.

If your current theme is not responsive (you can test responsiveness here) or you are in need of a theme, you can either pick a new responsive theme or make the needed CSS/layout changes.

Understanding Theme Lingo: Responsive vs Adaptive vs Mobile-First

Responsive – means flexible or fluid. On a responsive website, the layout, images and text changes/resize based on the width and height on the device or browser being viewed on.

Adaptive – means adapting a predefined layout. With adaptive design, several layouts are defined for different sent of devices or browser dimensions, and the appropriate one is selected.

rwd-vs-adaptive-example

Image Courtesy: CSS Tricks

Mobile-First – With a mobile-first approach, layouts are designed for an optimal viewer experience on mobile devices, before designing them for desktops or other devices.

Employing any of the above approaches to make sure your web content is displayed seamlessly across all devices makes your website mobile-ready.

How to Create a Mobile-Friendly Moodle Course

When designing course content, here are certain aspects you need to keep in mind to make sure mLearners are not affected:

  • Provide students with a short introduction text for any course content
  • Instead of heavy blocks of text, write morsels of content
  • Several mobile devices do not support Flash, so use HTML5 instead
  • Limit the use of iFrames, because iFrames might not be responsive
  • Use succinct menu names and labels
  • Video content works great on mobile devices
  • When writing CSS, use relative instead of fixed values

edwiser-remui-banner-2

#2 Building a Mobile App

Creating a mobile app is not an alternative to using a responsive theme. (A responsive theme is needed irrespective of an app).

A mobile app can be used along with a responsive theme to improve a learner’s experience.

Why App?

Mobile apps present quite a few advantages:

  • A mobile app makes it convenient for students to access course content and save progress offline
  • Apps are sticky and increase loyalty because they can be personalized for the user
  • Apps can be used to add gamification and increase user engagement

But unlike responsive Moodle websites, e-learning mobile apps require substantial investment. Apps have to be custom built for different platforms.

Things to Keep in Mind When Designing Mobile Apps

Duolingo is an example of an mLearning app done right. Some aspects to keep in mind when designing apps are:

  • Allow social login, and sharing option
  • Generate user progress reports and keep track of user engagement
  • Make use of native functionality to send timely course reminder notifications
  • Allow students to compete or track progress of fellow students
  • Award badges, points or progress levels
  • Make options in-line with native functionality

Wrapping Up

With smart phone users ever increasing, going mobile is not a choice for Moodle LMS owners. While apps are certainly an option, a responsive LMS website is a sine qua non.

A responsive theme must be well tested on mobile browsers and different mobile screens. As for apps, they need to make use of native functions to provide a seamless experience.

Got something to add? The comment section is open for discussion.

Comments (0)

Leave a reply

Your email address will not be published. Required fields are marked *

*