Slashdot Mirror

CSS Zen Garden is the most enlightening site I've ever seen when it comes to the power of CSS to seperate content from layout.

I AM NOT AN ARTIST but I am a highly compentent illustrator. I've made a living for over twenty years doing computer graphics ranging from computer aided drafting (AutoCAD) to digital prepress work (Photoshop, Quark, Freehand) to 3d modeling using a number of different tools. I cannot draw but I can do professional layout with the best of them. Since I'm pretty much locked into Windows as an OS (blame AutoDesk) I tend to do most of my web page visualization using the Corel DRAW suite. If in LINUX I use GIMP. If in a resturant I use napkins and a ballpoint.

Whatever method you use to "see" the page in your mind, seperating the content from the layout using HTML and CSS makes life so much easier when your client (or boss) decides your carefully thought out color scheme sucks and insists on purple and orange.

Check out Zen Garden. It'll change the way you do web design for the better.

What tool would you recommend for essentially drawing a web page and the tool then spits out the HTML and CSS? The CSS Zen Garden is amazing, but it looks hand-crafted, which is what he's trying to avoid (me, too, which is why I'm asking).

Build and test your CSS in the most advanced browser available before testing in others, not after. If you build a site testing in a broken browser, your code begins relying on the broken rendering of that browser. When it comes time to test in a more standards-compliant browser, you will be frustrated when that browser renders it improperly. Instead, start from perfection and then hack for the less able browsers. Your code will be more standards-compliant from the start, and you won't have to hack as much to support other browsers. Today, this means Mozilla, Safari, or Opera.

(From the CSS Crib Sheet)

You see, if you design for IE flaws and the market shifts, you'll have designed yourself into a corner.

You're also hindering the adoption of alternative browsers because "it only works in IE."

Also, IE-only sites tend to be inaccessible, and inaccessible sites may have nasty consequences, like ADA lawsuits.

It takes only marginally more effort to create a cross platform site.

Designing with Web Standards is an excellent book on cross platform design.

And for those not convinced of CSS's inherent flexibility, there's the CSS Zen Garden. Cross platform, any browser. (Yes, even Lynx.)

• Make your markup as clean and semantic as possible. Avoid all presentation (font tags and the like); put distinct sections in div tags with ids; use the markup the way it was designed.
• Do a first style pass in your browser of choice. I use Safari. It's not the most standards-compliant, but it's easy for me to use. Every browser has quirks, but that's the next step.
• Preview in Mozilla, Opera, IE, Safari and Konqueror. Most of these can be had for any platform. IE is hard on Mac, but I use Virtual PC. Safari is hard if you're on Windows, but you can use Konqeror, which is similar.

@import "style.css";

For an example of how powerful CSS can be when used correctly, check out CSS Zen Garden.

Dave Shea at the 'zengarden talked about the browser upgrade campaign and its successes and failings - basically it came across as negative. Dave suggests MOSe - Mozilla, Opera, Safari enhancements - to highlight the strengths of modern, standards-compliant browsers, and I'd tend to agree.

Still, the idea of building sites that tell people they're using a 2nd-rate product when better, free products are available does appeal...;)

Certainly there are situations in which server-side technology is necessary to generate the page content from the data sources, but it's pretty amazing how well you can separate layout and presentation from the page content simply by using a decent XHTML page and good CSS. A great example I recently discovered is the cssZenGarden. The site provides a basic XHTML page with no real presentation information. When viewed without the CSS it's quite bare text, no images, just some various levels of headers and some bulleted lists. However, webdesigners are challeneged to create unique/interesting designs simply through the use of CSS (no modification of the XHTML is permitted). A few of my favorite designs are sub:lime, Not So Minimal, and Burning , but be sure to check out the others.

Certainly there are situations in which server-side technology is necessary to generate the page content from the data sources, but it's pretty amazing how well you can separate layout and presentation from the page content simply by using a decent XHTML page and good CSS. A great example I recently discovered is the cssZenGarden. The site provides a basic XHTML page with no real presentation information. When viewed without the CSS it's quite bare text, no images, just some various levels of headers and some bulleted lists. However, webdesigners are challeneged to create unique/interesting designs simply through the use of CSS (no modification of the XHTML is permitted). A few of my favorite designs are sub:lime, Not So Minimal, and Burning , but be sure to check out the others.

