mindgraffiti

Thursday afternoon one of my co-workers is throwing a bridal shower for me. Yum…this time, the cake is not a lie.

Popularity: 18% [?]

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.

Popularity: 22% [?]

I admit I enjoy ranting about my frustration at wannabes who don’t want to improve their skills. I am only human and I refuse tolerate willful ignorance. Call it one of my flaws. While these amateurs are the worst kind, they are not the only type in the group.

For today, I will loosely define Amateur as a hobbyist or newbie who has little experience or no skills building for the web. Currently, Amateurs are spotted by one of three actions (or any combination thereof):

1. They consider mySpace or BlogSpot an acceptable definition of “I have a web site.”
2. They turn Homestead or Angelfire sites into a freelance business and charge $500-$1500 each.
3. They used Pagemaker or hand coded their HTML in notepad without declaring a docType.

Everyone starts out as an Amateur.

Experts are loosely defined as professionals. They are paid living wages for their skills (their employment status varies- they can be freelance, full time, consultant, etc.) and often have written books, white papers, developed/refined a method, received awards or are acknowledged and well respected by others in the industry. [It's a general definition but because Web Experts often specialize, I cannot define an an arbitrary, narrow statement like "someone who codes Ruby and uses mySQL."]

Observations

Because the learning curve for HTML is low and tools to publish to the Web are available everywhere, there are many Amateurs building web sites. To the great ire of Experts, this landslide of Amateurs devalues the skills of Experts and lowers the price expectations by customers who want a web site built.

The open source philosophy has fostered an attitude of sharing, making it acceptable for Experts to post their work. This allows Amateurs to learn by example and develop their skills. Some Amateurs hold the attitude that they need no improvement and don’t bother to learn- they stick with what they know, and that is the end of the discussion. This exasperates the Experts and leads to the snobbish, elitist attitude reflected in comments posted in help forums, Usenet groups and blogs. This leads to personal attacks by Amateurs which only multiplies the problem. Experts develop a bad reputation despite the fact that not all Experts are rude or mean. Misguided and overly proud Amateurs give legitimate Hopefuls a bad name.

The Gap Between Amateur and Expert

The Hopefuls - for the few who realize they have room to grow and much left to learn. Hopefuls are identified more by their attitude than their skill level. They may have Amateur skills, but quickly bound above that point, given time and experience. The negative attitude expressed by some of the Experts either annoys them or overwhelms them. Hopefuls show great promise in becoming an Expert one day. They actively participates in the forums, Usenet groups and blogs. They seek advice, try out tutorials and ask many questions. When interested in a subject, they take great leaps in technical improvement and knowledge.

The trouble comes when jaded Experts do not identify or sort out the Hopefuls from the always-Amateurs. When a Hopeful searches for an answer, any Expert who extends a helping hand will motivate that Hopeful to continue. When they are rebuffed with rude or snappish answers from the Experts, they stop asking questions. When the tools or approaches to problem solving used by Hopefuls are criticized without alternatives suggested, they stop contributing answers to other newbies.

The best answer to alleviate the Amateur problem? Turn them into Hopefuls. The more Hopefuls who graduate into Experts, the better off the web will be in the future. More Experts need to step up. Experts who illustrate the practical how-to, illuminate the theory behind a new method or suggest better tools will be more effective than the ones who only stop long enough to bemoan the fact that Amateurs exist. Approachable Experts will see things change because they are influencing the future set of Experts.

A few Experts who already patiently tolerate Hopefuls: Kirupa, Eric Meyer and Molly Holzschag. Hats off to you, with a Thank You and a smile.

Popularity: 25% [?]

Thanks. No. Finally, a polite message to stop those chain letters and other assorted random messages from cluttering up your inbox. A free service from your friends at 43folders.

Popularity: 25% [?]

The choices of web technologies to learn next are overwhelming: should I delve deeper into PHP and mySQL, Ruby on Rails, Python, Flex or ActionScript 3? I continue to learn better CSS techniques and understand XHTML, but where to go from here? Baby steps means learning how to program JavaScript. I can already implement JavaScript frameworks and AJAX pieces developed by others. I can read and understand what any chunk of JavaScript/PHP/ActionScript does, but writing it is another matter.

In terms of accessibility, I think microformats are my next new item to understand. A short term project I would love to test is rebuilding one of the state association member lists as hCards. I wonder if hCards will interact with Google’s Maps API? I would love to aggregate the hCards off of each of our state associations and peg them to a Google map of the U.S. and Canada.

We have so much content available at our fingertips. Why not put it to good use? Membership lists, sale dates, state association events and registration numbers all begging to be mashed up. I would love to take the chance and visualize some of the raw data we add to sites every day.

My long-term goal is to have the same skill set as the Flex developers: understand how to manipulate database calls, be capable of writing in a server-side language, know how to hook into any given API and produce a new product, delivered on a near-universal platform.

Popularity: 26% [?]