How to Make Moodle™ Mobile-Friendly with a Responsive Theme

How to Make Moodle Mobile-Friendly with a Responsive Theme

Table of Contents


The word Moodle and associated Moodle logos are trademarks or registered trademarks of Moodle Pty Ltd or its related affiliates

“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.

Edwiser RemUI Homepage Builder

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.


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.

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


#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 a 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 the progress of fellow students
  • Award badges, points or progress levels
  • Make options in-line with native functionality

Wrapping Up

With smartphone 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.


2 thoughts on “How to Make Moodle™ Mobile-Friendly with a Responsive Theme”

  1. Avatar of A Reada

    Mobile is not ‘the present’: it is part of the present, and a fairly specific part at that.

    I work in a university and by far the most common device seen in use by students (and staff) in public areas used for working is the laptop. In offices or other places with computers available it is probably the desktop, Mobile devices are certainly used for odd moments and ‘small’ activities (quick emails, social media checking / quick updates / etc.), but for ‘actual work’ the PC is by far the dominant platform with not sign of that changing.

    I am typing this on a desktop PC. I have a switched on smartphone and tablet on my desk. Neither has a keyboard or a large, ergonomically positioned screen. Neither alllows me to touch-type, or look at the non-keyboard part of the small / tiny screen whilst typing. Is it surprising why the desktop / laptop is the device of choice for non-trivial tasks?

    To return to and update the opening sentence of this article:

    “Unless you are living under a rock you’ll know mobile is a part of the present.”

    Mobiles have their uses. Portability is their strong point, but for serious work they are a poor second to a desktop or laptop computer.

    1. Avatar of sathianrajiv

      I completely agree with you Reada, indeed mobiles are used nowadays because they are portable.

      But mostly all the learnings takes place through a desktop itself.

Leave a Comment

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