Certainly there are situations in which server-side technology is necessary to generate the page content from the data sources, but it's pretty amazing how well you can separate layout and presentation from the page content simply by using a decent XHTML page and good CSS. A great example I recently discovered is the cssZenGarden. The site provides a basic XHTML page with no real presentation information. When viewed without the CSS it's quite bare text, no images, just some various levels of headers and some bulleted lists. However, webdesigners are challeneged to create unique/interesting designs simply through the use of CSS (no modification of the XHTML is permitted). A few of my favorite designs are sub:lime, Not So Minimal, and Burning , but be sure to check out the others.

I guess I'm missing your point too.

Have you seen the CSS zen garden?

100s of attractive layouts all using the same XHTML document.

Mod parent up!

I cannot stress enough that the 'future of web design' is pretty much now. (lack of W3C standards-compatibility in IE not withstanding)

If you keep your xhtml to just raw DIV tags and data, you force yourself to use the CSS code for layout. Once this is done, you achieve an unprecedented degree of flexiblity in design, as you can modify the page in broad strokes simply by altering the CSS.

For those interested: A perfect example of this is the CSS Zen Garden. Click on any of the styles listed on the page and you'll see what I'm talking about.

One of the major advantages of going "standard" is simply the correctness of the XHTML/HTML you'll send to the browser; no missing tags, no misordered, no proprietary tags will do 80% of the job. The W3 validator is your friend.

Most of the trouble with "IE-enhanced" pages is the interpretation of errors by parsers. If I write:

[p][strong]foo[em]bar[/strong]baz[br]

In what tags is the 'baz'? depends on who reads it, mmh?

Except for NN4, unrecognized CSS tags will just go unnoticed for lower-version browsers, so that if your structure is OK, it should be usable for most browsers.

You might want to test with Mac's browsers (IE5 at least) to make sure your ECMAscript works; some core methods are missing.

And, should you need an incentive to go table-less, there is a great presentation that summarizes the advantages.

The css Zen garden is a great example if you want to show colleagues why separating presentation from content is a neat idea.

I suggest css Zen garden as a showcase of what can be visually achived by using standard compliant browsers(read Moz/FB).

These are really quite pleasant, so just try the links.
Main page
One of the others
Has a pretty flower (could be an Orchid - not so up on flower identification...), as well as the text
This one seems somehow quite sad, in that weird upbeat Japanes way Try them, they are nice.

These are really quite pleasant, so just try the links.
Main page
One of the others
Has a pretty flower (could be an Orchid - not so up on flower identification...), as well as the text
This one seems somehow quite sad, in that weird upbeat Japanes way Try them, they are nice.

These are really quite pleasant, so just try the links.
Main page
One of the others
Has a pretty flower (could be an Orchid - not so up on flower identification...), as well as the text
This one seems somehow quite sad, in that weird upbeat Japanes way Try them, they are nice.

These are really quite pleasant, so just try the links.
Main page
One of the others
Has a pretty flower (could be an Orchid - not so up on flower identification...), as well as the text
This one seems somehow quite sad, in that weird upbeat Japanes way Try them, they are nice.

CSS Zen Garden
Gothica
HoriZental
Self Growth

Some beautiful design using 100% web standard markup/code. Support web standards!

~ LSH

CSS Zen Garden
Gothica
HoriZental
Self Growth

Some beautiful design using 100% web standard markup/code. Support web standards!

~ LSH

CSS Zen Garden
Gothica
HoriZental
Self Growth

Some beautiful design using 100% web standard markup/code. Support web standards!

~ LSH

For an excellent example of this, check out css Zen Garden. I was astonished by the different renderings of the same content with stylesheets changes only. I never fully understood the hoopla about CSS until playing around with this site.

I like how the top design, tranquille, on the list shows a picture of a torii gate, a symbol of shintoism (not Zen Buddhism).

There is a project called CSSZenGarden. It's a collection of different stylesheets which modify the same content according to contributor's tastes and design abilities. There are few dozens of examples, and amongst them there is the Slashdot interface, albeit not a perfect copy as shows in the article.

You can view all the available CSS designs here. Same content, different stylesheet. Just shows off all the wonderful things that's possible with CSS standards-based page creation.

"HTML is dead." - Friedrich Nietzsche

There is a project called CSSZenGarden. It's a collection of different stylesheets which modify the same content according to contributor's tastes and design abilities. There are few dozens of examples, and amongst them there is the Slashdot interface, albeit not a perfect copy as shows in the article.

You can view all the available CSS designs here. Same content, different stylesheet. Just shows off all the wonderful things that's possible with CSS standards-based page creation.

