Mobile version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

And So the Garden Grows

May 19, 2003

Alright! Now we’re going somewhere! The Zen Garden has shown up on BD4D and Newstoday, both design portals that reach the other half of the audience that the Garden is intended for.

I’ve said it a few times now, and feel free to correct me if you see it differently — the problem has been that code geeks have wrapped their mind around advanced CSS layout and know how to use it well, but they’re incapable of anything beyond simple, boxy layouts. Designers haven’t had the slightest interest in figuring it out due to sketchy browser support, and far more importantly, lack of design tools. That’s why the best graphic designers are so focused on Flash — it’s intuitive to build with, has a well–built design interface, and the coding works. All the time. In every browser.

We’re hitting a turning point here, where valid CSS layout is now more than a pipe dream, it’s a legitimate way of building a site. Once designers get their mind around it and the ideas start flowing, you will begin seeing amazing things. Bet on it.

(Incidentally, there have been 8 additions to the Garden since its launch, make sure not to miss the latest)


Reader Comments

1
Duc says:
May 19, 02h

Hope Newstoday’s crew can put together a submission to the garden like they implied they were going to do. Can’t wait for that one!

2
Bertilo says:
May 20, 02h

They will not all function. Several of them (even most) get _overlapping text_ (large chunks of it) with just a bit of text zoom (and some minimum font size) in Mozilla et. al.

The result is _text that can not be read_. (In at least one case you can’t even get at the links to change to a different style sheet because of severe text overlapping.)

The solution is to go for simpler design. Some things just can’t be reliably done with CSS.

Good design with CSS (at least for screen display) must always be flexible. It must work under wildly varying conditions. If not - it’s broken. If it’s broken, it should not play, not matter how pretty the colors and the pictures.

3
haiyan says:
May 20, 02h

I would like to see Zen Garden take psd’s submitted by designers and realize them with CSS.

The major problem I’ve had with the current project I’m working on, is that as much I would like to rely on CSS all the time, I just can’t seem to faithfully recreate the original design with it.

4
Lea says:
May 20, 02h

Bertilo, I think the point of the Zen Garden is *not* to go with a “simpler design” but to be able to show “how pretty the colors and the pictures” are while utilizing a different medium besides Flash or conventional HTML methods (i.e. slicing and messy code)

Some designs may be made to be ULTRA flexible and be very simple. Others, as flexible as it can be, without consideration of a user’s personal browser preferences. Design and coding is for the greater good, anyway, so frankly, why should we consider the 0.05% (random percent here) who fiddle with their settings? To my understanding, a majority of web surfers don’t touch the “factory settings” and surf happily away. Thus, having the designs on Zen Garden appeasing 99% of users using the lastest browsers.

5
Dave S. says:
May 20, 04h

Bertilo, you’re way too dogmatic. If I were to call CSS a complete failure because I couldn’t kern my text in it, (which is a perfectly valid design concern, I cannot yet do that) then I’d have abandoned it long ago. To say that a design is broken because it doesn’t conform to your narow criteria is a flawed approach.

I am willing to concede that the designers (myself included) are to blame for examples in the Garden which don’t handle a bit of font scaling. That doesn’t mean their designs are broken, merely that they didn’t account for the contingency. Right now the biggest challenge with CSS is cross-browser support, and we’ve just about figured that out. But it’s still pretty easy to get lost in testing for the various browsers, and forgetting about font scaling.

View Mike Pick’s ‘Dead or Alive’, Keith’s ‘Wicked Grove’ and my recent addition ‘Coastal Breeze’ for some designs which safely allow you to jump up two font sizes in Mozilla. See, it can be done given forethought and proper testing. Now go read my link again for reasons why it can’t always be done given the current state of CSS.

haiyan - I’m up for the challenge. Send me a JPG. If I think the design itself is strong enough to make it into the Garden, I’ll build it myself. I built all my examples in Photoshop first, the exact same way I’d build a tabled design, and then converted them afterwards to CSS. If you’re familiar with the approach, it’s just as easy (and I have to say, even despite all the IE5 testing, it’s even easier) as building a site with tables.

6
Keith says:
May 20, 04h

Bertilo - We could debate all day about what consitutes “broken” – In my mind none of these really “break”. But hey, I get your point. I would also agree with Dave’s assertion that most people don’t muck with the “factory” settings.

Haiyan - I too do the majority of my designs in Photoshop first and then convert them. I don’t do everything in all CSS, but that is neither here nor there. If you are interested in a process for coverting photoshop designs into Web standard, CSS based code, I guess Zeldman’s new book, Designing With Web Standards, has some really good info on that.

I’ve not read it but I trust that’s the case.

7
haze says:
May 20, 05h

