Case Study:
Presidential Air Before and After
December 7th, 2011
Over the years the Club Ash site has generated a number of leads from people in the Barrie area. It has some pretty snazzy animated menus and Flash effects and Presidential Air said they wanted to have something similar for their website. The company asked me to come up with a list of enhancements to improve the look of their site, stressing that they didn’t want a full redesign they merely wanted the current design enhanced. Accessibility and the ability to work with an existing booking system was essential so it was necessary to use as little Flash as possible.
(Note: Click on the images below to view larger versions.)
The original site had been put together by a staff member in-house and had a number of problems.
When I validated the HTML code at the W3C Mark Up Validation Service the home page generated 88 errors and 46 warnings. There was a lot of JavaScript code in the page itself and the layout employed a mixed use of divs and tables. Most of the text was using in-line formatting and there was no template structure set up for the website.There was also a large amount of blank space between the content and footer as well as at the bottom of each page, causing unnecessary scrolling. It became clear that I had to do more than just replace a few design elements if the site was going to run efficiently and be easy to update over time.
My proposal included an animated navigation menu using jQuery, the implementation of a style sheet to handle formatting site wide and the creation of a template structure using PHP. I also suggested moving most of the JavaScript code to external files and overhauling the HTML code to meet web standards. As it became obvious that I’d essentially be rebuilding the site from scratch in PHP I suggested to the client that we instead put our resources into building a new version of the site in WordPress but he demurred.
With the parameters of the project established, I began work and drew up a new design. After discussing the design with the client and making a few revisions it was approved.
It was now time to start creating a set of templates using PHP so that updates to the header and footer would occur site wide. The navigation menu was rebuilt using PHP to determine the current page. I found a useful piece of javascript that allowed my to fade between images and create the button hover effects. I removed all inline formatting and CSS and replaced it with an external style sheet to, once again, allow site wide changes to be made in one place. I removed unnecessary tables and replaced them with div tags (although I must confess that I left the table structure on their “Instant Quote System” as it had been built by their developer and I didn’t want to break any of his work). I also took the majority of the javascript code out of the pages and put it into external files. The result was a much more manageable site with clean code based on modern web standards.
I discovered that the excessive space at the bottom of the website was being caused by the google map that appeared when a user selected flight destinations. It required two hidden divs layered over top of each other. They had been position relatively and shifted up by 500 pixels. This created a void of 1000 pixels where the divs used to fit into the flow of the document. I instead positioned them absolutely which removed them from the flow and restored the proper height of the page.
With that accomplished my final task was to reinstate the content and reformat the pages with CSS. Here’s an example of what the original “Fly & Golf” page looked like.
And how it looks now:
In addition to reformatting the pages I also employed some CSS3 to create text shadows, multiple background images and animated hovers. I have to note that these effects aren’t supported by all browsers but that’s okay. While users of browsers that support CSS3 (all modern browsers) get some eye candy, users of unsupported browsers (basically Internet Explorer 8 and earlier) won’t know what they’re missing.
As I write this I’m still completing work on redesigning the look of their booking system but the majority of the project is done. I’ll post an update with some details when the website is finally complete but in the meantime please feel free to head over there and take the website for a spin.
Note: Eagle eyed coders will notice a blob of SEO gobbledygook between no-script tags embedded in the home page. I know this can have negative consequences on search results but the client’s marketing specialist insisted that the code be included.















