The website is designed to act as both the main site for the CGIAR NGO, and as a hub for the huge range of content made available by all the consortium members.
The Brief:
The brief was, in effect, this list:
Web design based on the new branding guidelines
Designs for page layouts, style elements, typography, graphical elements
Unify and clearly present the information generated by the various Centres and CRPs
Create a central entry point for visitors to find the main governing bodies of CGIAR
Shift the emphasis from ‘the institution’ to ‘content and research’
Increase the unity of the Centres, CRPs, Fund and Consortium Office through consistent design and branding
Communicate clearly what CGIAR is and what it does
There was, of course, a lot more to it than that and in the meetings that followed we realised that a good responsive design was a must – even if it can be a massive challenge on a complex site. We also knew that widgets had to work flexible – if a widget space was small, the widget should respond to that – responsive within responsive, if you see what I mean. That means the chances of a user putting a widget somewhere and messing up a page is pretty slim, so long as it’s one of our widgets, that is – some plugins have their own ideas!
Restrictions:
Restrictions were largely budget related. This wasn’t an infinite pot, even though the requirements were challenging. Time was ultra-critical. The primary elements had to be ready for the content team to get to work in time to be ready for Rio+20 that is running as I type this.
The rest of the stack is conventional enough LAMP, but that’s the client’s area in this project.
We have our own suite of WP plugins that we use, but we recommend W3 Total Cache for performance and CDN management, and WordPress SEO by Joost de Valk for SEO
Interconnect/IT’s Microsoft Project for CGIAR
On our laptop machines we use MS Project for project management (how quaint!), Fireworks CS4 for mockups and early designs, Chrome for design in the browser which is quite important with responsive websites. We use Komodo Edit for code editing.
But everyone in the company, even past members, has some effect because we’re all in this together, so a mention to Laurie, Barrie and Peter who taught us about tuning Apache for WP.
Workflow:
From a development perspective we’re all in one office, which helps. Each morning we have a team meeting where we catch up on the previous day’s events, what we’re doing today, and what blocks we have – others then help with blocks.
Code goes through the repository and can get peer-reviewed and for this project we tried out a degree of pair-programming that worked well.
Plugins:
Most of the plugins are our own: Events, Templates, Maps etc. We’re likely to start releasing some of these soon – we’ve kept out of the product marketplace for some time and sat on our IP because we know we did it wrong with Spectacu.la!
I don’t want to go into too much detail on the open source plugins used due to disclosure requirements, but the one worth noting is W3 Total Cache for excellent performance and CDN management. We also use Gravity Forms on most sites as it’s such a friendly end-user tool.
Custom Code:
Lots and lots and lots of custom code was used. We tend to take on bigger projects as a rule, and that shows through on projects like this. The theme itself is a chunky 1.36MB and there aren’t many graphics in it! There’s a fair few includes, of course, but it’s still something of a beast.
Problems:
Nothing too bad. The biggest problem was getting a handle on the real cost of building a project this complex. Because we tend to push the boundaries of what can be done WP wise, things often add up.
What did you learn?
Using Less was big progress, and we’ve released WP-Less on Github to help others use it in WP. It has its strengths and a few weaknesses.
The biggest thing we learned was how to work with a multinational team – we made heavy use of Skype for meetings, and only had to fly out twice to Italy. We also learned that it’s important for fixed cost projects that you stick firmly to your process. We had some runaway costs that we had to bear because we allowed an agile approach into a non-agile project with fixed outcomes.
Resources:
Read Design is a Job by Mike Monteiro – it’ll make your life better when handling large and complex clients.
