Corrosive Online
- Web Design
- Graphic Design
- Articles
- Tutorials
- Downloads
Web Design
Gary Jackson's Kilimanjaro Adventure
Introduction
It is not very often that I will answer posts by people looking for web designers on forums but Gary Jackson's request was too hard to ignore. Gary was looking for a website to promote a charity event he is planning to raise sponsorship for a trip to Kilimanjaro in aid of Quarriers. The event itself is a 24hr Guitar Jam that Gary wanted to broadcast online using Livestream (isn't the internet a brilliant thing).
Gary also wanted a way to offer sponsorship spots for businesses who are generous enough to make a donation and a countdown to the DayJam event. I suggested that Gary take the website a little further and use it to document the whole year leading up to the Kilimanjaro adventure and the climb itself. This would maximise exposure and encourage companies to sign up for website sponsorship. The site also had to be pretty easy for Gary to update, especially whan he is three quarters of the way up the tallest mountain in Africa!
The reason I have decided to document this website build is not so that you think 'wow, he did a web design for charity, what a great guy' but because it is an exercise in how to use the plug-ins and services already available on the web to create a cohesive and interesting website with all the features you would expect.
The design
The design itself is very simple, clean and effective. I have tried to make sure that it will happily 'grow' with any further content that Gary wants to add.
Using 'whitespace' effectively can create a website that looks smart and stands out on the screen. It was essential to make the website professional enough that businesses will want to be associated with it but I also wanted to have a bit of fun with the design work.
I decided to opt for a cartoon style font for the 'Kilimanjaro Adventure' text against a cross-hatch effect image of the mountain itself. With quite a heavy white stroke, red gradient and drop shadow applied the text jumps off the screen at the viewer.
The rest of the page relies on styled header tags and well thought out whitespace to break up the design and provide clear headings for different parts of the page. Using a lot of white also helps the important stuff to stand out, especially the 'Sponsor' button on the left hand side.
Finally I applied some nifty CSS3 tricks for viewers who know what a decent browser is!
The countdown clock
The countdown clock was a real find for this project. Gary was always keen to have some kind of countdown timer to alert people to the significant dates around what he is planning.
The countdown clock I chose runs on a flash platform and is also very easy to configure from the code provided. This means that Gary is able to countdown to any of his events with relative ease. The countdown timer can be found at US Flashmap. I used PHP 'includes' to make sure that any updates made by Gary would carry through the whole website.
Rotating adverts
Having rotating adverts seemed the best way for every sponsor to have their advert displayed in the same place. The javascript solution as very easy to install and came from Dynamic Web Coding. Although the legal details state that a license must be purchased to use the rotator commercially, no money changed hands for this website (other than to a great charity cause), so I decided that it would be OK to use. Again, PHP includes were used to make updating and adding images as easy as it can be.
The script was set to ten second intervals for the sponsor ads to change and to display the images in a random order to ensure that no one sponsor gets more exposure than another.
Lightbox Gallery
It is important that Gary has an easy to use gallery to display the photos from his events and the trip itself. I'd imagine that most web designers will have used Lightbox2 by Lokesh Dhakar. It is easy to install and update and it also gives an attractive page overlay Modal Box.
The Lightbox2 plug in works using the Scriptalicious javascript framework. Once the images are grouped using the rel attribute they open up consecutively and can be navigated through using next and previous buttons. This means that Gary's images can be easily viewed and navigated.
Each image can also have a caption by adding text to the 'title' attribute in the image link itself.
Guestbook
The guestbook on the site is there to encourage messages of support for Gary and to give some indication of who is visiting the website. Plenty of comments should mean sponsors are encouraged to 'dig deep' and give as much as they can. I used the same comments function from jskit that I use on this website. It looks great, works well and has links to other social networking sites such as Twitter and Facebook. This should help to spread the word about the events that Gary has planned.
Cushy CMS
The final piece of the puzzle was to make sure that Gary can update areas of the site with relative ease. Even if that is through a mobile phone browser.
The answer to this was to use Cushy CMS for the job. Cushy CMS is really easy to install with just a class being added to the div tag where you want the updates to happen. All Gary has to do to update pages such as the diary page is to log in to the Cushy CMS website. put in a password and make his changes. These will be applied to the website straight away.
Further development
Gary is getting to grips with website ownership well and he has already linked up the Livestream player in the 'Events' page in readiness for the DayJam. It is great when an owner takes what you have done and builds on the platform to make a welcoming site with great content.
Conclusion
OK, I admit it. It gives me a warm fuzzy glow inside to help out where I can with charity events but it also gives me that glow to think that every element of this site uses plug-ins and free scripts available to everyone on the web. Searching those little gems out isn't always easy but it is well worth-while. What would have been a lengthy build, if the functionality was created from scratch, was up and running within about five hours.
I'd like to wish Gary all the best with his fund raising exploits and I hope he takes the site on as his own to run when he has finished his adventure. You can visit Gary's website by clicking here. Please go and leave a comment, pledge your support for Quarriers and click that 'Sponsor' button.
