We’re seeing many sites move to CSS based designs these days, mainly for the ease of editing and compatibility throughout all browsers.
I’ve only really recently picked up on using div tags and totally formatting the design with Cascading Stylesheets following the W3C standards for both XHTML and CSS.
I am yet to update this site to follow the W3C guidelines for these standards but this is something I do intend to look in to in the next couple of weeks or even for future designs.
The CSS Zen Garden is an awesome example of just how customisable everything is with CSS - It controls the complete layout, allowing changes to be made directly to the stylehseets and pretty much erradicating template systems.
There’s part two of a tutorial on using CSS and designing CSS based templates up on Verlee’s blog. This part of the article describes colour schemes and background image creation and the next part of the tutorial will focus on the actual framework and layout and eventually continuing on to attractive headers, titles and extra ornaments.
You’ve also got places like the CSS Vault on which users’ submit designs and redesigns of their site which follow the W3C guidelines and it is just amazing to see just how much effort, work and creativity goes into every design.
A perfect example of an attractive CSS based design is visible at SimpleBits. The HTML consists of really nothing but content, headings, and div’s. What drives the page is the CSS that Dan has written to create this powerful design.
Comments
addy (July 10th, 2004, 8:19 am)
“A people that values its privileges above its principles soon loses both.”
— Dwight D. Eisenhower, Inaugural Address, January 20, 1953
Lobster (June 5th, 2005, 2:07 am)
It’s interesting that you link to the CSS Zen Garden (missing an http:// by the way). Okay, there’s probably nobody who wouldn’t mention it in an article about the potential of CSS, but in my view there’s a big gap between what the Zen Garden could have become and what it actually is.
See, a huge majority of the styles on there are classic examples of bad CSS design. To start off with, the designers throw all the headings out of the window (and some of the text too for some) and replacing them with images, completely defeating the point of all the semantics. Most then set fixed-size fonts which (in IE at least) destroys all hope of accessibility. Finally, after the markup has been put in such a nice order, the whole lot gets absolutely positioned, so they really might as well have made one big image and set the following styles:
Of course it’s not just the designers’ fault, the developers of the Garden itself started it by making fixed markup and assuming that it was semantically suitable for any kind of design. The idea that the two processes can be completely independent is absurd; the markup still contains the semantics of the page, and in fact we really shouldn’t be claiming to use CSS for ‘layout’ at all. First we lay the markup out, then we adjust how it appears and flows.
By the way I love this preview feature. Look! I can see my post as if it were already a comment! Wheeeeeeeeeeeeeeeeeeeeeeeeeeeee. Ok I’m done.
Chris Boulton (June 5th, 2005, 8:27 am)
I agree with you there on some of the point’s you’ve mentioned Lobster - such as on the accessability. However with the images, in XHTML 2.0 the <img> tag is being depreciated in favour of doing things with CSS and using the <object> tag instead. The point of using images as headings means that those with a non-compliant or text based browser will (if it’s been done right) be able to see the text instead of the image.
CSS 3.0 is on the way soon, and it should be interesting to see how people begin using the new features in it..
Matt Light (June 5th, 2005, 2:32 pm)
Wow, when I first saw this article a couple hours ago, I thought it had just been posted. I was trying to figure out how you could say that you only recently started adopting div tags. Now I see Lobster brought a 11 month old post from the dead
Chris Boulton (June 5th, 2005, 3:09 pm)
Yeah, this post was listed in the “Possibly Related” section on the right of my menu/template posts I made yesterday.
Light, I see that you FINALLY set up your Gravatar!
Lobster (June 5th, 2005, 9:45 pm)
Thinking about it I see your point about images/headers… though I think deprecating the tag totally seems a bit odd; it depends how the tag can replace it.hopefully it’ll work out but I’m not entirely confident in the W3C any more since the disappearance of the ‘target’ attribute in XHTML which leaves no alternative but javascript, which leaves a lot to be desired :/
On the subject of javascript, this previewy thing doesn’t like me writing etc… it removes the tag and goes all flickery when I type.
Sorry for the bumpage
Chris Boulton (June 5th, 2005, 9:56 pm)
Are you using Internet Explorer? I don’t have the same problem on Firefox - it’s pretty smooth. I’m guessing it is just an issue with javascript and rewriting the contents of a div whenever a keypress is made.
saralk (June 20th, 2005, 8:13 pm)
I think that the Zen Garden is only meant to be a proof of concept, and not a benchmark for how websites should be designed.
And, WOW, Lobster is right, the preview thing is awesome.