I’m currently finishing up some work for Presidential Air, an air charter company based out of Barrie, Ontario. I was contacted by the CEO after he visited the Flash website that I’d built a number of years ago for Club Ash Bar & Lounge (the site is no longer live but you can see the demo here).
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.
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.
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.
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.