Case Study:
Presidential Air Before and After

December 7th, 2011
The new Presidential Air home page

A new look for presidentialair.ca

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 Cub Ash Bar & Lounge.

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.

Presidential Air's original home page

The original home page

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.

Presidential Air's original About Us page

The original About Us page with excessive space below the content.


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.

The "Fly & Golf" page before the overhaul.

The "Fly & Golf" page before the overhaul.

And how it looks now:

The "Fly & Golf" page after the overhaul.

The "Fly & Golf" page after the overhaul.

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.

Sticky note doodles

April 9th, 2011

Back in my previous life as an assistant director I’d occasionally doodle something on a sticky note while calling actors or waiting for a driver to arrive with the call sheets.

One day when I was working on Mutant X I stuck one on the corkboard and before I knew it my coworkers were adding sticky notes to the board as well until we eventually had a small art gallery of doodles on yellow paper.

Earlier today I was going through some old files and found a folder call StickyArt which contained my scans of all the doodles Id rescued from the honey-wagon. I’d thought I’d post some because… well why not? I may post a few more later if I find the time but for now here’s a sheet of 6:

Giving Mr and Mrs Hypnotist a facelift

March 15th, 2011

I recently gave Mr and Mrs Hypnotist a facelift. Well, not Mr and Mrs Hypnotist themselves, just their website.

Mr and Mrs Hypnotist are a husband and wife team consisting of Paul Irving and Beth Bovaird. They put on a live show involving Beth’s skills as a hypnotist and Paul’s as a comedian.

I’ve known Beth and Paul for a long time and through a chance conversation with Beth, I discovered that they were in desperate need to update their website. The designer who had originally created the site was busy with new jobs and some of the information on their pages was over two years old. Potential bookers were telling them that they’d gone to the site and were dismayed to see that they hadn’t had a gig since 2008!

Beth and Paul no longer wanted to call a web designer every time they needed to change a picture or post some news.

WordPress to the rescue! After a few rebuked attempts to add some of my personal style to the look of the new site, I ended up simply taking the existing design and turning it into a WordPress theme. In addition, we made a few changes to the page layout and brightened the original pea soup green colour to a lemon yellow.

Old myspace links were removed and a new blog was added.

Dubbed “What’s Happenin’?” the new blog provides the Hypnotists with a great place to post announcements of upcoming shows and hypnosis related content. Paul links back to the blog from the couple’s Facebook fan page which helps increase their potential audience.

Check out the site and if you’re in Toronto on Saturday, April 23rd you can see them performing live!  Click here for details.

Madfatter Inc. article for Ryerson’s Chang School

May 18th, 2010

After I graduated from the Web Design and Development program at Ryerson University’s Chang School I was contacted by the school and asked if I’d be willing to do an interview for an article on students starting their own businesses.

I agreed and once the feature was published they sent me a copy of the periodical.

However, I didn’t realize that the piece was also online until today.

The article doesn’t offer any great insights and it makes me sound rather generic but I thought I’d share it here as a curiosity:

Read the article

Now if only they’d stop cancelling the advanced PHP course.

Kim Gibbons Mortgage Superhero site

April 28th, 2010

Mortgage Superhero site image

I just completed some updates on Kim Gibbons’ Your Mortgage Superhero website and I found myself reading a few of her articles when I should have been working (naturally, I turned off the clock while reading).

She has some very useful information for those who are curious about the upcoming HST in Ontario and mortgages in general. If you’re in the market or will be collecting HST in the future I highly recommend heading over and taking a look at the site.

She also recently won a legal battle with Marvel and DC to register herself as a “Superhero” so she’s obviously got moxie!

Trade Show Kiosk Game

December 21st, 2009

Kiosk game home screen image

hushMedia wanted to provide a more entertaining way to distribute promotional items for one of their clients so they hired my company to create a trade show kiosk game.