haha back to the ol’ form vs functionality issue.

designers tend to go crazy with the aesthetics-side of the project, making the site gorgeous to look at, but completely unusable. coders tend to go all out on functionality, making the site totally functional, but looks like a crappy, generic jakob nielson “use-it” site.

nobody will ever get that balance right because the median is different with each person. to constantly bitch about usability is the same as constantly bitching about the aesthetics. the key is to quit your bitching and realize that your pride is irrelevant in the end-product; the site is for your client’s audience… whatever works for them, go with it.

8
Dave S. says:
May 20, 06h

Man, I was waiting for you to show up, haze! Good points as always, and as always, here’s my addendum/refutation:

There are general points that most people can agree are consistently good principles for every audience, and the rest are details. Macromedia’s approach is going to be totally different than Microsoft’s, because they’re targetting different end users. But neither of ‘em would use red text on a green background, for starters.

There’s definitely middle ground here, but dogmatic right-brainers are going to miss it just as easily as flighty left-brainers.

9
Dave S. says:
May 20, 07h

Bertilo, you can’t please all of the people all of the time. See here where I’ve addressed this exact issue before.

I suppose I could always scrap HTML text and have everyone convert their copy to images with pixel fonts… that would solve the ‘bad design’ problem, no?

10
Keith says:
May 20, 11h

Well, it’s all about fluid design, regardless of how they “look” they will all still function. And frankly, I’m going to have to disagree with Bertilo on this anyway, I’ve checked a few of them with various font sizes and they seem to look pretty well. I know when i was working on Wicked Grove I checked this out and was fairly happy with the results.

There are no assurances, with CSS or otherwise, as Dave points out, when the user ultimately controls the experience. I mean, I could go to say, k10k, turn of my images and that site is going to “look horrible” right??

11
Bertilo says:
May 20, 12h

Most of the designs in the Zen Garden are actually amazingly beautiful, outright stunning… as long as you use the same browser settings as the authors. If you use other settings for fonts and especially font sizes (font zooming, minimum font size, ignore font sizes…), _most_ of the current designs (yes, that is _most_!) break horribly. That means _they look horrible_. I have to use strong words here: The Zen Garden, as it stands now, only shows how badly you can design with CSS. Sorry, but that’s the way it is.

12
Bertilo says:
May 21, 01h

Keith: The point is to show what CAN be done with CSS. Period.

That is indeed the point with the CSS Garden. But “what can be done” is not only _good design_. “What can be done” also includes _bad design_, e.g. _design that breaks_ and design that sometimes looks awful.

Actually the Zen Garden has (among other things) shown exactly that.

I however thought that the contributions that are accepted into the garden should be the good ones, not the bad ones.

Keith: It’s fairly obvious that you aren’t the target audience for the CSS Zen Garden - Graphic Designers are. If they come to the site, see some neat designs done with CSS and find some value in it, then the site is a success.

Aren’t they supposed to see designs that could actually be used on the web? Are they supposed to be tricked into believing that some things can be done with CSS, that actually can’t?

Keiht: Also, if you look at my design (Wicked Grove), I checked it in numerous browsers and it scales just fine, I don’t think it breaks at all.

True. Wicked Grove is one of those that do work. It’s a superb design. Congrats! (Well, actually it break just a little at extreme text zoom, but nowhere near the worst examples in the Garden.)

Keith: Maybe, to enlighen those who might not know, you can “delve into the actual CSS” and explain where they go wrong.

OK. I picked ‘A Garden Apart’ (more or less at random). It has among other things these rules (slightly abbreviated here):

#quickSummary { position: absolute; top: 92px; right: 0; }

#linkList { position: absolute; top: 92px; right: 0; }

#linkList2 { margin: 190px 15px 15px 15px; }

The values for margin for #linkList2 is the main problem here. The value 190px gives the vertical space where #quickSummary is supposed to live. That presupposes that #quickSummary will not need more than 190px vertically. #quickSummary however has text content, and there is no telling how high it will actually turn out to be. With just a bit of text zoom it will be much more than 190px, and its text will overlap that of #linkList2.

This design could perhaps have been more robust if em units had been used instead of px.

13
Bertilo says:
May 21, 04h

Dave S: Bertilo, you’re way too dogmatic. If I were to call CSS a complete failure because I couldn’t kern my text in it, (which is a perfectly valid design concern, I cannot yet do that) then I’d have abandoned it long ago.

I did not call CSS a failure. I only said that some things can not be done with CSS. So, we just avoid doing those things. There are plenty of nice things we can do.

Keith: We could debate all day about what consitutes “broken” – In my mind none of these really “break”.

If you can’t read the text, not even with a magnyfying glass, since the text you’re trying to read overlaps with other text, then the page is most certainly as broken as broken can ever be.

