Making my moodle themes a little bit smarter

20 06 2011

When I was little, I was an avid commodore 64 player.. eventually we got a 286, then 386, 486, pentium, etc and so on.. Now we’re walking around with awesome tablets like the iPad2 and so on, its staggering to think of the progress.  ..and after using computers for almost all of my life, I’ve really been noticing in the last 5 years that something new is actually starting to happen.

Simplicity. Intuitive design. Computers and all the user interfaces are finally starting to take away the dirty layers between our minds and what’s happening in the screen.  For instance, I’m finding more and more that before I even get to think “how do I do this?” (when using a tablet/website) I’ve actually already done it by accident (well, by intuition actually) – is it the computers, UI, and software changes, or is it actually ME that has changed, or both?  Probably both, but nonetheless its bloody amazing.

With my UI & web design I’m trying to make the effort in the design/development phase to reflect all this. Mostly this has just involved basics like not having save buttons in web apps (auto saves with ajax etc); loading content in to pages without needing to refresh the whole site; and pseudo intelligent UIs that change the layout of the site for different devices. The stuff that removes some of the thinking or burdens from the user.  Anyway, I thought how I could apply this to Moodle.

Making my themes play nice with mobile devices:

Naturally I thought of updating my moodle theme designs to better cater for mobile viewing.  Now I say “better cater for”, because this is somewhat of a half way improvement, not the ultimate solution (which would probably be a native app).  I know people out there are doing big stuff for mobile moodle and mobile friendly moodle themes etc; but rather then going all out and desiging a completely new theme OR trying to change the way moodle works; I’ve simply written some YUI (the default Moodle scripting library) to change the interface on the fly if the user is on a mobile device/tablet (things like iPhones, iPads, Androids etc).  Yep, so the user experience is the same on a desktop, laptop and mobile, but the display format just changes to suite the smaller device better.

Basically I wanted to get RID of how tiny everything is when viewed on such small screens but still have be able to use the nice looking theme, and I’d hate to think that some Universities might even run two themes (one for desktop/laptop computers and another which looks different for mobiles).

What I hope to achieve here, is to have the nice looking theme like Université, but also give it some pseudo intelligence so that it completely changes the layout for small screen devices – to make the content more readable straight away, and eliminate the annoying need to constantly zoom in and out to do stuff when using Moodle on a mobile. It basically just re-collates the page structure and collects all the blocks and puts them in one column.

I haven’t finished testing this yet, or tweaking it either, but it looks like a fairly good idea; it only took an hour or so to add this to my moodle 1.9x theme, here’s some screenshots..  Once I get it working really nicely I’ll roll it out for Université and maybe Créatif too.  Its a small amount of effort which hopefully translates in to making the UI a little better for mobiles etc.

What do you think?

(had to take screenshots with a squashed up browser because the Android 2.1 samsung galaxy S is so crap it won’t take screenshots. hah.)