Redesign projects

The theme of this week’s links is redesign projects.

Redesigns are painful. Users find it unsettling when a familiar website radically changes its design, even if the new design is a great improvement. But organisations insist on periodical redesigns. A website is launched to much fanfare, but often the organisation then loses interest, leaving the website to crumble. Technologies and design trends change, and soon enough the website needs to be redesigned again.

Most web designers advocate an iterative approach, where the design is slowly tweaked over time, rather than undertaking wholesale redesigns every few years.

It’s time to do away with a project focused view of the web

Here, Paul Boag argues that it’s time encourage organisations to move away from the project approach.

One of the reasons organisational websites fester and decay is because companies are good at projects and poor at iteration… There is no excuse for only periodically redesigning your site. Why limit your website’s optimal performance to immediately after a periodic redesign, when it could be running at peak performance the entire time?

Design is the easy part…

Another interesting article about the issues surrounding designing for an organisation.

Politics and egos are the main reasons that great design goes awry – either it is never presented (because presenting it is a risk to those egos and would be not wise politically), or it is presented and dismissed, or it is presented and then changed such that egos are not wounded and the politics are in tact, the design integrity is hardly a passing consideration.

Managing your redesign

Moving on all fronts at the same time can overwhelm finite resources, giving rise to a project that’s a mile wide and an inch deep. Unable to get the full attention they deserve, equally worthwhile objectives end up competing for priority. Inevitably, someone loses. Avoid the ‘big bang’ effect.

Website help redesign

Redesigned website help page

Redesigned website help page

In many ways it has felt like that saying about the cobbler’s shoes: we spend so much time fixing other people’s websites that we don’t have the time to fix our own.

But no longer!

This week we finally redesigned the website help pages.

The old pages had been there since we launched the website in 2007; very little had changed and a lot of the information was wildly out of date (sorry about that!).

In this redesign we’ve highlighted two things that we get asked most: how to report a problem and how do we book onto training sessions for T4 or writing for the web? These are now our biggest buttons on the right-hand side.

Combining sections

We’ve also moved the terms and conditions pages (which includes information about privacy and cookies) into this website help section, as well as the information about T4 Site Manager. It’s nice to have those consolidated at last. It made sense to group them under “website help”.

How to…

In moving things around I also discovered twelve pages about “How to…” in T4 that were written by Duncan and have been waiting for approval since 2010!

I think the original idea was also to include videos (screencasts) but when that never happened some pages that should not have been forgotten were lost. As Tolkien might have written.

Even without videos the pages were packed with really useful information, so they’re now live finally.

Conclusion

All in all, it’s been fun to get our own house into order. One of the drivers for this redesign was a project that I’m currently working on to standardise various areas of web development here at St Andrews, including a standard coding framework, design guidelines and coding style. I needed somewhere to put them… and now I have.

Now… back to playing Asteroids, which I’ve just learned was made by Atari and not Konami.

Redesigned: Current staff research

current-staff-research

A project that’s been lurking on our backlog for months (actually years) is the second half of an update to the research pages, overseen by the Research Policy Office.

Part one was the redesign of the high-level research pages, with links to the new Pure research portal plus the latest research-related news, press releases and blog posts.

Part two was a similar upgrade to the current staff research pages. This went live last night after 17:00.

For such a research-intensive university (check out some of our successes from the Research Assessment Exercise (RAE) 2008), the research pages – both public- and staff-facing were rather poor and something that we had identified when the website design was launched in 2008. We had just been looking for the opportunity and project sponsor to take it forward. Which is when the Research Policy Office approached us.

Hopefully these recent attempts to freshen the pages a little will help better showcase some of the amazing work that is being done at St Andrews, and enable, even in a little way, more research to be carried out.

Another satisfying project… now on to the School of Psychology, Saints Sport and Music Centre redesigns.

Visit the redesigned Current staff research pages.

Developing a new theme for Moodle 2.0

At the start of the current academic session (2010-2011) the University introduced Moodle as its preferred learning management system (LMS), also called a ‘virtual learning environment’ (VLE) and began the move away from WebCT (which is now owned by former rival Blackboard).

Moodle (which I discovered is an acronym for Modular Object-Oriented Dynamic Learning Environment) is an open-source application which of course means that it’s free… up to a point: you still need to install it, configure it and create a new visual theme for it should you require. And that’s exactly what I’ve been doing this week.

screenshot

A dream to work with

Over the last few years I’ve worked on the redesign of quite a few third-party Web applications. Some have been easier than others. One quite literally drove me to tears with frustration. Moodle 2.0, though, has been an absolute dream to work with.

Moodle 2.0 is written in PHP which I have quite a bit of experience with, so that greatly helped. Having the right mental model of how something works really helps when you’re only working with one aspect of an application.

It also helped that we have a very helpful and responsive Moodle development team located within the School of Computer Science who have been great to work alongside.

Great documentation

The way that Moodle have organised how their themes work is logical and pretty clean, and the documentation on developing Moodle 2.0 themes is really good.

And I mean really good: it’s usable. I spent an hour or so carefully reading through the documentation and then got stuck in.

