I was approached by the IT Committee Chair and asked to create a landing page for an upcoming media campaign with an updated design. Once the requirements were set, I got to work coming up with a few mockup designs and sent them over to the Chair for review. A design was chosen and development began.
Prior to programming, I arranged a photographer to come in for a photo session. Part of the design required watermarked images of ambulances behind the logo. In the mockup, I used stock images. However, in the actual design, I wanted to use the actual ambulances. This proved difficult to coordinate, as all the vehicles could not be photographed at once because calls for service kept them busy. A work-around was to take individual photographs and manually edit them into one image.
The project came together smoothly, and mid-way through development, further requirements were added. It was requested that the page contents be easily editable online. I researched a few different JavaScript rich-text editors and settled on CKEditor, which was easy to implement. After further clarification, a license for a PHP-version of CKFinder was purchased to simplify image/file uploading and organization. I added a PHP-based main-content and sidebar editing feature to an already-existing password-protected CMS system.
Additionally, I created a ‘News’ content administration area, allowing for the online creation, editing, and deleting of news articles or links, again using PHP, JavaScript, and AJAX. This was tied into the existing site, with category filtering showing specific news on the new landing page.
My goal was to construct a simple design that could be easily viewed by the widest audience. During the testing/QA phase of the project, I had to implement a .png fix for images with alpha-transparency to display properly in Internet Explorer version 6, which was the oldest browser tested for.
A logo image using their media campaign’s font was supplied prior to the site going live. The Chair was pleased with the results, and has since requested that the entire site be re-styled using the new design. This included the use of a jQuery plugin, called jQuery Morphing Gallery, to clean up a few image galleries. The photos taken by the photographer were re-sized in Photoshop and placed in the jQuery slideshow. Additionally, icons were added on the Contact page for information clarification. Lastly, a custom favicon was added for further personality.
Tech Specs:
- XHTML
- CSS
- JavaScript
- Custom PHP development
- Social Media
The site was launched in 2009 and has since been replaced.