Kaizen: Eby Ranch

Today I have the distinct pleasure of introducing you to another rare gem of a client: Eby Ranch. (These links will expire, but you can see the old site and new site in a side-by-side comparison for now.)

Sidenote: Some people use their other names interchangeably: Eby Cattle Company, Eby Horse Company and The Eby Group. They are just branches of a company. The Eby Group owns Eby Ranch; Eby Cattle Company and Eby Horse Company make up Eby Ranch.

Eby Ranch: 17 hours

• 1.25 hours – resize and slice original .psd
• 3 hours – rough CSS layout
• 9.75 hours – add content and other markup
• 3 hours – tweak the CSS
• 3 hours – finishing touches

This site was also still using GoLive. The folder size was smaller than the Gardiner site, weighing in at 204MB. Because the Eby Ranch web site rebuilt fell during a slow period, I was not forced to worry about cleaning up the site file and then making updates to the old site while rebuilding it. This time I had the chance to start from scratch.

Resize and Slice

Resizing the design was no easy task, since the original file resolution was 72 pixels per inch. After trying my hand at it and failing miserably, I enlisted help from a master at Photoshop. Watching the subtle changes he made to each element was mind boggling.

Rough CSS Layout

After the resize I sliced it up for a basic HTML/CSS build. The template.html and main.css files are still the blueprints used for rough layouts. After a quick validation check, the template.html file is translated into a Dreamweaver CS3 template.¹

Adding Content and Mark up

The original site consisted of tag soup (font tags, inline styles, etc.), tables nested into tables, multiple instances of text-as-images (without alt tags), JavaScript-based image rollovers for the navigation, no separation of design from content, and to top it all off, a mismatched background color.

Pulling the text out of that mess was time consuming. I resorted to visiting the web site, highlighting, copying and pasting the text into Textmate, which stripped the garbage out and resulted in plain text. The plain text was copied into Dreamweaver, which wrote in the paragraph tags. Content mark-up consisted of header tags, alt tags for images, class styles applied where necessary and microformats for the contact information.

Tweak the CSS

Conditional comments and a separate stylesheet named IE6bugfix.css is created to squash IE6 bugs. PNGfix.js is also added, to force IE6 to support the alpha transparencies found in the header images.

Finishing Touches

Some embedded Google Maps instead of a Mapquest image, vCards available for download to complement the microformats and a dash of Lightbox for some added interaction.

Footnotes
1. Tangent. I hear the experts decrying the pitfalls of Dreamweaver in the background of my consciousness. May I remind them that Dreamweaver has its strengths as well. There are five other people who may edit a site, with varying degrees of web skills. It writes acceptable code, is a useful WYSIWYG editor for the uninitiated and convenient relative links management tool for the rest. These web sites are often small and simple. A few need a CMS, which is acknowledged and addressed elsewhere. Can I write HTML by hand? Yes, and when Dreamweaver misbehaves, I often open it in Textmate and force it to behave. Can I write CSS by hand? Yes, though I prefer CSSEdit to Textmate, since it speeds up the production cycle.

A Visual Tour of Kaizen

A visual tour through the work I’ve been doing during this Sale season. Larger images are linked to the thumbnails if you’d like to see details. Enjoy!