"HTML is dead." - Friedrich Nietzsche

Use Flash for the banners, rid yourselves of the annoyance of tables, and dive into div's! Yes, that pun was intended to be obnoxious.

Really, today's design trend in computer UI and the web is utter gaudiness. I recently compiled the KDE 3.2 series alpha and loading it's default look is kinda shocking. Same with that Windows XP and OS X. Give it a rest, people! Stop with the fussing already!

How well does CSS Zen Garden stand up to scrutiny when you actually have to read the text. . . er, filler? I had a shocking design revelation (once again) a few weeks ago when I got religion looking at Craigslist, and that is that simplicity is chic (ampersand iacute;).

Site seems quite light on details right now - I might check it out once they update the screenshots to show it doing something interesting/unique. As it stands now it just looks like a toolkit for people that don't know how to make full use of CSS.

Yes, you can make pixel perfect layouts in HTML 4.01 that will work in Netscape and IE.

But what about other browsers, like the browser on your Palm, or the browser hooked into a screen reader, or webTV? Does the layout scale? With CSS it does, both up and down.

I agree with you, in that if you don't update your site, it really doesn't matter what HTML version you code against. But what happens when you want to update your look, but keep the content? You could change your CSS once, in one place, and have a totally new site for all the pages. Using structural XHTML, you have that option.

check out http://www.csszengarden.com/ for an example of this in action.

I hate to help Slashdot repeat itself, but the zen garden was linked from here a week or so back. It shows how much you can do just by swapping stylesheets. Pretty much anyone who works in web development could benefit from taking a look at it.

Commercial wisdom says: It may work, but its not optimized, so users don't get the best possible experience. There are other valid reasons why you may not want to stream the same markup and/or content at all devices, such as bandwidth speed and low device memory, not to mention readability.

Proper CSS/XHTML allows you to stream the same contents and use a different stylesheet for something like a PDA to make it look just right.

CSS/XHTML will reduce bandwidth use, not increase it. Take a look at CSS Zen Garden for wonderful examples.

I know most of the /. crew thinks of web design as a frivolity [the people who manage /. certainly do] but adopting CSS [yes, even for layouts] is important for a number of reasons. It introduces structure to the content that makes it easier to generate, maintain and manipulate. It means that people using old/weird clients [yes, even line-mode browsers] can still use your site. It means that search crawlers have a better chance of getting good info from your site. It means that engineers won't have to support wonky javascript for rollovers or browser sniffing. It also means that programmers never get that Friday at 4:30 pm phone call from angry marketroids who are upset that something is a pixel off. Isn't that worth it?

For designers this is important as well, as it can make your job easier in some ways. It can also make it more difficult, explaining to your client/marketing person/product manager that it's not going to look identical in every browser is a tough sell at this point. Also, web design is finally becoming its own discipline. As designers we are now responsible for helping our clients and coworkers structure their information in ways that is more flexible and useful. We're not painters anymore, we're part of the construction team.

Is support perfect across all clients? Nope. Will it ever be? Hell no. Is it good enough? YES.

• CSS Edge
• Taming Lists
• The CSS Zen Garden

I happened across this site the other day... it really shows off what CSS can do. No idea how it looks in IE, but in Firebird it's pretty amazing. Pick a design from the left and note that it's all style sheets...

http://www.csszengarden.com/

The original link in the /. story goes to a page with some ad(s), however, the ads never materialize from the 3rd party server, which blocks the story from being shown at all! Control that ad server and censor what The Economist publishes on the web ;-). Smart people use CSS instead, not HTML tables.

It's simple: adhere to web standards. There is nothing to be done about making big fonts or using graphics over text as some other idiot suggested. Use strict XHTML and use pure CSS to layout it out and control appearance. Here's why.

When you develop by web standards, which also implies separation of content from structure, you get content which is marked up based on what it is and not what it should look like. You never have any guarantee as to what size, shape, or color your content is going to appear as. The best you can do is describe it. For example, headers should be marked up with header tags, emphasized text should use <em> as opposed to <i>. How do you know a user has emphasized text set to italic? They may not. Publishers sure as hell don't do that when reviewing manuscripts. This is, of course, only the tip of the iceberg. I highly suggest everyone go over and read Jeffery Zeldman's site for more details.

