Join Andy Clarke for an in-depth discussion in this video CSS goes mainstream, part of CSS for Designers.
- View Offline
- [Male Instructor] In the last movie we looked at the history of CSS, and some of the early layouts and techniques that were possible at that time. What was interesting to me, from a designer's point of view, was what happened when designers began to use CSS in a more commercial environment. And at that point, it became very, very exciting. There are two sites that I want to share with you that were very inspirational in that early period, one of which was the CSS Zen Garden. - [Female Instructor] Of course, which remains influential to this day, but obviously, moving us forward.
- [Male Instructor] Absolutely. The Zen Garden concept, which was developed by a Canadian designer called Dave Shea, is based on a very simple concept, which is one, standard xhtml document which can't be modified, and a CSS file. So designers are encouraged to create new designs all from the same document, being only able to change the CSS and add their own graphics. There are currently 187 designs in the CSS Zen Garden, and if we take a look at some of the very early designs, we can see a progression of designers becoming more and more daring, and being able to understand exactly what is possible with CSS.
- [Female Instructor] I happen to love this particular design. - [Male Instructor] This one isn't to my taste, but it really does show off the fact that CSS layouts, even at this early stage, didn't need to be boxy. They didn't need to replicate table-based designs. - [Female Instructor] I think also, as we'll be talking later in the tutorial, it's an excellent experiment in typography as well, so that's what really appeals to me about that one. - [Male Instructor] Well, designers from all over the world have contributed to the Zen Garden up until now, and if we have a look at one or two of my personal favorites, all of these bookmarks are in the bookmarks.html file, and of course you can visit the Zen Garden and browse the archives yourself.
This is one of my particular favorites. - [Female Instructor] Great. The color is so wonderful, and the layout. - [Male Instructor] What's interesting to me with this design is that although the actual column structure itself is very simple, the way that the designer has used elements which break out of the box, that has particular appeal. - [Female Instructor] Definitely. And I think that was a big complaint early on, was how boxy, everything, you know, oh, you could tell a CSS design because it's just boxes. There's nothing interesting.
And of course, I think the Zen Garden and designs like this totally blow that belief out of the water. - [Male Instructor] Well, we only have to compare this with something like this. And we can see that the document itself has not changed. The only thing that the designer's been able to modify is the CSS file, and add his own graphics. A completely different look, completely different design, and really, what it demonstrates to me very clearly is that the design of a page is not dependent on the markup that sits underneath it.
- [Female Instructor] I think it's also great to see how we've broken out of tables and into these different ways of looking at things, and the graphics have become bigger and bolder. What do you think about that? - [Male Instructor] I think it's been a really good place to showcase experimentation. If we have a look at, for example, this site here by a British designer, Patrick Griffiths, the design, to me, it's not a great visual design, but one of the things that this site, that this page, demonstrated, one of the first pages to do it, was what we call elastic layout.
Designers are often tempted to lay everything out in pixels. They want everything to be pixel-perfect. This design uses em based or relative measurements. So as the text size increases, I'm pressing Control + plus and Control + minus on the keyboard, we can see that the layout is elastic as the text itself increases.
This, to me, was one of the designs that really showed that working with advanced techniques was becoming possible. - [Female Instructor] Well, what's interesting to me, when I'm hearing us talk about this, is that in the last movie we brought up the issue of how it was really individuals who were moving things forward. And the original technique for the pop-ups came from Eric Meyer, but it's so fascinating because Eric Meyer isn't a designer, he's the technologist. He figured out the technique, and then you get it in the hand of a visual designer, an interaction designer, and look what happens.
Of course I couldn't leave this particular movie without showing you mine. I was very pleased when this entered the Garden. I'm sure it's not the greatest visual design in the world, but the whole thing was put together in a weekend, and it made me very happy when Dave Shea added it to the Garden. - [Female Instructor] I bet that was a great moment. And it also, if you scroll down a little bit, you can see how you are using boxes, but when you get down lower there, you begin to see them at different angles. These are features that we really never, really saw before in table-based layouts.
- [Male Instructor] So the Zen Garden to me was very, very inspirational. And I think that it was a turning point where designers began to say, I can implement my designs with CSS and with standards-based markup. I don't have to use alternative technologies such as Flash. I don't have to go to, back to the old fashioned ways of laying out a document with tables and spacer gifs. And from this point, we started to see a lot more commercial sites adopting CSS.
We saw a lot more blog and personal sites adopting CSS. And this is a page from a gallery site called The CSS Vault, and this is the earliest page from November 2003. But we can see already, just from these screenshots, the huge variety of different types of designs that were being implemented with CSS. What's been interesting to me throughout this whole process is that the more and more that designers get involved, the more and more they embrace CSS, the more and more daring they want to be.
And up until now, designers have been limited somewhat by browser support, and by the understandings that they have about working with CSS. And I think now we're at a real watershed, where we're going to start seeing some real evolution in terms of CSS design.