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.)
rolley 
This is the sort of thing I am always in support of. Making applications that will still be functional on a variety of platforms with only a little extra effort. I am really keen to use this in the universite theme. Do you know when you will be integrating it into the moodle 2 version for general release?
ohhhh don’t worry! not long, I’ll let you know via a comment here or a new post. I would have done it already but its been a really busy two weeks… I’m just waiting on a quiet moment to come past, it won’t take long to put in the theme! 😀 stay tuned, gimmi a couple of weeks incase the workload doesn’t go down : )
Actually, here’s a question though, whats your thoughts – what should I have the dock do, if I’m repositioning all the blocks to the bottom under the content like in the screenshots…? Would the user on a phone even make use of the dock if all the blocks are collected down there? or should I just leave it as-is? hmmmmmm thinking…
I find the dock one of the most difficult things to explain or for users to understand. One of the problems is that some of our content is quite wide so on a 1024×768 display a scroll bar will be present. I try and get my users the minimise the blocks to the side bar and use them as a menu rather than a list. on a mobile device if all the links are displayed at the bottom i would drop the doc completely, sometimes to many ways of doing something leads to more confusion.
I hope this helps.
Thanks Justin, probably a good idea (dropping the dock completely).. it doesn’t work all that well on mobiles anyway (mind you it was a long time ago that I tested it on one)..
: D
R
Hey Justin,
I’m gonna release an update to my Moodle theme Université (for Moodle 2.1) that will do this mobile detection.. like I said in my post ages ago its just a quick and dirty re-jig of the site, it does it when a mobile is detected.. basically it makes the content a normal size, puts all the blocks below, and so on (just like the screenshots in my post).
Might get it online tomorrow, but if not it’ll be Monday I’d say ; )
Cheers
Rolley
Rolley,
Thank you for the update, I will have a go with this next week.
Justin
Hi Mate, ive very much enjoyed reading your blags and have learnt alot, im currently running moodle 2.1.3 (i think) on Xaamp and when i use your universite theme it comes up bugged, as in it seems like none of the css etc is loading.. im using google chrome and ie7..
any help would be much appreciated.
Thanks for that!
Okay, in an hour from now I’m going to upload the latest theme zip. Hopefully this fixes your problem, I’m pretty sure it will.. I thought it was a moodle 2.2 issue but thanks for pointing out that its been a problem since moodle 2.1.3 … eek!
Changes in Moodle must have made the javascript YUI stuff a little different, and I have just fixed all the problems that arose. Will upload the new zip in to moodle.org today, but I imagine they might have to approve the upload etc etc before it’s made public.. keep your eye out!