Kaizen: Gardiner Angus Ranch

I would like to preface this project with a short reflection. The Gardiners are nice people. They are always polite, like many of our clients. And yet, what truly makes them stand out from our other clients is their ability to trust.

When a new customer comes to us and asks for a new web site, they often ask for one “like the Gardiners.” Unfortunately, they often make the mistake of micro-managing the details. They dictate the look, the color scheme, the font choice, and every other piddly little detail, only to find they are disappointed with the end product. The secret to the Gardiners’ great site is trust.

They trust us, as like-minded professionals, to provide them with the best of our abilities and expect nothing less. This hands off approach reaps them many rewards.

Gardiner Angus Ranch: 73.25 hours.

• 4 hours – no original .psd, rebuilt design from scratch
• 6 hours – tentative CSS layout
• 3 hours – CSS tweaks, first revision
• 60.25 hours – plugging in content

For a small department like ours, Gardiner is a massive web site. They update frequently, add new content often, and grow continually. I started with a 278 MB folder that held a mess of files: randomly placed images with no naming convention attached, Excel spreadsheets, PDFs, SWFs, and web pages sprinkled everywhere.

Sometimes learning how to improve the pages I put out for all the world to see can feel overwhelming. Partly because it is hard to figure out where to start, and partly because I know there is so much left to fix or improve. Gardiner Angus Ranch was no different. Their rebuilt site is live, but it still has so many technical issues left to address. However, what you see is a start. Think of it as a mile marker on the 1,000 mile journey.

In my first attempt to ‘fix’ the Gardiner site, I cleaned up the GoLive site file. I deleted numerous unused files and moved images to a central location (images folder, anyone?). It sped up the ability to open the GoLive file, something was immediately appreciated by everyone who had to update the site.

The second time around, I organized the .swf files and deleted the old ones. Because Gardiner is such an important client to us, everyone was afraid of erasing old files, even after successfully updating a page. I had the original .fla files and knew I could republish any of the .swfs I accidentally erased.

The third time is/was the massive rebuild. The aim was to improve the user’s experience. The majority of their visitors have Internet Explorer 7, Flash Player 8, and JavaScript enabled. Paradoxically, the majority of the visitors are also on dial-up connections.

So, to take advantage of their up-to-date software, I updated the Flash intro (but only to Flash Player 7, so I could have access to ActionScript 2), took advantage of I.E. 7′s support of .png images (among other CSS updates), added a touch of JavaScript, and ran away with the project. I am confident that the Gardiners’ visitors are going to stand up and take notice.

All of the standard practices we have been implementing were put in to place for their site: switch out image-only rollovers for live text and a:hover in the CSS; switch out a fixed-pixel, table-based layout for a fluid CSS layout, so their content will not break the design. Get rid of spacer.gif and add padding to the CSS boxes instead. Streamline the Flash intro and take out all the unused items adding weight.

In going beyond the standard stuff, the layout is liquid – not in the sense that the layout will grow or shrink with your preferred text size, but literally liquid: stretch or squeeze your browser window and it will grow and shrink with it. [Considering the time it was originally built, their site offered the best of the best...but six years later it was starting to show its age.]

Also added to my CSS experiments were specific divs:

• featured items, with live text over a pretty gold button instead of image-only, for accessibility
• sire listings, with the purple background a single cached image for faster loading speeds
• two-column layouts within the content area, for variety and better content presentation
• styled horizontal rules, to add to the signature Gardiner look

The small piece of JavaScript I added was the Smooth Gallery slideshow, implementing CSS, HTML, and mootools (a super lightweight web2.0 JavaScript framework) and created by JonDesign. Did I mention it is accessible to boot?

And there you have it. A bit of Flash, a bit of CSS, some chunks of HTML, a piece of JavaScript, and a better web site. It is not perfect yet – no I.E. 6 CSS, no ActionScript 2 to make the intro lighter, no JavaScript to sniff the browser and switch style sheets for mobile devices – but it is a big improvement. Read: average loading time for 56k users to see the GAR Sires page before: 6 minutes, 40 seconds; and after: 40 seconds.