50th Anniversary of the Independence of Trinidad & Tobago

Trinidad and Tobago achieved Independence on August 31st, 1962 and is observed 50 years of Independence in 2012. The Government of Trinidad and Tobago remembered and celebrated this important milestone with a series of fitting initiatives. These aimed to recognize and celebrate some of the important events, people and places that helped shaped the country’s rich and diverse history. It is within this scope of events that this website was born. The purpose of the website was twofold in that it was to serve as a "one-stop-shop" for all information pertaining to anniversary events in 2012 as well as being a media archive of the celebrations and important moments in our history.

Why Drupal was chosen: 

At the Ministry of Planning and the Economy (now the Ministry of Planning & Sustainable Development), which was the Ministry responsible for the development of the TNT @ 50 website, we are always striving to incorporate proven technologies into our I.T projects. We were aware of the use of Drupal in government and its resounding success. We were also looking for a stable platform to develop our website on and once we started our comparisons, we didn't have to look very far. Drupal has the flexibility, and the ability to scale well and these were two key factors in our decision making process.

Describe the project (goals, requirements and outcome): 

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.

Modules/Themes/Distributions
Why these modules/theme/distribution were chosen: 

CCK

We needed to have more custom fields for each content type created. These fields essentially make management of the website easier.

Views

Views allowed us to create a stunning photo and video gallery integrated with Prettyphoto.js

ImageCache

ImageCache allowed us to customise the images that were uploaded for the slideshow and in other parts of the websites so that website content managers wouldn't have to do that work. We wanted to have as much control over the way the images were displayed as possible so this meant creating several ImageCache presets and associating them with different views or node displays. A content editor should have been able to upload an image and have it displayed in two or more different ways in different parts of the website because of the ImageCache presets.

Megamenu

Megamenu gave us the ability to have a clean menu that was uncluttered even though the amount of links are expected to grow. Initially the site was supposed to have a much larger menu and this was the main reason that the megamenu module was selected.

jCarousel

This was used to allow the events to scroll up on all the pages. The key point of the website was the events. Events were being added daily and this needed to be prominent to users landing on the homepage. The jCarousel allowed us to easily add events from the event module to a scrolling "block" view which was then placed on the homepage.

Team members: 
Project team: 

Ainsley Harewood, Kendal Fontenelle, Delisa Lewis, Roslyn Khan Cummings, Choy Felix, Kevon Gervais, Kasey Gordon, Clint Ramoutar

Comments

Tezza’s picture

Hi raindrup

Congratulations on building a beautiful Drupal website for the 50th anniversary of your nation's independence.

I have asked the case studies team to consider this case study for promotion to the 'Featured' page. #1647772: Promote 50th Anniversary of the Independence of Trinidad & Tobago case study to Featured. If you concur I believe some extra detail would help build a stronger case. I've made some suggestions on the post referred to above.

Terry

ainz’s picture

I'm really very sorry that I took this long to respond to this. It's been quite a busy year but I've started giving back to the Drupal community this year and I thought even though it's so long ago others could still benefit from a more thorough writeup.

I've answered all of your questions in the additions except the css and javascript caching. That was an oversight on our part we just never turned it on as we kept tweaking the css and javascript for a while after the launch of the website.

Thank you very much for your kind compliments, it's very much appreciated. :)

I♥UiasP4MTY’s picture

I have a Drupal account. Sites like this makes me want to build my own
but I am like a deer in headlights. The page says - Get started - and
I just don't know what to do. Will you help me ..... pretty please.

Love, peace and have money
♥ Steve ♥

ainz’s picture

I know this was posted a long while ago but I hope that you've made some progress in your Drupal knowledge. My advice would be to read anything you can on Drupal and "play with it". I learn faster with videos so I've spent a lot of time on Lullabot's website. In my opinion that's one of the best ways to learn the platform. Also the comments are a gold mine on Drupal.org. Search and have fun learning. :)

fineartist99’s picture

Awesome site! I've done my fair share of Drupal sites but none of them are as good as yours here. When I build one worthy of praise I'll definitely let the Drupal community know.

ainz’s picture

Thanks @fineartist99 I really appreciate the compliment. I feel the same way when I look at some of the others as well :). We're all learning.

fineartist99’s picture

I've done so many custom themes - I'll get them together and submit em. It's just that none of them actually "do" anything amazing.

cupid20d’s picture

Good job with the graphics.

shamio’s picture

Background color which is gray and that red color, made a nice looking combination, I liked the theme. But i saw something that can be changed. Why did you place "Who we are" page which is a kind of about page, as the second post? I think you can move it as the last post or even as an independent page. Currently all posts have image beside them, but this post doesn't have image too. I think its better to separate it from other posts.

Doubt is the father of invention.... موبایل گوشی

mpark’s picture

Nice flash :-)

aopgroup’s picture

if possibility, would you please tell us a course to how to build this website? I real want to learn how to build this website. also the theme.

leroywest’s picture

Hello.

Just wanted to say that I am really proud to see a really nice Trinidad and Tobago site done with Drupal. I started using Drupal from version 7, so can't say if it is easier/better than D6, but after months of trial and projects and requests, there is no turning away from Drupal. It is my CMS of choice.

Ah Trini in Sweden.

L. Weston

www.conceptwest.se

Archerswebsite’s picture

My virusscanner (Bitdefender) blocks that website. Does it contains malware?

Greetings,
Archer

adamjsmith’s picture

Great job! The fireworks adds flair to the website. Overall, this is a well-designed site. Happy 50th Birthday Trinidad & Tobago.

diomede’s picture

First of all..Happy 50th Birthday Trinidad & Tobago!
Beautiful website; in addition you could provide an optimal viewing experience across a wide range of devices using responsive design.
Greetings

www.concertpass.com - the secure way to buy concert tickets online!