Here’s something we ain’t blogged about yet: the portal of Taranaki, the beautiful region where Momentum was born. It’s a site-system that began as an effort to unify a family of websites that dealt with different aspects of life in Taranaki, like tourism, film, business, governance, etc. This was three years ago. Today’s Taranaki - Like No Other website has evolved considerably, and, like all good sites, that process is ongoing.
Allow me to guide you through some of the cool techniques we pulled designing this site.
The menu
The first challenge we had, was of course how to structure, and easily navigate such huge amounts of diverse data. Beyond the main areas (top-right) we still had enormous branches of information.
Finite, but potentially gigantic lists of links, that are structured into multiple levels, that have to be accessible as easy as possible (no-click), that, furthermore, don’t cover body content, and that don’t conflict with the strip of cross-fading images. Our solution was the flash-based drop-up menu, driven by XML, which sort of lends itself to the multi-level structure. So each of the taranaki.info menus is really driven by an XML tree, managed in the admin area, that looks something like this:
<?xml version=”1.0″ ?>
<site name=”Visit”>
<level1 title=”About Taranaki”>
<level2 title=”A Region - Like No Other” url=…”>
<level3 url=”…”>North Taranaki</level3>
<level3 url=”…”>New Plymouth</level3>
<level3 url=”…”>Stratford</level3>
<level3 url=”…”>South Taranaki</level3>
</level2>
<level2 url=”…”>Climate and Weather</level2>
<level2 url=”…”>History</level2>
<level2 url=”…”>News</level2>
<level2 url=”…”>Request Visitor Brochures</level2>
<level2 target=”_blank” url=”…”>Taranaki Image Gallery</level2>
</level1>
…
</site>
In addition, each menu lists (in a random order) a unique set of images in the photo-strip, that is hard-coded.
Modular homepages
Homepages are tricky beasts. They change all the time, and they need to do that without smashing the basic aesthetic of the thing. If you create a static page, you ensure it is, and remains pretty all the time, but you end up changing it’s elements all the time. If you create a totally open, CMS-editable homepage, you risk it turning into an abomination within a year. So the solution we employed was somewhere in the middle : a modular approach. That is we didn’t design / develop homepages, we created the building blocks, that can be re-used all over the sitescape. So with each homepage, we put forward, and socialised a schematic view, like this :
that seems to have turned into a homepage, like this :
What’s missing here, is the crucial middle step, the modules. You see this homepage has a set of strict governing rules, to ensure aesthetic standards, under which nicely pre-designed modules exist, which allow great freedom of content. For example, we usually have a lot of current “highlights” on a site, hot topics, pages of interest, etc. Now instead of just putting five current ones up there in some format (that we’d have to change very frequently), we created the Showcase module :
This way there’s a clearly defined structure for highlights, one that can be easily updated by the client at any time, and it will always look good. The admins spend less time updating these, we spend less time tweaking the homepage.
Centralised features
Fair enough, but modules alone still leave the problem of having to update content individually on each homepage, which in some cases means duplicate workflows. Say there’s a piece of news that appears on both the Visit, and the Business homepages, you have no choice but to type it up into each news module. So we realised some features of the site have to be centralised, like News and Events :
These modules are not individually managed. They grab their data from a central News, and Events repository, in which elements are written, and with a tickbox, are published to one or many of the homepages. I never told you but someone has at some point heard about a central News/Events feature on the site too, where you can filter all news elements to your liking, and subscribe using your custom settings.
Snackbox
There’s some other, smaller treats scattered around the site (like the map module, google Maps implementation, different menu concepts, some cool content-scrollers) but I thought I’d just run you through the rough governing principles of our approach. So for dessert, here’s a set of graphical elements used around the site :
Happy New Year!