So what does this get you? Since we're dealing with accessibility, I'll concentrate on that aspect of standards compliant web design. If your content is properly marked up, it gets properly interpreted by screen readers and other software and devices that allow poor/no eye-sign view to get the content. A screen reader doesn't know what the hell <font size="+3">Title</font> mean. It doesn't know how to address it or "present" it to the user. However, if you use <h1>Title</h1> to define the text, the screen reader knows it's a top-level header. Based on the programmed behavior, the content will be far more intelligible.

But it goes further still. Many people who have tough time using web sites due to small fonts or bad colors will supply their own style sheets. (This is why good browsers give you this option in the first place.) People should be able to override the stylesheets provided with your site so it can become more accessible to them. If doing this breaks your site in some way, then its your fault and you should lose that customer.

At any rate, I highly recommend that everyone who is about to embark or is in the business of web design and development read this book: Designing With Web Standards by Jeffery Zeldman. This guy knows what he's talking about and if more people followed his advice, we'd have a web that was usable by everyone, regardless of their sensory disabilities.

I also recommend scoping out the CSS Zen Garden. It's a site built with XHTML strict and styled with pure CSS. You can even switch stylesheets on it and it's visual appearance gets completely overhauled without any modification to the mark up or structure. Now imagine how easy it would be to supply your own CSS to the site to make it more usable.

Yes, this is definitely a rant. I hope many of you take it to heart, nevertheless. Browsers are becoming more and more standards compliant all the time. The web as a practice is becoming more refined and serious as opposed to being laden with idiots who pirated a copy of Dreamweaver or Frontpage and are out there polluting the scene with crap.

"more graphics-oriented"

&

"enable text2voice software"

Idiot. The first thing to do is check out the available options for visually impaired users. Turn on the text to voice and check out a webpage for a real eyeopener in how difficult this market is to design for. Simulate visual impairment by sitting a way from the screen, and check that demographic directly by checking for the browsers that people use. If you have screen readers in there, consider switching stylesheets for them. View the site in Netscape 4.75 for that real primitive viewpoint of what the site will look like to a more basic piece of software and move away from tabling code.

Visit CSS Zengarden. Play with the stylesheets. Now go back and look at it in Netscape 4.75. Isn't that elegant?

Have them check out Designing with Web Standards by Jeff Zeldman. It goes into the whys and hows of writing valid XHTML. And if any of your friends are designers who think that CSS can't make good designs point them to the CSS Zen Garden.

And therein lies my whole problem with this. Accessibility compliant pages are damn ugly. Almost uniformly.

That's not true at all.

And so what we end up doing is take a visual medium and break it for those with different needs.

Accessible websites don't have to be ugly. What makes you think that they do?

If the above is your site? A couple things.

1-Go here and see what a little HTML and CSS can do to make a big impression.
2-Put an area code on that phone number.
3-Here's an excercise to sharpen your business mind. Make out a business plan. There's plenty of books on this whole process. You may not plan to use it directly, but the excercise will help you as your business grows, and makes certain that you've covered all your bases. Keep it current.
4-Incorporate. Become a business of one with all the benifits (and downsides:see above).
5-First impressions will always count, regardless of what you do. Make certain all your actions reflect that.
6-Watch the price you charge. The home consumer will like it. The business owner will be suspicious of it.
7-Bolster the service side of your offerings. Handing it off to the big boys may be OK. But that's your growth area, not the OS. Remember you can remote admin a lot of it, and value add like crazy on your end because one of the great strengths of Linux is communications (#2 Is it's glue nature in a heterogenous environment).
8-Improve your knowledge of other operating systems. A lot of environments are a mix, and such knowledge will be the shot that gets you the contract.
9-And finally be a businessman, serious in thought and action. Because there's going to be a lot of times that you don't just feel like it. And you'll need a certain "grit" to pull you through those valleys, so you can get to the hills quicker.

Good Luck.

<!--

This xhtml document is marked up to provide the designer with the maximum possible flexibility. There are more classes and extraneous tags than needed, and in a real world situation, it's more likely that it would be much leaner.

However, I think we can all agree that even given that, we're still better off than if this had been built with tables.

-->

Witness the recent Taco IRC interview where his response to "when will Slashdot validate at the W3c" was "Whatever. Next."

The only reason to use tabular layout (like Slashdot does) is to make things look good in Internet Explorer.
Switching to pure CSS (as the W3C recommends) saves bandwidth (as all of the formatting and layout information can be stored in a separate, cacheable file), gives you the freedom to create far more interesting and visually powerful designs, and makes the page accessible.

Slashdot should take a hint from Wired's excellent example and move into the new millenium.