CSS Zen Garden
May 10, 2003 9:53 AM   Subscribe

CSS Zen and the art of motorcycle website maintainance; a stunning demonstration of what can be accomplished visually through CSS–based design.
posted by riffola (36 comments total)
 
Some nice layouts but I hate when designers lock me into a specific font size. Some of those sites are unreadable at my normal resolution.

With relative text sizes I can use my wheel mouse to shrink and expand text but the majority or CSS based (even my own - I am going to fix it soon..) take this control away. For instance in the storm weather template i couldn't read the top navigation menu. I can only imagine how difficult this is for someone with bad eyesight.
posted by srboisvert at 10:56 AM on May 10, 2003


Wow. Nice resource, thanks Riffola: I'm reading Elizabeth Castro's "HTML for the www, with XHTML and CSS" right now, and this is just the sort of thing I need to see.

Gassho.
posted by Blue Stone at 11:00 AM on May 10, 2003


CSS support is getting there... Those layouts won't work properly in some older browsers, but it's a nice demonstration of what can be done.

srvoisvert: The text sizes are easily changed in all three (Mac) browsers I just tested. "Command +" or "Command -" increases or decreases the text size. I'm pretty sure "Alt +" works too.
posted by maniactown at 11:09 AM on May 10, 2003


Srboisvert, in the stormweather template, (in Mozilla, anyway) the top navigation text is not fixed, however, beyond a certain size, it spills out horribly into the main page.

A lesson that we can learn from others mistakes, also.
posted by Blue Stone at 11:09 AM on May 10, 2003


I hate when a website 'holds' you in itself.
Click the back button (or shortcut) and you just refresh the page. Screw that. That's on the level of popup ads.
posted by Busithoth at 11:25 AM on May 10, 2003


Those layouts won't work properly in some older browsers, but it's a nice demonstration of what can be done.

Actually, it looks really good in Netscape 4.7 (and I assume other older browsers) since it uses @import to load the css, older browsers should just render the plain html without all the fancy graphics.
posted by bobo123 at 12:00 PM on May 10, 2003


"Click the back button (or shortcut) and you just refresh the page. Screw that. That's on the level of popup ads."

click back twice.
posted by lotsofno at 12:08 PM on May 10, 2003


css tabs a treat for nice web developers at metafilter.

does anyone really worry too much about netscape 4.x any more? who would drive a yugo when you can get an acura for free?
posted by specialk420 at 12:34 PM on May 10, 2003


I like that css zen garden has a metafilteresque theme - arch4.20. I wonder if it's an homage?
posted by Phatty Lumpkin at 12:36 PM on May 10, 2003


click back twice

No thanks. Here's how my back button works: when I click it once, I go back! Single and double clicking the mouse have totally different semantics. The repetitive actions one performs while computing all day go into 'muscle memory' - altering their expected effect is jarring and unwelcome.
posted by crunchburger at 1:37 PM on May 10, 2003


who would drive a yugo when you can get an acura for free?

Godwin.
posted by Su at 1:54 PM on May 10, 2003


"Is there anything more beautiful than a beautiful, beautiful flamingo, flying across in front of a beautiful sunset? And he's carrying a beautiful rose in his beak, and also he's carrying a very beautiful painting with his feet. And also, you're drunk."

huh huh huh. "Deep Thoughts."
posted by kaibutsu at 3:11 PM on May 10, 2003


I hate when designers lock me into a specific font size.

That's actually the result of an IE bug; in Netscape, Mozilla, Opera, and Safari, fonts are resizable with no problem.
posted by eustacescrubb at 3:16 PM on May 10, 2003


As a novice designer who primarily uses IE, it's very hard to get away from the text size issue. Pixels, points, percentages, key words, what do you use?

And I know someone who uses NS 4.1 on a Sun system. My mind boggles.
posted by lychee at 4:40 PM on May 10, 2003


Busithoth: I'm sorry, but you're wrong. If I go to the page, then hit the back button, it takes me back to MeFi. If I go to the page, click a link, then hit the back button, then yes, I have to hit back twice to get back to MeFi. That's the standard behavior, isn't it? It would be very confusing if you clicked a link on the page, hit the back button, and then were taken two links back, all the way back to Metafilter.

Perhaps your browser is broken?
posted by Ptrin at 5:22 PM on May 10, 2003


Sigh.

CSS is, in concept, a fine idea. In practice, however, it is usually more trouble than "tried-and-true" methods that are, by the way, cross-browser (tables come to mind). Of course, most CSS-heads will tell you that "ice" layouts, (hard pixel-positioned) are a bad idea, but CSS can't even guarantee font sizes will be accurate. That's just absurd.

I think that this all comes from the different interpretation of how the web is supposed to look. Old fashioned folk will say, "HTML is just content distribution. Layout is bunk." But then newbies come along and say, "Design is King! Now where do I put this 400k splash page?" There is a happy medium that can be achieved.

For instance, as much as people rail against Flash, it is the single best implementation of fonts and layout. Something done in Flash looks the same on any platform. It can scale to browser window size. Fonts are encoded and don't need to be installed on the platform. Used correctly, it's fast and pretty. With actionscript, you can do graphic manipulations that are simply out of this world. Flash also handles dynamic data, even if it is a bit ham-fisted about it.

The only problem is that Flash isn't crawlable, so spiders can't do anything with the content. There are ways to get around this, but they're still hacks. But can we please just step back a little and be honest with ourselves. This site is chock-full of CSS coolness. But compare it with this Flash site and you'll see it can't hold a candle to it visually.
posted by Civil_Disobedient at 5:32 PM on May 10, 2003


