The CSS-Layout Adoption Dilemma
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.
0 comments Saturday 22 Jul 2006 | Technology
I think it perhaps says something about CSS its self that it’s been around for a while now, yet is still not as widely adopted as one would think. As you say, many of us prefer to design and tinker in a visual environment by moving things about and seeing how they look and feel. This enables you to create on the fly as it were. From my purely amateur perspective, with CSS it seems to me you have to create everything in a raw and ugly way then go back an add a lot of arcane codes after the fact to get it to look the way you want. It just seems counter intuitive. CSS standards may be for our own good, but working with them does seem to stifle the creativity at times.
Also man, WordStar dot codes? Dude, please tell me you’re also an expert in LaTex, because that would just make you the geek king of layout and formatting.
LaTeX? Of course. I wrote my masters thesis in it. If you’re in the mood to read something unintelligible with lots of math equations in it, go to the old Statistics articles on my writing page and read through a bit.
Actually, I also used LaTeX sometimes (back in those days when I remembered how to use it) to format my fiction writing because the finished layout is quite nice and clean-looking.
Back to your main point: I agree with you completely. In many ways the whole HTML/CSS web evolution has been unfortunate and complicated. I guess that’s the tradeoff we get for having an Open Specification and generally free Internet instead of the vision that companies like AOL and Prodigy and MSN and Compuserve originally had, where the interface would be completely proprietary and companies would pay a fair amount of money for their service (what we think of now as a website) to be available to customers.
No, the web was an accidental evolution where the original HTML encoding wasn’t meant to involve fancy layout, and instead it was intended to be the next version of Gopher. We’ve weathered the days of proprietary HTML tags in the old Netscape/IE wars, the hyped-up and mostly failed Java Applet revolution, Microsoft’s stupid VBScript…
It’s an imperfect world. But separation of content (HTML) and layout (CSS) is good form, leads you to better—and more easily maintained sites, helps web crawlers understand your content in a non-visual context, and even makes it easier for blind people to use tools to access the web. And I still say it’s “good for you” in the same way that learning how to hold a watercolor brush or curling your fingers just right when playing the piano is good for you: if you want to excel at the medium, it’s worth going through a bit of pain to learn to master it properly. (Translation: Eat Your Broccoli!)
Though I agree that evolution is a great thing for the web, I must state that depending on your development environment, you may or may not have the time to use css for developing large numbers of sites. The reason many developers are shying away from css is that it takes far longer to plan and implement css into a site.
I personally LOVE css and am experimenting with it all the time but have not found it to be practical for developing a site for clients at a break-neck pace. And believe me, many clients don’t care HOW you do a site, they care about when.
I think that the web is actually going through a period of over-simplification with respect to design and layout. We were bombed in the late 90′s through just last year when I noticed that sites became cleaner and more readable.
I believe that CSS is the vehicle that is driving this movement. The clean layouts, readable text and simple access to more information with a single click are examples of useability that have been widely ignored for the sake of “pretty” designs.
So, I think that the underlying fact is that developers are more than likely diving in to the “CSS in 10 Minutes” books all over the world. But until these books move from casual (dare I say this?) bathroom reading to their office, we may have to wait for the trend to catch on.
When you elect to view the source of a website, you may not necessarily be viewing the code that was originally written. Many website designers that use php or asp as their code of choice, may be using css.
The problem with viewing the source of a php or asp page is that alot of the code is executed server side and the page source on the client side is what is written by the server side execution.
I’m not sure if I’m really explaining this very well. Just know, that when I code a website styled heavily with css, instead of using tables and such, if I were to view the public page source instead of the original code, it looks as though it was done using tables, etc.
With all due respect, Steven, no, HTML source for websites that use CSS layout do not look like they used tables. You do not see near-infinitely-nested TR and TD tags carving everything up. (You can see a dizzying array of DIV tags, but that’s another matter.)