You know, “web design” in a pretty unique art/engineering field because more than any other that I can think of, your work is completely naked. What I mean is that I can select “View Source” from my browser and see exactly how people built their websites. It’s like you go into a restaurant and the recipe for every dish is written on the bottom of the plate. Or you have the ability to look directly at every architect’s blueprints.
I’ve been looking under the hood of many many websites since I decided to invest the time in being a professional developer, including those of some major business and (as I wrote earlier) of some web design firms themselves.
My overwhelming observation is that almost no web designers are using modern CSS layout technologies in their web designs. At first I was completely stymied. I mean, this is their livelihood! Forgive all my similes today, but that’s like a surgeon refusing to keep up on major advances in her or his field. And yet I’m finally beginning to understand what’s happening: modern web design (specifically CSS layout) requires designers to be “coders”.
I often forget that many, if not most, computer people (professionals) are NOT programmers. After all, my start with computers was in days of the Apple, DOS, etc. If you wanted to do anything you had to learn some sort of coding practice, and I don’t just mean BASIC. WordStar, one of the first word processors, required you put “dot-commands” (a period followed by a two letter “command”) to set things like line height or character width. I just spoke with a WordPerfect user who is just now switching word processors and asking if there’s a “reveal codes” function.
Today’s web designers are able to mostly-avoid HTML “coding” with the use of Dreamweaver. They go through a bit-too-sluggish process of setting classes to their various bits of text and they use the CSS controls to then set properties like margin and font and color to those classes, but even those classes are haphazardly created, sprinkled madly about the page. They can deal with embedded tables for layout because embedded tables are really a graphical paradigm. It’s not much different than an artist learning to do stained glass art. You break your picture up into small pieces and then sow them back together. The web editor is a glorified cutting-knife with slightly archaic rules and restrictions.
As I have written over the last month, CSS 2.1 design and layout is a bit of a mind twister. Positioning (absolute, relative, static and fixed) & floating and clearing, margins & padding, and even embedded divs—you have to create a conceptual image in your mind about how you want your page layout to work, and then you have to translate it into a specific code. My problem was that there were a lot of rules and those rules are complicated with all the broken browser (read: Microsoft Internet Explorer 5 and 6) implementations that you have to remember. (And the CSS coding “tricks” to create exceptions depending on which browser is handling them are repugnant!)
What surprises me is that there are, to my knowledge, no major computer tools to help a person “play around” with CSS layout graphically. Div elements have distinctive “behaviors” that one should be able to play around with until a functional page layout model is ready to be filled with content. We should be able to poke and twist and drag and set some basic fundamental properties without going through dizzying dialogue boxes and settings lists.
If Box A is contained in Box B and we want to turn it into our “page footer” we should flip a simple property and have it “glue itself to the bottom of Box A”. In technical terms, that means switching Box B to “absolute positioning”, defining its position by the “bottom” element, and making sure Box A has either “absolute” or “relative” positioning defined itself. The web designer shouldn’t have to think in terms of that last sentence I just wrote! He or she should say “Box B is inside Box A and it’s sticking to the bottom of Box A. (If Box A is resized, Box B is attached to the bottom margin.)
This is a little tougher than a game of Tetris, but not too many orders of magnitude. Unfortunately, neither Dreamweaver or Adobe GoLive does this really well. (GoLive is far easier than Dreamweaver at it, but nothing near where it should be.)
So there’s our dilemma. In today’s world where a small minority of computer professionals can write a line of code in any language whatsoever, it is unrealistic to expect them to adapt to CSS 2.1 in the near future. The pity is that, in terms of functionality and power, CSS 2.1 is ready for prime time. It has huge advantages over the status quo. We should be moving all our web design to it. But unfortunately, I think we’re waiting for an adequate utility to allow simple-yet-comprehensive layout experimentation. If only I were a GUI application developer with a flair for abstract concepts and maybe some game design, I would make my million.