Moodle for mobile

 
 
Picture of Stuart Lamour
responsive web design
Group Particularly helpful Moodlers

Hi all,

at sussex we found the moodle iphone app was not going to fit the needs of our users, and don't expect any of the other platform specific apps will do so without a large investment from us in customisation & maintanance. This is very much at odds with how we currently deploy our moodle.

Moodle for us is essentially an open source browser based cms - we don't have moodle apps for mac/windows etc - it is all done through the browser - so why create platform specific apps for mobile / tablets etc which all have a browser?

We prefer to maintain one moodle which works on all platforms, with the browser as our delivery 'weapon' of choice.

And for moodle, being an open source browser based cms is a great place to be at the moment...

Here are some screen shots of our moodle in a browser on mobile, tablet and desktop.

Screen shots

sussex responsive moodle screen shots

 

 

Technology

What did we use? HTML & CSS. And that is it for most of our users. We can also obviously optimise the content we deliver using some server side checks.

For admin users and tutors projects like phonegap.com offer us a cross platform api for getting into difficult bits like the device file system http://docs.phonegap.com/phonegap_file_file.md.html#File

Approach

For us responsive design isn't just about media queries, a cross device api and a flexible grid.

It is all about the information architecture you need for small screens, user interface components that works across all size screens, all embedded at the heart of a responsive cms systems for a great cross platform user experience. 

Links

http://stuffandnonsense.co.uk/blog/about/320_and_up

http://www.lukew.com/ff/entry.asp?933

http://www.phonegap.com/

http://www.w3.org/TR/css3-mediaqueries/

http://www.alistapart.com/articles/responsive-web-design/

 

For moodle, being an open source browser based cms is a great place to be at the moment. I'll be interested to watch and see if it can live up to the challenge and fulfil its potential.

Cheers

Stuart Lamour

e-learning team, sussex - http://blogs.sussex.ac.uk/elearningteam/

 

 
Average of ratings:Useful (9)
Tim at Lone Pine Koala Sanctuary
Re: responsive web design
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

At the OU we also decided to focus on a mobile browser optimised UI, rather than apps, athough we did create a different theme, rather than doing it with @media rules in our main theme. I think our rationale was to use renderers to slim down the HTML for mobile browsers.

To make the separate mobile theme work nicely, we had to get http://docs.moodle.org/dev/Moodle_2.1_release_notes#Support_for_mobile_devices into Moodle 2.1

 
Average of ratings:Useful (2)
Picture of Anthony Forth
Re: responsive web design
Group DevelopersGroup Testers
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 smile 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.
 
Average of ratings:Useful (1)
Me at the Moodle Moot NZ11
Re: responsive web design
Group Particularly helpful Moodlers

