← blogs.sussex.ac.uk

Moodle mobile & the future of moodle

Responsive design in moodle

A cross platform vle?

With the increasing predominance of smart phones and tablets it is highly likely that any institution running some form of analytics will have seen the rise in their moodle site being accessed by Blackberry, IPhone & IPad and the ever increasing march of Android.

It’s predicted that by 2013 there will be more of what we call mobile devices accessing your website, than desktop.  As a browser based open source CMS moodle is perfect for being viewed in all these internet ready devices, but needs a bit of tweaking.

Moodle at its core wasn’t built to consider such devices. Pop-up windows, tables, iframes, the forms library, the lack of support for grid layouts, poor usability, an ancient WYSIWYG editor (moodle1.9) and many other odd things dwell in the core moodles framework, and indeed Moodle HQ have noted the fact that it “requires huge core changes to Moodle” to make moodle work in the current browser/mobile landscape.

For us as users and developers such changes would not only improve moodle for mobile users, but for all users. Almost all modern open source browser based CMSs are currently updating, or already have done, to support mobile users and current browsers. Those that don’t i fear will disappear.

So what is the current state of moodle for mobile users?

Moodle News pointed us in the direction of the moodle plans for mobile.

It turned out moodle have some wireframes and a plan for developing a plethra of platform specific apps.

The plan suggested hiring app developers, and using moodle2 web services to deliver content into these applications. Their are no details available on testing these wireframes with actual moodle users.

A moodle iphone app was released. Which causes some problems.

The implications are that anyone with a customised moodle would have to customise and release their own suit of native moodle apps. Individual institutional data you include in your moodle, which a standard moodle does not, would simply not be included in the moodle standard app.

At Sussex we do not currently support or maintain a native moodle app for our Windows, Mac OS or Linux machines. Patches to platform specific apps are something not currently included in our development cycles. We use moodle because its an open source browser based CMS – it crosses these boundaries to unite all our systems.

The app we use for moodle is the browser.

The app stores – one size fits all

Apps can be great – Apple are able to designing a native mobile interface for most of their systems, with fantastic results. But moodle isn’t Apple, Facebook or any of the other one size fits all service providers. As with any open source CMS we expect to able to customise our users experience of moodle, to fit there needs.

Developing the iphone app should not been seen as a waste of time. As with apple themselves the lessons learned from creating a lean user experience can be fed back in and become beneficial to moodle.

In moodle – one size does not fit all

The ecological diversity of moodles out there tells us people use moodle for very different things. People customise moodle. People want different workflows and focus from their moodle. Moodle has never been a one size fits all product which most native apps, by their nature, are. People have already developed their own moodle apps for their diverse requirements from moodle.

Other CMS systems like the Wordpress app allows editors to curate content (a standard workflow), but there is no official app to view the front end of every worpress site in this specific style for a very good reason. Drupal have never released a one size fits all suite of platform specific naive apps because they except their strength lies in the ability of their customers to mould the product to fit the business and user requirements – as moodle needs to.

From our own tests, with a variety of mobile devices, moodle is very close to working well on mobile and tablet already. Patching the issues in moodle isn’t something we can do alone – it needs a encouragement from the community. At Sussex we would prefer to see moodle’s energy put towards updating and developing the open source browser based CMS we love. We’d like moodle and the communities time and energy put towards supporting the future for all users, rather than any one size fits all platform specific native app development.

Best practice on the web

Moodle’s pursuit of apps sits rather uneasily with current web community best practices for mobile. Moodle is lucky enough to be a browser based CMS when there has never been a better time to be one!

The now famous A List Apart article showed us how to technically shape content for small screen.

Moodle2 happily incorporates parts of the community browser best practice code form html5boilerplate. So why not html5boilerplatemobile ?

CSS3 enables us to use media queries  and it would be great to have moodle featured on mediaqueri.es – the gallery which shows some of the best use of this pattern.

The open university has a pattern library/online style guides which utilise these media queries, and we are looking forward to seeing this implemented in their moodle.

The ‘recently acquired by adobe’ phonegap project lets us interface with mobile apis for upload etc..

And while your moodle may not currently be mobile/tablet/modern browser supportive, their are ways around it.