The backgrounds and prize revealing videos were created by 1UP Creations while I wrote the Flash ActionScript 3 code that powers the game and added special effects such as the elevator climbing animation, pulsing logo and red hover states for the buttons.

You can view an online demo of the game here: hushMedia elevator game

Note: as the game was designed to run directly from a computer’s desktop, depending on your internet connection speed there may be a delay while the game loads.

PLANiT Site goes live

December 3rd, 2009

Today the PLANiT Measuring site that I redesigned for Modern Empire went live.

Due to a technical issue the News area which requires a working WordPress installation to function was DOA at press time. The company that hosts the site is currently addressing this issue and you should be able to read some PLANiT news by next week.

Update: Sat. Dec 5, 2009 – After some laborious effort the NEWS section is now functioning.

The details of the site were mentioned in my last blog post and the project proved to be a somewhat slippery animal. In the end the client decided to stick with their old client area so my password protected WordPress installation ended up on the trash heap.

Please check out the site if you like. It’s alway satisfying to see projects completed.

Current Project – PLANiT Measuring

August 25th, 2009

Work In Progress: The Planit Website

Work In Progress: The Planit Website


Modern Empire Inc. has hired me to work on a site for one of their clients, Planit Measuring.

As part of a marketing overhaul being overseen by Modern Empire we’re doing a redesign, adding some flash elements as well as incorporating an easily updatable News page and password protected Client Area.

Planit produces “real-time, digital floor plans for all property types across North America. Using our patent-pending MeasuringBoard® technology, we efficiently measure buildings and produce accurate CAD plans that are easier to read than architectural drawings and more cost-effective than traditionally measured floor plans.”

The goal of the new site is to better reflect what Planit does while providing an intriguing, modern experience for the user.

At this time, once you’ve entered the main area of the site, only three regions have a semblance of content, those are the News and Contact pages as well as the Client Area. All other pages load some standard and very bland filler content.

The News Page

The News Page- image

The News section of the site is built and awaiting the final items. It utilizes WordPress to load dynamic content that the client can update on their own. It also incorporates Shadowbox JS to load images from thumbnails. This is a great JavaScript plugin that loads content in a box surrounded by a dark translucent overlay. The content is scaled to fit inside the viewer’s bowser window regardless of what screen resolution they are using. Shadowbox will also be used in the other areas of the site to load images.

The login page

The login page- image

The client login has been created as another, separate WordPress site that utilizes the Members Only plugin along with some hacking of the login php file to create a personalized, protected area that the client can use to post specific content for their clients.

There’s still a lot to be done but I’m pleased to present a sneak peek at what will undoubtedly be an attractive and interesting website. Stay tuned for more information as work on the site continues.

Flash website for Club Ash Bar & Lounge

August 12th, 2009
clubash.ca

clubash.ca

It’s been a long time since I’ve updated the site. Work has been keeping me extremely busy. One of my most recent projects has been a flash website for Club Ash Bar & Lounge, a new club opening in Barrie, Ontario this fall. I’m pleased to announce that the site is now complete and online.

The site features, a music player, on-line VIP sign up, reservations and job applications as well as restaurant and bottle service menus updated from xml. The forms are sending information using PHP and the VIP form queries a MySQL database to provide applicants with unique confirmation numbers.

The management of Club Ash is also involved in publishing and web work and they’ve hired me for a few other projects that are still in development. I look forward to posting about these as they get completed in the coming months.

A video for freelancers everywhere

June 1st, 2009

YouTube Preview Image
Someone on twitter posted a link to this satirical video about “The Vendor Client relationship – in real world situations” and I couldn’t believe how true it rang. So much so that I really didn’t laugh at it the first time, I just thought “Yes. Yes I know what that’s like.” Particularly the guy at the video store. I’ve had people say exactly the same thing to me while discussing a potential web design project.

Eventually I did laugh so I thought I’d share the laughter with you and if you don’t laugh at least you can get a glimpse into what it’s sometimes like to do my job. :-D

Enjoy!