Moodle for mobile

One of the considerations. Although I don't feel we've yet optimised the theme as strongly as we could. One of my frustrations has been relatively weak support for renderers. We made our theme a child of our 'standard' theme so it is not entirely separate. We wanted different navigation, reduced potentially different functionality and custom pages for mobile users. We also had an institutional decision to integrate consistent browser sniffing across all our major platforms, as well as poor support for media queries on older devices. Having a child theme in this way creates its own challenges regarding maintenance and optimisation. I would think hard about doing it that way again I am contemplating separating them. Worth also mentioning that we design so that we effectively have three grids. One for feature phones, one for smart phones and one for everything else.

I love the jquery mobile/UI projects, and agree at the moment this offers the best, most mobile ui like interface for moodle curently.

I think moodle can learn a lot from the simple IA used in mymobile, and indeed the official moodle iphone app.

It does seem a bit wrong though....

For example -

If i'm using a small screen device (at least in the uk) i'm probably being charged through the nose for every kb of data, i probably have poor conectivity and my phone's processor means carrying out complex/heavy dom manipulations on the fly is not going to be great. 

Ideally i'd want the most light weight version of any site to be delivered. 

So although loading jquery, jquery ui and jquery mobile on top of moodle (and its own deluge of js?) does give a mobile like ui via the browser, it would obviously be better to just have a moodle that works in small screen without having all this extra payload.

Hope this makes sense {needs coffee}

Stuart Lamour

What evidence do you have for the statements you make here? And which version of Moodle are you looking at?

Moodle is reviewed for accessibility from time to time by various people, including the group of experts we have at the OU, and most of the major accessibility issues have been fixed. They still find minor niggles, but then those get fixed.

Hmm. I am somewhat sceptical how applicable this approach could be to Moodle. With the question “How can I make sure that this nice-to-have content/functionality is only sent to desktop devices?” can you give me any significant 'nice to have' content on some typical Moodle pages, where the amount of HTML required for them is non-trivial?

Relating to the bit in the blog post: "A thornier problem with server-side UA-sniffing is that, regardless of whether you’re testing against a list of mobile devices or you’re testing against a list of desktop devices, you’re still committing yourself to an arms race." Note that Moodle already has to engage in several arms-races like this. For example keeping the timezone definition file up-to-date, and tracking the latest version of third-party libraries. I think the Moodle project has enough infrastructure to handle this.

Indeed, we already have code in Moodle that offers various types of device sniffing (e.g. mobile/tablet/desktop) for themes that want to take advantage of it.

Hey Stuart, I just wanted to chime and say kudos. Your thoughts and approach to this are spot on, IMHO. I look forward to following your lead as soon as we can move to 2.x for our production system. 

Bravo!

I have been testing it with my custom test theme (lots of activity css still needs to be checked) - you can see the current demo in http://korpelainen.net/m2math that is originally for testing math plugins.

I started total rewriting of my test theme css from building first a very simple "IE fallback layout" so that theme should be somehow functional also in IE6 and scaling IE7 and did not use core (base theme) layout. Next I added a couple of media queries for tablets and mobiles and with those few lines of css theme scales pretty well in all devices. Last week i checked some rtl & IE rtl issues and today some mobile issues ( I still need to hide some elements that are not needed in mobile layout - or disable docks etc - and for example add different/smaller size logo images for mobiles instead of resizing the big images ). Scaling for example core editor (tinymce) with plain css is rather hard to do and therefore it might be easier to create a separate mobile theme with mobile/tablet version of tinymce or mobile editor theme/skin (can be initialized with $CFG->texteditors for example in theme config.php or lib.php if device supports editor).

Different mobiles seem to have also some problems/limitations with javascripts that other devices can use - in my case graph scripts.

Hi All,

Those are some experiences with Moodle and Twitter Bootstrap for responsive theme.

jcursos.com.br/ava

After months of development we arrive at a final version of a responsive theme for Moodle, jCopacabana Theme. It was developed using the Twitter Bootstrap Framework and currently supports more than 20 customization options. You can change the logo, the colors of the background, links, buttons, insert links to their social media and more.

This theme has been tested from 320px to 1200px resolution. There are two videos with running theme in iPad 2 and Samsung Android 4.

 jCopacabana testes in iPad 2 and Samsung Android 4 

.

To try the demo version of the subject visit: http://www.jtemas.com.br/demos/moodle/login/index.php?lang=en

That is an interesting approach, but it is not only an issue of resizing the screen. Please take a look of this example: http://m.ideas4ict.com/
They have a theme for mobiles and tablets