Lea: why should we consider the 0.05% (random percent here) who fiddle with their settings?

Because they are not “fiddling”. They are adjusting their browsers so they can use the web. Some people need to set a minimum font size and/or font zooming in order to be able to read the text at all, or to be able to read it without eye strain or headaches. Some peole do not know how to adjust their browser, some do. Do we really want to punish those that do know, and that need to adjust their settings? Why not just go ahead and punish all that don’t use the standard OS (Windows) with another browser than the one installed by default (MSIE)? Why have they “fiddled” with their disks (instaling Linux instead)? Why have they fiddled with their default programs (installing Mozilla)? Most people (more than 90%, I’d guess) don’t do these things. Why care about the other few percent of “fiddlers” at all?

14
Jemaleddin says:
May 21, 08h

Bertilo, I think you’ve seriously missed the point of this exercise. The garden isn’t a real site. It doesn’t have real users or even real uses. It’s an example of how something primarily functional like semantic html can be made beautiful. Of course you’d implement some things differently if you were making a real site - TechnOhm has an image called bandwidthkiller.jpg for pete’s sake.

15
Keith says:
May 21, 09h

Bertilo - You really have missed the point. I mean can you tell me that not one of the designs works for you under any circumstances? I don’t think so. If anything, blame the design not the technology. Do you realize that the designer has no control whatsoever over the actual HTML page and are limited to just editing a style sheet?? That shows the amazing power of what CSS can do - you could, for instance, create your own stylesheet for this site, thus making it display however works for you. Or, if it was a “real” site – a basic stylesheet could be very easily made available to those folks who might have problems with a certain design.

The point here is that you CAN change the font size, and you CAN change the stylesheet to suit your needs. This can also be done fairly easily or in a rather complex manner, whatever suits your needs. It’s flexible.

The point of this was to show some of the extreme things that can be done with CSS - obviously we could very easily show more simple flexible designs, but that isn’t the point. The fact that we’re even having this discussion proves the fact that CSS based designs are extremely flexible.

16
Bertilo says:
May 21, 11h

Jemaleddin: The garden isn’t a real site. It doesn’t have real users or even real uses.

So what’s its use then? Designs that look pretty (with some limited user settings), but can’t be used in real sites are of little or no value.

Keith: I mean can you tell me that not one of the designs works for you under any circumstances? I don’t think so.

Of course not. Some of them work very well, but _most_ don’t. That’s what I wrote.

Just have a spin with Mozilla or some other Gecko-based browser, using text zoom etc. You’ll see for yourself how many of the designs break (remember: try to read the text).

I haven’t delved into the actual CSS to find out precisely where the faulty designs go wrong, but it seems to mainly center aroung _repositioning_ of major parts of the content. Drastic repositioning, changing the actual order of the content, can often only be done if you specify the exact width and/or height, and also position, for the moved elements. To do that you need to now how much space the content of those elements will need. And there’s the rub: You can’t know how much space text will take, since you can’t know and you can’t control which fonts and what font sizes will be used (you can only suggest). If you can edit the HTML and change the order of the content elements there, then you can get a lot more done. The Zen Garden however (as far as I understand) tries to demonstrate how much you can do with CSS only. But some (many) of the designers are trying to do things you cant’ really do that way.

Anyone who thinks you can control the fonts and the font sizes has misunderstood what CSS is and how it works (at least for the WWW).

These problems would get immensly larger if the designs were to be used with templates, where the actual content can vary. Serious web publishing very often uses templates.

17
Keith says:
May 21, 11h

Again, you are missing the point. You asked - “So what’s its use then? Designs that look pretty (with some limited user settings), but can’t be used in real sites are of little or no value.”

The point is to show what CAN be done with CSS. Period.

All of these sites have value in showing how HTML can be manipulated with CSS to produce some extreme, “controlled” if you wan’t to go there, designs. What’s more - I would assert that all of these designs are more USEFUL and USABLE than many of the tabled, pixel perfect layouts you see many designers out there producing. Some of the designs might not be “prefect” but who says any of this is black and white. It’s an experiment for crying out loud.

It’s fairly obvious that you aren’t the target audience for the CSS Zen Garden - Graphic Designers are. If they come to the site, see some neat designs done with CSS and find some value in it, then the site is a success.

Also, if you look at my design (Wicked Grove), I checked it in numerous browsers and it scales just fine, I don’t think it breaks at all. This is an open site, you are free to take this to the next level and produce your own design that not only looks good, but also fits whatever critera you choose. I’m quite confident that it can be done.

Maybe, to enlighen those who might not know, you can “delve into the actual CSS” and explain where they go wrong.