Wednesday, December 08, 2010

Accepting web design and funky CSS

I've made a few websites from scratch in notepad and played around with programs like Dreamweaver, but I was never very happy with the results and my understanding. The websites felt amateur, and CSS always seemed to do weird things. I gave up on further work on websites thinking that I was missing something about web design - that I wasn't quite up to the standards and secrets. In the meantime, I've collected a mess of links on web design which I thought someday might help me. HTML Dog and W3Schools are the two that I am most familiar with. In my quest to understand CSS, I'd also bookmarked, HTML Source, HTML Help from The Web Design Group, Good Tutorials which lists a bunch of other tutorials, an interesting extension of CSS called "HSS", and the Open Directory's listing on CSS. For general web design, I'd also found a list of 100+ resources, a handy "complete color chart". Suffice it to say that I did not read all these links carefully. It's the problem with bookmarks: it's easy to file away and forget. However, after all this I never took the time to look at the official source, W3's official specification (see the CSS 2.1 draft). I did look at it today, and found it somewhat helpful although still not completely clear. In my quest, I also bookmarked Wikipedia's Comparison of HTML editors; now, I also see another list of web design programs on

In my search, I found articles which I thought offered solutions, such as strange hackish One True Layout, and teaser samples of Sitepoint books such as HTML Utopia: Designing Without Tables, The Art & Science Of CSS or Everything You Know About CSS is Wrong I never bought those books. I also found that I wasn't the only one frustrated by CSS. In February 2009, I found an article by Eric Meyer (Wanted: Layout System), lamenting the fact that CSS has historically lacked any decent layout system. I also found a Reddit discussion (Does anyone else who doesn't work with CSS on a regular basis feel like a champ whenever they get it to work?). I didn't really understand what these posts were talking about at the time, and I still only vaguely follow them. For example, I don't understand Eric's point that the only reason floats are used is that there's the clear value which allows footers to be set at the bottom. I can use floats to create a decent layout without clearing at all. However, I agree with the general idea. When I think of web design, the tables based method is the most intuitive. I should be able to cut the screen into little pieces which don't overlap into each other. Floats are a hackish way to do that, but there should be something better.

One of the commenters to Eric's article mentioned Blueprint (and the similar program 960 Grid System as a way to get past this issue. I don't understand that. I get that Blueprint is a handy way to deal with defaults and special Internet Explorer quirks, but I don't understand how their grid makes CSS more intuitive and less hackish. Why split a webpage into 24 columns, and then use those 24 columns to create a basic layout with 3 columns, or however many columns? Working with the grid has its own rules (shown pretty well in the tutorial A Closer Look At the Blueprint CSS Framework). Further, it uses a fixed layout, and I generally come down on the side of using a relative "liquid" layout (see The Great Fixed Vs Relative Width Page Layout Debate).

After all this, I'm still rather confused. I think ultimately I need to get down to actually working on websites and hacking through problems however I have to. I don't actually need a perfect layout system. I can work with what's there, and what's really important in my website ideas are the databases and related programming. So I'll be trimming out my web design links and leaving instead the bookmarks on databases and programming. Perfectionism is the enemy of productivity.

No comments: