Tips and tricks for a Moodle overhaul

I often receive questions from Moodlers about how to tackle a Moodle overhaul so I thought I’d share my thoughts on this with the Moodle community.

Moodle to me is a constantly evolving project, I often change things as I’m going along. Many people set out to create a finished product and as a result set their expectations too high and put too much pressure on themselves to finish the project in the allotted time.

I don’t think that any website can ever be completely finished.

Below is a list of steps you may wish to take when implementing a Moodle make-over:

Step 1: Browse the web for inspiration

Take a look at other websites, and I don’t just mean Moodle sites. When you find something you like, take a screenshot for later.

McD's

Step 2: Borrow ideas from popular websites

The designers at Facebook and Google know a thing or two about functionality and usability, so play with these sites for inspiration. Our students will expect a good immersive browsing experience as this is what they have become accustomed to.

Visit sites such as www.smashingmagazine.com to see a showcase of amazing visual websites. Some of the sites featured on here are stunning.

Again, take screengrabs and move things around in Photoshop to get a feel for your own layout.

Step 3: Finalise your basic design

Now that you are all inspired and you have drawn a few mock ups in your drawing package it’s time to build your theme. Start with a pre-made Moodle theme that is the closest in terms of layout to your final vision. There’s no point re-inventing the wheel.

Use a browser with web developer tools such as Firefox with Firebug to find which CSS classes you need to change.

JQueryStep 4: Add some funky AJAX

There are lots of AJAX frameworks out there so go take a look at the examples. I like JQuery, MooTools, YUI and Prototype. If your AJAX programming isn’t great then use the code the developers provide you with.

Step 5: Launch the theme

You may not be 100% happy with it and you may have lots of tweaking left to do, but as long as it works and it’s better than what you had, then launch it.

The rest of the design in on-going, you can always make subtle changes to the theme as you go and your audience will not even notice. Google are masters at this! After a few months of tweaking little bits here and cleaning up little things there the site has got better and better and your audience did not see it happen. Gmail now looks nothing like Gmail back in the day. When Facebook did a major theme change almost 2 years ago their users complained. Now Facebook just adds small features here and there so the process is gradual, but over time the site has evolved and transformed.

Lastly…and this is a bit controversial

Do not let non-designer people input on your theme

It’s best to go with your gut feeling too, a lot of people may not like what you do as it may be too bold for them, just keep going with your vision and then when people see the finished version they will love it. Do not let non-designer people input on your theme, a lot of people will try and influence the process by adding their ideas or by stating you need to “do this” or “include that”. Again, Facebook was an example of this, many thousands of users preferred the old design as they were familiar with it but the designers stuck to their guns and now their users don’t even remember the way it was and love how it is now.

I had to fight hard to lose the 3 column 100% Moodle approach. Several people opposed it but now they agree, in hindsight it was a great idea.

So don’t worry about changing things during term, don’t listen to those who say “our students won’t like it”, or “leave the menu now until next year as we don’t want to confuse people”. As long as the tweaks you make improve the site then go with it! After all, you have been employed to do the job, not them!

Good luck with you Moodle overhaul and I hope this blog post helps!

Previous post Enable the Moodle WYSIWYG editor on Chrome and Safari
Next post Moodle: PowerPoint white screen when opened in Internet Explorer