For a very usable Student experience I have to say that the MyMobile Theme (http://moodle.org/plugins/view.php?plugin=theme_mymobile) is the best thing I have seen in the mobile Moodle area so far.

In terms of accessing courses with a browser (not editing them) it is by far the best thing available right now IMHO.

 
Average of ratings:Useful (1)
Picture of Stuart Lamour
Re: responsive web design
Group Particularly helpful Moodlers

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

 
Average of ratings: -
Picture of Marc Busque
Re: responsive web design
 
It really would be a great improvement in Moodle to change all underlying HTML to allow the capability to develop easily new themes with responsive web design and accessibility in mind. Right now, Moodle's code is clearly with an old-fashion mark-up, maybe the only solution for the ages Moodle was born but insufficient nowadays. Without changing all the Moodle core, Moodle is, for instance, is not accessible at all and then people with disabilities are not capable to enroll to a course.
 
Average of ratings:Useful (1)
Tim at Lone Pine Koala Sanctuary
Re: responsive web design
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

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.

 
Average of ratings: -
Picture of Stuart Lamour
Re: responsive web design
Group Particularly helpful Moodlers

I'd rather keep this discussion to responsive design and cross platform, and  I know your quite into arias and best practice in your own work Tim, but looking at the m2 code and personally i cannot see any use of the basic html5 elements, associated roles & arias in the m2 core - all of which will leave moodle at a disadvantage for accessibility with modern screen readers (as well as small screen).

http://www.w3.org/TR/wai-aria/roles#landmark_roles

http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/

http://www.freedomscientific.com/documentation/screen-readers.asp

So perhaps this is what Marc is referring to Tim?

Be interested to submit m2 to http://webstandardssherpa.com/ for a review! 

 

 
Average of ratings: -
Tim at Lone Pine Koala Sanctuary
Re: responsive web design
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

I had not seen the landmark stuff before. It looks like it would be fairly easy to add in principle, except that will break HTML validity (unless you are prepared to go for a HTML5 doc-type - I assume).

Also, there must be some good practice. Presumably you need to add not too many and not too few landmarks, in order to make things most useful for screen-reader users. Do you have a suggestion for what landmarks should be added to a typical Moodle page?

There does not seem to be a bug for this yet in the Tracker. Would you like to create one?

 
Average of ratings:Useful (1)
Picture of Stuart Lamour
Re: responsive web design
Group Particularly helpful Moodlers

sure thing - http://tracker.moodle.org/browse/MDL-29623

Here is a a very quick carve up of http://demo.moodle.net/course/view.php?id=5 with some good basics of semantic markup with roles & html.

 

beginning of basic semantics for describing a moodle page

 

For the rich interaction elements (e.g. the quiz!) http://www.w3.org/WAI/PF/aria-practices/#LiveRegions is the best place to start.

 
Average of ratings:Useful (1)
Tim at Lone Pine Koala Sanctuary
Re: responsive web design
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

That looks plausible. The one I would dispute is main. I would expect that to be just on 'Topic outline'.

To implement that, most of the labels in are in the theme layout file, except:

1. Each block would need to start reporting what role it is. This coudl be a new field in the block_content data structure, and to maintain backwards compatibility, it could default to 'commentary' for blocks that do not specify it.

2. 'Section's within the main content of the page would have to be indicated by whatever code outputs them.

 
Average of ratings: -
Picture of Stuart Lamour
Re: responsive web design
Group Particularly helpful Moodlers

probably best to have this dicussion in the tracker rather than a forum post on responcive design?

 
Average of ratings: -
Tim at Lone Pine Koala Sanctuary
Re: responsive web design
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

Yes, or in the accessibility forum to get our ideas worked out a bit better before creating the tracker issue.

 
Average of ratings: -
Picture of Stuart Lamour
Re: responsive web design
Group Particularly helpful Moodlers

For those that missed it - the Boston Globe redesign shows a large cms being used with responsive design -

http://bostonglobe.com/

Try resising your browser window down to 320px and then back up slowley - or just view it on different devices smile

 
Average of ratings: -
Picture of Stuart Lamour
Re: responsive web design
Group Particularly helpful Moodlers

Repost from Brad Frost on  google+ 

Responsive design quick tips:

- Start mobile-first: start with the lowest screen size 

- Keep in mind that there's plenty of devices less than 320px

- The absence of a media query is the first media query. - +Bryan Rieger 

- Let the fluid grid do most of the work. You don't want to manage 100 layouts caused by 100 media queries, so let the fluidity of the web do its thang.

- Use min-width, not max-width for the most part (again part of the mobile-first strategy)

- Be mindful of media. Start with small images and swap them out for larger resolutions. Check out +Jason Grigsby 's fantastic in-depth look at techniques. http://www.cloudfour.com/responsive-imgs-part-2/

- Don't lean on the DOM too much. Performance is your #1 feature and manipulating things with JS too much can bog down your site's performance.

- Don't do 100 backflips to rearrange a bunch of shit. Make sure your design is smart enough to scale up without essentially designing multiple sites. 

- Don't hide content for mobile. Mobile users want to access content just as much as desktop users.

- Keep hit areas big. Design for touch input methods, and keep in mind that desktop users can benefit from increased hit areas as well. 

 
Average of ratings: -
Picture of Stuart Lamour
Re: responsive web design
Group Particularly helpful Moodlers

 
Average of ratings: -
Picture of Stuart Lamour
Re: responsive web design
Group Particularly helpful Moodlers

Server side device detection would seem like a good idea for responsive design. It means you can optimise the content your going to deliver for the device of the user. But as we know its a bit of a minefield.

The problem is with the rate of mobile/tablet you have to keep adding to your list of platforms/devices/browsers your 'sniffing' for to deliver that optimised content. 

Jeremy Keith has an interesting idea in this blog post - http://adactio.com/journal/4867/

The concept is we deliver the optimised content as the default, then 'sniff' for if we need to add the extra laptop/desktop content.

I quite like this server side mobile first approach, i'll try leave some code here in the next few days.

 
Average of ratings: -
Tim at Lone Pine Koala Sanctuary
Re: responsive web design
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

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.

 
Average of ratings: -
Picture of Stuart Lamour
Re: responsive web design
Group Particularly helpful Moodlers

A simple example is navigation.

When you have navigation on a large screen device a nice readable way to display it would be a list.

  1. item 1
  2. item 2
  3. item 3
  4. item 4
  5. item 5
  6. item 6
  7. item 7
  8. item 8
  9. item 9
  10. item 10

This is good for a large screen - it can be displayed vertically - to the left or right of your main content.

On a small screen however this would take up a lot of vertical space, pushing the main content down, and might be difficult for clicking on unless the text is large enough.

A more appropriate set of html to send to a small screen device would be a a select with the navigation list as options - which most mobile browsers provide a specific inbuilt ui for.

Aaron Gustafson has a demo of this simple example (done with css) here - http://retreats4geeks.com/ (resize the browser, or try it on a small screen device vs desktop)

This is may be relatively trivial in terms of html load time, but its hugely important for user experience.

A none-trivial example would be a wysiwyg editor - which has a high page load/rendering time, with include files and js.

Using Mr.Keith's pattern you would only load the wysiwyg editor for large screen devices, but not in your basic content - and indeed load the 'full screen' css, javascript and large images only if you know it is appropriate for users device.

Generally i'm in favour of trying to use the same content on all devices, and let the media queries do the hard work, but if you can increase page speed on small screen, and focus on giving the important data and actions first for all users - it's a good thing.

As i say in my original post though - this isn't a set of technical how tos - it really is a way of thinking about the users moodle has now, will have in the (not too distant) future, and how to meet their needs.

 
Average of ratings: -
Picture of Stuart Lamour
Re: responsive web design
 
Average of ratings: -
Picture of Ben Campbell
Re: responsive web design
 

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!

 
Average of ratings:Useful (1)
Picture of Stuart Lamour
Re: responsive web design
Group Particularly helpful Moodlers

Just published a blog post and video demoing our cross platform (mobile, 320+ etc) moodle with a video showing it in action.

http://blogs.sussex.ac.uk/elearningteam/2011/11/09/moodle-mobile-the-future-of-moodle/

any thoughts welcome!

 
Average of ratings: -
Picture of Stuart Lamour
Re: responsive web design
Group Particularly helpful Moodlers

Any Moodle Themes using this tequnique yet?

I noticed http://moodle.org/plugins/pluginversions.php?plugin=theme_zebra had some media queries in there...

 
Average of ratings: -
Picture of Mauno Korpelainen
Re: responsive web design
Group Particularly helpful Moodlers

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.

Mobile

 
Average of ratings: -
Picture of Stuart Lamour
Re: responsive web design
Group Particularly helpful Moodlers

oh, nice work Mauno!

At Sussex we found that tinymce didn't work on mobile anyway, if this helps ;)

 
Average of ratings: -
Picture of Mauno Korpelainen
Re: responsive web design
Group Particularly helpful Moodlers

It didn't but latest versions of tinymce already support editing for example in iPads and iPhones that use IOS 5 - see for example http://www.mojoportal.com/ios-5-finally-supports-wysiwyg-editors

And latest versions of moodle 2 have almost the latest version of tinymce... and some editor plugins may have difficulties with any mobiles smile

It's also pretty sure that future mobiles and tablets are going to have more and more similar capabilities as current desktop devices, it's only a matter of time.

http://www.youtube.com/embed/I3NQlwBOXpQ

 
Average of ratings: -
Picture of Stuart Lamour
Re: responsive web design
Group Particularly helpful Moodlers

my long term money is on content editable and a native browser wysiwyg editor - on mobile too - i'm sure it's only a matter of time.

For fun i built a small wysiwyg editor using simple stuff like : document.execCommand('bold',false,null) and
document.execCommand('formatblock', false, hType);
doFont(selHeading.options[selHeading.selectedIndex].value);

the aim was to cut out all the extrainious stuff most wysiwyg editors include, and it worker pretty well - very clean mean little editing machine.

 

in the mean time i agree, the iframe and other elements in any wysiwyg editor are a pain to style. tinymce are pretty good though, and might well make it responsive themselves.

We did some fun stuff using a similar method to -  http://www.alistapart.com/articles/expanding-text-areas-made-elegant/ -  but yeh that entire iframe document body path isn't too nice, and when combined with the table stuff your in any responsive layouts worst mare and using !important like there's no tomorrow ;)

 
Average of ratings: -
Tim at Lone Pine Koala Sanctuary
Re: responsive web design
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

I think the stress in your first sentence has to be on 'long term'.

A while ago I had to do something that should have been really quite simple involving contentEditable, and it turned out to be a total nightmare. http://tjhunt.blogspot.com/2011/08/good-bad-and-ugly.html

That gave me a new-found respect for what TinyMCE is having to do to tame the different implementations in all the different browsers.

We can look forwards to the day when HTML5 standardises this, and all browsers then implement the specification, but I am certainly not going to be holding my breath.

 
Average of ratings: -
Picture of Stuart Lamour
Re: responsive web design
Group Particularly helpful Moodlers

long term is actually now.

http://xing.github.com/wysihtml5/

wins hands down over tiny mce.

 
Average of ratings: -
Tim at Lone Pine Koala Sanctuary
Re: responsive web design
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

Lucky you if all your users are on IE8+. For the OU, that assumption is still well in the futures.

Still, the future is heading this way, even if it has not arrived yet. smile Thanks for sharing.

Some more tedious negative points:

  1. I am not sure that "Uses class names instead of inline styles" is a good approach for bold and italic.
  2. We would need the Moodle plugins for things like upload image, insert equation, insert smiley, etc.
 
Average of ratings: -
Picture of Stuart Lamour
Re: responsive web design
Group Particularly helpful Moodlers

oh, we have users on ie6+7 still as a staff image smile

We use the same trick as google -

 

<!--[if lt IE 9]>
You appear to be using quite an old browser to try and access Study Direct.
The Study Direct team would recommend you consider <a target='_blank' href='http://www.google.com/chromeframe/'>installing Google Chrome Frame</a> to improve your experience of Study Direct.<br />
<em>You do not need admin rights to install Google Chrome or Google Chrome Frame on your computer.</em>
<![endif]-->

 
Average of ratings: -
Tim at Lone Pine Koala Sanctuary
Re: responsive web design
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

I just noticed: http://docs.moodle.org/dev/Moodle_2.2_release_notes#Other_highlights - Moodle 2.2 has TinyMCE working in iOS.

 
Average of ratings: -
Picture of Stuart Lamour
Re: responsive web design
Group Particularly helpful Moodlers

great stuff.

any test shots of it working with responsive web design? 

 
Average of ratings: -
Picture of Stuart Lamour
Re: responsive web design
Group Particularly helpful Moodlers

still not able to get it to work on the ipad or ipod in the office sad

 
Average of ratings: -
Picture of Stuart Lamour
Re: responsive web design
 
Average of ratings: -
Picture of Stuart Lamour
Re: responsive web design
Group Particularly helpful Moodlers

24ways article by mr.keith on conditional loading http://24ways.org/2011/conditional-loading-for-responsive-designs

 
Average of ratings: -
Picture of Stuart Lamour
Re: responsive web design
Group Particularly helpful Moodlers

nice blog post on the new bbc home pages use of responsive design http://www.bbc.co.uk/blogs/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html

 
Average of ratings:Useful (1)
Picture of José Augusto Moraes
Re: responsive web design
 

Hi All,


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

jcursos.com.br/ava

 
Average of ratings: -
Picture of Stuart Lamour
Re: responsive web design
Group Particularly helpful Moodlers

great article on the new microsoft responsive designs.

http://rainypixels.com/words/the-story-of-the-new-microsoft-com/

 

 
Average of ratings:Useful (1)
Picture of Stuart Lamour
Re: responsive web design
Group Particularly helpful Moodlers

joomla 3 has gone responsive, including the backend/admin  - http://www.joomla.org/3/en

 
Average of ratings:Useful (1)
Picture of José Augusto Moraes
Re: responsive web design
 

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

 
Average of ratings: -
Picture of Andre Kruger
Re: responsive web design
Group Testers

Hi, this theme looks great, will this theme be available under the Moodle Plugin links?

 
Average of ratings: -
Picture of Stuart Lamour
Re: responsive web design
Group Particularly helpful Moodlers

nice article by Tim Kadlec on being responsible with our mobile developement

http://24ways.org/2012/responsive-responsive-design/ 

 

 
Average of ratings: -
Picture of luis fucay
Re: responsive web design
 

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

 
Average of ratings: -
Picture of luis fucay
Re: responsive web design
 

Here some screenshot about my last post


 
Average of ratings: -
Picture of Borgue John
Re: responsive web design
 

We extende our designe to a responsive web design with the Standard Fluid Theme: https://moodle.org/plugins/view.php?plugin=theme_standard_fluid
It works geat in all browsers, tablets and smartphones. 

 
Average of ratings:Useful (1)
Picture of Stuart Lamour
Re: responsive web design
 
Average of ratings: -