mindgraffiti

My goal is to be able to build a viable, purely CSS template, unfettered by dependencies of GoLive or Dreamweaver templates. Considering there are over 200 Web sites (and growing!) that our Web department maintains, moving to pure CSS designs would be a big advantage.

Tim (my co-worker) and I recently took a CSS workshop and are working on layouts using pure CSS. We’ve started this switch in steps. We were already using Cascading Style Sheets to manipulate text; now we’re creating menus with image rollovers and text links that work seamlessly together. I just finshed a redesign for the Fink Beef Genetics site - it is a hybrid of tables and CSS.

I’m lessening my dependency on tables in steps. I want to make sure I have solid CSS coding skills [as in, not abusing DIV tags in my HTML and not getting class-happy in my CSS], before implementing a pure CSS template for a real site.

One of the neat uses for CSS I’ve discovered recently is the ability to have an image rollover effect while still using text links. See the new Fink Beef Genetics design for an example. Why is this important? Because adding to or taking away from their navigation is now simplified. All I have to do is delete a line of code or add a line of code. With the old way, it would take hours to modify the navigation; now it takes just minutes.

With navigation, using an image rollover or images as the navigation can be a pain. Yes, you get the exact font you saw in your comp., but robots crawling your site can’t read where the navigation leads to, and images take longer to load than plain text. Also, when a change in the navigation is requested, I have to:

1. Go back to the original comp. and rebuild the navigation by hand,
2. Save the new images, and replace the old images with the new,
3. Rebuild the entire template from scratch.

For a larger site like Eby, this is a huge undertaking. Go ahead, visit their horses section. Notice the image links at the top of the page? The one named “Pedigrees?” Changing that from “Horses” took several hours of work. While it sounds like a simple request (and it should be), because of the old systems in place, it takes a ridiculous amount of time to fix.

So, pure CSS sites are a win-win situation for our clients because:

1. Navigation loads faster, and without the errors that JavaScript can sometimes encounter.
2. The layout loads once. With tables, the layout has to load again and again, with each new page request. Essentially, the client’s web site now takes seconds to load on a dial-up connection, instead of minutes.
3. The web site naturally becomes more handicap-accessible. This is good for all visitors (handicapped or not), and it also makes the site easier for the search engines to find, crawl, and index (or file, as the print world says it).

More to come. As we head into our busy season, there may not be much time available to devote to new projects; but no matter how busy it gets, we are always making improvements as we go along.

Related Posts:

• The Purpose of Design - an overview
• The Purpose of Design - Color
• The Purpose of Design - Text