50 years of Independence of Trinidad & Tobago

Project Goals:

1. Implement a content management system that would allow The Ministry of Planning and Sustainable Development to easily keep track of, update, and display to the public of Trinidad and Tobago, events that would be taking place over the period of celebration.
2. Create a record of events preserved for posterity. (As such having a website that was developed with valid markup was of utmost importance to us).
3. Create a media archive of events and historical moments in our past.
4. Develop a website that can be easily scaled to include new features should they be required during the period of the celebrations.

Choice of D6 over D7

This choice was just a matter of skill and time constraints as opposed to any feature set. I was leading this project and at the time I was very familiar with D6. D7 was definitely an option but with limited time we eventually had to go with D6 as it would have taken a longer time to develop had we gone with the D7 due to lack of experience with that version.

Outcome

Each of the above goals were achieved. Drupal enabled us to meet our targets and then some. The Ministry of Planning and Sustainable Development was very pleased with the product as well and based on the feedback from the website the citizens of Trinidad & Tobago were pleased as well.

We were able to complete this project in just under two months and the flexibility and easy of use of the platform is what allowed us to achieve all of this in such a short time. Though the site was very basic in terms of functionality through the flexibility that theming allowed we were able to accomplish quite a lot in terms of design.

The website was wildly popular since the different government ministries held events every week until November of 2012. The most number of hits was of course on the anniversary of our Independence, August 31st.

Drupal not only allowed us to get our official website for the 50th Anniversary of Trinidad & Tobago's Independence up in a short time but it allowed us to quickly update even with all the customizations. We didn't want to have content editors thinking about image sizes and shadows or borders so we built all of that in during development. All the content editors had to do was create content. Overall the project was a success and we would definitely use Drupal again.

Design

The graphic design part of the project was very intense. We came up with three different mock-ups using Adobe Fireworks as it allowed us to prototype the design easily. In the end the third design was selected.

The Homepage

We wanted a "bang" for the homepage so our enthusiastic Corporate Communications director asked "Can't we have fireworks?". My initial thought was "Of course we can't" but once we started developing I got to thinking that a little flash could probably make that happen. The "fireworks effect" was actually purchased from an online video library and edited in Adobe Flash to have just the right amount of explosions. It's the same .SWF file both on the right and left of the banner positioned absolutely with a transparent background. They were positioned just in the right place to look as though they were rising from the white line. There's a little toggle button that turns it off just in case it got too annoying after the first couple of times. I wouldn't usually endorse this but because fireworks are a huge part of the celebrations of Independence Day in Trinidad & Tobago I thought it was appropriate. All other graphics were done in Adobe Fireworks.

Internal Pages

I didn't want the internal pages to fall too far behind from the "bang" that the homepage would have made so I incorporated the "swoosh" which goes over the banner slideshow itself. It was just a really to add to the aesthetics of the design and not have a flat slideshow. This was achieved with a little CSS trickery. The swoosh is a transparent PNG that fits snug within the white border of the slideshow even though it is not within the DIV of the slideshow .i.e. it floats over the slideshow and covers part of it. While the slideshow is looping in the back of it, the swoosh covers just a portion of the slideshow and the other part shows through its transparent background.
All images were given a border that looks sort of 3-dimensional with shadow effects and borders in the right places around the image.

The Gallery

This was another intense part of the design using the "lightbox" script. Instead of using a module we used the bare script and Views to get this done. It allowed for more control of the output as we needed to manipulate the output of the view quite a bit to achieve this effect. Drupal provided the ease of manipulating the view but the gallery itself was more about the CSS and jQuery.

Menu Hover

The LavaLamp script was used to create the hover effect over the menu. We just swapped out the default image with our own.

Event Customization

The event customization was a lot of work as well. By default event has its own colour scheme so we needed to find all the colors and override them to match our own color scheme. All background graphics were created in Adobe Fireworks.