I did what many advise and started with an existing core theme and adapted it for our use, which took me about half a day. The rest of my time was spent working on icons.

Icons

I didn’t really like the default icons in Moodle, they looked quite pre-Windows 3.1. So I decided that I’d try to replace them using the excellent Silk icons set by FamFamFam.

Well, lo and behold if Moodle doesn’t also have an excellent document on how to use images within your theme as well as an example silk icons theme! Someone has already done the work for me!

I discovered that the example theme doesn’t contain all the icons we’re using and it didn’t customize the smilies so I complimented Silk with two other 16 x 16 pixels sets:

All-in-all that gave me over 4,500 icons from which to choose.

Moodle logic for icons, example 1

Something that really helped me was understanding the logic that Moodle uses to determine which icon to use. I was helped by this thread on the Moodle forum.

I discovered pretty early on that if your theme doesn’t provide a particular icon then Moodle will just use its own default icon. You include your own icons within three sub-directories within your theme folder:

  • /pix
  • /pix_core
  • /pix_plugins

Using Firebug or Chrome’s Web developer tools look at the URL of the icon you want to replace.  You’ll see that it looks something like this:

http://example.com/moodle/theme/image.php?theme=newtheme&image=icon&component=qtype_multianswer

The important bits are in bold which are, in order of appearance:

  • newtheme is the name of your theme.
  • icon is the filename of the icon file without the filetype suffix, e.g. icon.gif, icon.jpg or icon.png.
  • qtype is the name of the sub-directory. In this case (I think!) because it’s a ‘&component=’ it is a sub-directory within the pix_plugins directory.
  • multianswer is the name of the sub-directory within the above sub-directory!

In other words, that URL is for an image within this directory:

/theme/newtheme/pix_plugins/qtype/multianswer/icon.png

Moodle logic for icons, example 2

Similarly, the following code

<img alt=”” class=”smallicon navicon” title=”” src=”http://turret-new.cs.st-andrews.ac.uk/moodle-2/theme/image.php?theme=newtheme&amp;image=i%2Fsettings&amp;rev=235″&gt;

will look for a replacement icon in this directory:

/theme/newtheme/pix_core/i/settings.png

You can glean that from ‘i%2Fsettings’, as ‘%2F’ is the URL encoding (also called percent-encoding) for a forward-slash (‘/’), and the word that appears beyond that is the filename of the icon, in this case ‘settings’. As far as I can tell you can use any format you like from GIF, JPG and PNG.

Clearing the cache

The way that our installation is set up, every time I made an HTML or CSS change I had to clear the theme cache which was as simple as logging into Moodle 2.0 and navigating to Administration > Appearance > Themes > Theme selector then clicking on the button at the top of the page: “Clear theme cache”.

Later on in the development I discovered that Moodle was also caching the information about the themes, such as the theme name and any information that appears once you’ve activated a particular theme. I needed to get the Moodle administrator to clear that for me.

Conclusion

This has been a surprisingly fun project to work on. Surprising only because of my experience with other less-well designed systems. I wish all Web applications were this fun and this easy to edit.

Download

A number of people have emailed me asking for the theme and icon set that I developed/extended. Feel free to download the file below, on the understanding that I can offer no technical support on it.

This theme is released under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

About

University of St Andrews is a fluid-width, three-column theme for Moodle 2.0 that was adapted by the University of St Andrews web team, based on a theme called Leatherbound created by Patrick Malley.

Tweaks

This theme is built upon both Base and Canvas, two parent themes included in the Moodle core. If you want to modify this theme, we recommend that you first duplicate it then rename it before making your changes. This will prevent your customized theme from being overwritten by future Moodle upgrades, and you\’ll still have the original files if you make a mess. More information on modifying themes can be found in the MoodleDocs.

Icons

License

This, and all other themes included in the Moodle core, are licensed under the GNU General Public License.

The following zip file is hosted at Let’s Crate.

Download moodle-2.zip (190 KB)

Photo of the week archive

Screenshot of the Photo of the week archive for 2010

The idea for the Photo of the week feature on the University homepage came about in a brainstorming meeting we had back in 2006 with Mac McBurney who was working with the information architecture consultancy company Dynamic Diagrams we’d hired to help us restructure the University website.

Every week or so since (assuming that a week is a variable event that lasts anywhere from 3 – 21 days) we’ve received a new photo from the Press Office to replace the previous image.

And every time we received a new photo and consigned the previous picture to a folder labelled “Archive” we promised ourselves that one day soon we’d create a proper Photo of the week archive.

That was 2007.

Then 2008.

And then every year since.

Until Wednesday.

On Wednesday I decided that with the recent launch of the 600th Anniversary enough was enough. We’d recently redesigned the news page and the Press Office page, all that was left was the Photo of the week archive.

It went live this evening. What a great sense of achievement to cross off a project that’s been on our backlog list for over three-and-a-half years!  And how embarrassing that it took only three days to do it.

Still, there are a couple of things remaining like setting up an RSS feed for the feature and tidying up some of the full-text copy but all-in-all that’s been a good few days’ work.