Anyone who read or saw the Jquery UI Mobile presentation by filament goup (highly recommended) will know of the projects objective as a browser based framework for mobiles and tablets.

John Stabinger ‘s  moodle2 mobile based on Jquery Mobile theme gives you a moodle web app.

The future of moodle?

We would love it if moodle accepts and learns to embrace what it is – a browser based open source CMS – and what a great time it is to be one.


  1. Test Dude
    Posted November 9, 2011 at 4:16 pm | Permalink

    When are you going to release your theme and work to the community? It is one thing to talk the talk, another to walk the walk…

  2. Posted November 9, 2011 at 4:46 pm | Permalink

    Hi Test dude,

    as you probably know changing moodle is, unfortunately, not as simple as changing a theme. moodle 2 gets a bit better at this.

    Lots of the post here are showing interaction design patterns. The code is often the least important part.

    Unfortunately for most of our developments moodle does not support them without a bit of tweeking. You will find almost all of code we do use released right here on the blog so you can add to your own moodle. We would love if if some of the ideas and patterns were included in moodle as standard (moodle 3??).

    I’ll try write a post next week on the css & html we use to make our moodle responsive, but its nothing more special than the stuff you’ll find on the http://www.alistapart.com/articles/responsive-web-design/ and other articles we link to in the post.

    If your interested in code, in advance, please feel free to email.

    Thanks for the comment!
    Stuart Lamour

  3. Lewis Carr
    Posted November 11, 2011 at 4:40 pm | Permalink

    Great post Stuart,
    I completely agree with you, mobile 2 mobile themes are the way to go.
    We use lots of hidden meta courses we don’t want students to see. Our custom tweaks allow this to remain hidden but a native app would show them.
    A mobile theme would retain our custom mods but still feel and behave like an app.
    I’m looking at grid layouts for Leeds College Moodle but I keep leaning to something even more simplified. I guess it’s all down to screen size and device type.

    These certainly are good times to playing with themes. The lengths I had to go to in Moodle 1 to achieve what is now dead simple in 2….bliss.

    Keep up the good work.

  4. Test Dude
    Posted November 11, 2011 at 4:45 pm | Permalink

    So, it is not as simple as just changing a theme? But you also say the code is the least important part? Which is it? 

    These ideas are great, let’s see (as in actually get the code) the actual product, otherwise it is just talk. 

  5. Stuart Lamour
    Posted November 14, 2011 at 10:54 am | Permalink

    Dear Test Dude,

    you’re completely correct – this blog is about talk. It’s about ideas, concepts and inspiration, and i’m glad you like those ideas. If you want to look at code for responsive design a good place to start is by doing view source on any of the sites on http://mediaqueri.es/. As with most ideas, the verity of implementations is infinite.

    For us the code or technique you use is the least important part. Mr Zeldman says it better than i could :

    “…the purpose behind ‘responsive design’—the concept of what it strives to achieve—should be separated from the specific techniques used to achieve it.”

    We believe this is important to understand.

    We love contributing ideas and concepts to the community on this blog. We believe sharing this work, and the discussion it might encourage, are important for the future of Moodle. Sorry if it doesn’t offer what you are looking for.

    Stuart Lamour

  6. Stuart Lamour
    Posted November 14, 2011 at 11:00 am | Permalink

    @Lewis –

    We ended up with a VERY simplified form of lessframework.com for our moodle. We are restricted by a fixed width University template as to what we can do for our large screen users, but its lots of fun doing the tablet and mobile ones.

    I’m sure you’ll have about a dozen done and released before i finish this reply, and hopefully that will keep our mystery commenter ‘Test Dude’ happy 🙂

    Thanks for the comment!
    Stuart Lamour

  7. Posted November 16, 2011 at 10:41 am | Permalink

    Interesting post. I am working on Moodle development at the OU, including mobile. I also worked on the device type feature in Moodle 2.

    What you’ve done is a legitimate approach, and we considered it ourselves. However, we found that we wanted more control over UI and functionality available than could be offered purely by utilising CSS3. Hence, we’re not fully implementing OUICE (which you refer to above) in Moodle (although we do use parts of it where appropriate). We have a mobile theme that has additional pages and utilises the full power of renderers.

    You could, perhaps, avoid this if you were happy to introduce mobile ‘hacks’ into your core Moodle code, but we’ve learnt our lessons re. core Moodle hacks. This is the approach many advocates of responsive design revert to in their more pragmatic moments.

    I agree with you totally regarding proprietary apps for different platforms. It’s unnecessary, particularly with HTML5 in the medium term, and the work involved makes it unsustainable.

  8. Posted November 17, 2011 at 10:47 am | Permalink

    Hi Stuart, interesting approach and post on this. Following what Anthony has mentioned above we’ve made some clear distinctions in the OU about what should be made mobile-friendly (i.e. it ‘just works’) – including public and information sites delivered using OU ICE and media queries.
    As to more specific mobile services (e.g. library and student portal) or learning systems (such as Moodle VLE), we’ve needed to take a more mobile-optimised approach reflecting student feedback, surveys and practical uses of their learning environments on the go (or on the couch!).
    For more information, please have a look at the number of posts we have on this at http://www.open.ac.uk/blogs/mLearn/?cat=19
    All the best with your continuing work!

  9. Posted November 18, 2011 at 11:45 am | Permalink

    Good ideas, hope to see this in the actual product,

  10. Posted November 20, 2011 at 11:43 pm | Permalink

    @Anthony & Rhodri – you guys are doing stirling work, and i hope to see some of it fed back into moodle. You seem to have a better chance of influencing it’s future, compared to the rather frosty reception my posts tend to receive. Be interested to see how/if you made any of the content creation workflows with large tables and other none-mobile friendly stuff in the core work?

    I’m most taken by http://www.open.ac.uk/blogs/mLearn/?cat=19 and the simplifications you’ve managed to achieve in the overall ‘noise’ of moodle. As with apple and google’s work on mobile, i think these simplifications should be fed-back into the desktop version. 

    A ‘launchpad’ page or section is something we are hoping to get live by next dev cycle, but for the moment we went with the g+/fb style ‘recent activity’ http://blogs.sussex.ac.uk/elearningteam/2011/08/10/recent-activity-in-moodle/ – yours is better – we might steal the pattern if that is ok?

    We would also be interested to know how you are dealing with resources like microsoft office document on mobile?

    Thanks for the comments, lets take moodle forward 🙂

    Stuart Lamour 

  11. Hari
    Posted January 28, 2013 at 8:36 pm | Permalink

    We are using the Standard Fluid Themehttps://moodle.org/plugins/view.php?plugin=theme_standard_fluidand extende it with our own designe. It works geat in all browsers, smartphones and tablets.

  12. Ernesto Tarrillo Pérez
    Posted March 20, 2013 at 4:20 pm | Permalink


    I so impressed with your work with moodle!! Actually I’m try make a Responsive Theme on Moodle, but the main question is? What is the best framework or template for start with the responsive theme, I’m Peruvian, and in this country not still using moodle like you. To 100% potential

    Do you work with HTML5 properties? Using JavaScript for all effects and functionality?

    Congrats for your work! I can wait for you response!!!



5 Trackbacks

  1. […] Moodle mobile & the future of moodle – E-learning team blog With the increasing predominance of smart phones and tablets it is highly likely that any institution running some form of analytics will have seen the rise in their moodle site being accessed by Blackberry, IPhone & IPad and … Source: blogs.sussex.ac.uk […]

  2. […] There’s no doubt that mobile usage of sites will continue to grow in the future, aside from considerations of usability with the site there will be a growing importance of managing and upgrading content to run on mobile handsets as Flash and other products simply won’t work and will disrupt anytime/anywhere learning that students are used to.  You can check out the video that Stuart made below which shows off their cool (and flexible) UofS site; you should definitely check out the full post though: http://blogs.sussex.ac.uk/elearningteam/2011/11/09/moodle-mobile-the-future-of-moodle/. […]

  3. […] Moodle mobile & the future of moodle […]

  4. […] Moodle mobile & the future of moodle […]

  5. […]   […]

Post a Comment

Your email is never shared. Required fields are marked *