Owen Brigg's Sane CSS Sizes method works pretty well.
posted by kirkaracha at 6:04 PM on May 10, 2003


D'oh! Briggs'
posted by kirkaracha at 6:05 PM on May 10, 2003


Softening my earlier line: this is a demo site, not production. Or prezizzle as they say in the biznot.
posted by crunchburger at 6:08 PM on May 10, 2003


"The only problem is that Flash isn't crawlable."

It's also still not very good at accessibility or devices other than a web browser on a desktop or laptop. Try using a screen reader on a Flash site. (Granted, recent releases provide more accessibility tools, but still.)

Tables are much easier to use for layouts. If you don't care about accessibility guidelines, or if you want to maintain multiple versions of the site for accessibility compliance. And if you don't need to redesign the site. Other people have broken this down, so I won't linger on the issue, but CSS is a long-term investment that more than pays off with ease of maintenance, ability to easily adapt designs, accessibility, and cross-device usefulness.
posted by blissbat at 6:17 PM on May 10, 2003


An amendment: Flash is completely appropriate for some sites. There's no need for "Flash is great" to mean "CSS is crap." It's primarily a question of what's appropriate for the audience at hand. Also: hurrah for CSS Zen Garden!
posted by blissbat at 6:20 PM on May 10, 2003


Those layouts won't work properly in some older browsers, but it's a nice demonstration of what can be done.

The image on the salmon coloured page craps out in Safari, too. Still, good resource.
posted by btwillig at 7:48 PM on May 10, 2003


that cool flash site is a blank page on my machine.... i guess i don't have something installed, but you think it would tell me what, no?
posted by andrew cooke at 8:11 PM on May 10, 2003


Oh why, oh why, don't CSS evangelizers give the world what everyone is clearly waiting for: the indented paragraph.
posted by raaka at 8:13 PM on May 10, 2003


who would drive a yugo when you can get an acura for free?

Godwin.


I thought Godwin drove a Volkswagen.

One of the first things I noticed while parsing through the layout of the first zen page was "Using Background Image to Replace Text". Excuse me for a bit of CSS ignorance//heresy, but is THAT trip really necessary?
posted by wendell at 8:17 PM on May 10, 2003


Hmm, visiting the flash site mentioned above, and all I have to say is that it loses major points in accessability of info. It just takes too long to a) get to the initial screen (I'm referring to the initial one after the choice of connection) and b) navigating with the links takes quite some time because there's just too much emphasis on graphics. While it may be an effective use of flash, IMHO it's a case of flash over functionality. Yes, it looks neat, but it's just slow.

Meanwhile, the CSS example in the original link is pretty decent, and is available more or less immediately.
posted by piper28 at 8:33 PM on May 10, 2003


The only problem is that Flash isn't crawlable

hmmm. did you try printing any of the subpages on injection molded plastic site? flash has its place but i'd rather read my ny times in straight html - than in flash or as a pdf.


at the vary least css allows a develop to store all his/her site design parameters in one place, thus making the change of width of column of text a 1 key stroke job on a given site rather than a massive search and replace endeavor in very old school straight html sites.

waferbaby has always done a nice - cross platform/low-bandwidth job.
posted by specialk420 at 8:54 PM on May 10, 2003


Indented paragraphs aren't all that hard, are they?
posted by kaibutsu at 9:01 PM on May 10, 2003


Oh why, oh why, don't CSS evangelizers give the world what everyone is clearly waiting for: the indented paragraph.

They have, put this in your <head>:

<style><!-- p { text-indent="3em"; margin="0" } --> </style>

... and you should have normal looking paragraphs.
posted by bobo123 at 9:54 PM on May 10, 2003


No thanks. Here's how my back button works: when I click it once, I go back! Single and double clicking the mouse have totally different semantics. The repetitive actions one performs while computing all day go into 'muscle memory' - altering their expected effect is jarring and unwelcome.

Right-click on your back button and jump yourself back several pages, to where you want to be.
posted by tr33hggr at 5:10 AM on May 11, 2003


They didn't even do it right! There are no tags to the stylesheets to load. Instead they depend entirely on an asp hack. Which is fine, the asp hack is for IE and old netscapes. But the link tags should be for opera and mozilla browsers so as to demonstrate it right.
posted by wobh at 11:20 AM on May 11, 2003


My porn site features similar CSS switching, although I didn't get quite as detailed in the CSS themes (had to save on bandwidth).

Wow, I'm really drunk.
posted by delmoi at 7:29 PM on May 11, 2003


lychee:
As a novice designer who primarily uses IE, it's very hard to get away from the text size issue. Pixels, points, percentages, key words, what do you use?

Um, anything other then pixles. I know 'cm' (as in centimeters) works, as does 'em', although you have to be careful with that because em is relative, so two nested boxes with 'em' attributes may or may not make things extra small/large, depending on what browser your using.

Actualy, I may not be all that drunk. Time for more vodka!
posted by delmoi at 7:36 PM on May 11, 2003


CSS or Flash? Why not make the best of both worlds like Flazoom does. They've offered a number of CSS skins for the site for a couple of years, and those skins include Flash files in them.
posted by DragonBoy at 9:42 PM on May 11, 2003


[this is good]
posted by dg at 10:44 PM on May 11, 2003


I really like the Css Zen Garden. Sometimes I get tired of the basic css design that looks only like boxes and borders. It's inspiring to see what people can do with just the css changing things.
posted by dreamling at 6:45 AM on May 12, 2003


« Older Liberal Media, huh?   |   The Grey Lady Falters Newer »


This thread has been archived and is closed to new comments