Slashdot Mirror

Every time there is a story on CSS here, we always get a bunch of people who say CSS is useless and that table tags are the only way to design a site. I'm always amused by people who have been living under a rock (or haven't updated their skill sets) for the last couple of years. CSS Zen Garden should stand as solid proof that CSS works, and can produce some gorgeous and highly usable results (and check out the Zen Garden's Zen of CSS Design ) for a description of general aesthetic.

CSS is broken in some obscure ways, I've encountered some limitations with styling elements with a certain xml:lang in documents whose body tag has a different xml:lang, but for 99% of sites, it's ready now.

...keep the old look? I thought Slashdot (the current look) was just converted into CSS a few months back; So why can't there be an option to just change the Slashdot.org to the stylesheet or our choosing like at: http://www.csszengarden.com/ ? It just take a few lines of JavaScript.

In my humble opinion, it should be the objective of the web developer to develop a web application where the markup is so well designed that the graphic designer need only modify the CSS file in order to make whatever changes he or she requires of the web site's look and feel. Given a modern browser, you can get 80% there without trying real hard.

I originally learned about the Zen Garden from another /. post. This is well worth studying to learn about good markup design from the standpoint of decoupling GUI from markup generation.

The posters in this topic don't differentiate between content and markup. I am assuming that they are really interested in discussing the pros and cons of embedding markup in the code.

http://csszengarden.com/

That's probably because you're not a designer.

To be honest, most Ultra-Compliant Standards-Nazi sites look like someone went doo-doo on my monitor. Designers usually design from the inside out, using DW or even Photoshop to sketch(!!) out the layout and stuff and then go to build their templates to be 100% compliant and accessible.
Curiously enough, their sites usually look very good, are standards compliant, 100% accessible with well-built meta markup and are built from the outside in using grafics tools, editors (jEdit, Textmate, BBEdit, etc.) and the designers favourite CMS.

That's the general Pipeline of todays Webdesigners. I'd go as far as to say that most of these people work that way.

>It's css, if the slashdot site is made properly you could just include alternative css files for all of these themes and let the users choose.
If most of this is hardcoded(I havn't checked), then the upgrade for web standards was pointless and whoever did it missed the point.

Case in point (and proof): http://www.csszengarden.com/

Let's see... been programming ever since I got my first copy of HTML for Dummies when I was eight, and now I'm fifteen, and what have I written? To name just a few:

• PyWord, a text editor coded in Python
  (Used to be my most popular, I even had a guy in the Bereau of Labor and Statistics e-mail me once to say he liked it enough that he wanted to use it in his own program!)

• pyprime, a program to find prime numbers
  I actually came up with the entire algorithm for it during theatre class in eighth grade. I've also ported it to my TI-83

• Überpage, a PHP-based Web site engine
  Among other features, it uses a MySQL backend, generates completely valid XHTML 1.1, and if you're wondering, yes, I even designed the CSS theme myself

These days, though, I tend to spend most of my time developing Ultima Linux, which has become – I may as well brag – a very popular distribution. Most of that stuff isn't so much writing programs as compiling them, although I frequently do have to make some major changes to shell scripts, etc., which I've also become somewhat good at.

I've also become fairly decent at writing sed scripts, the occassional bit of JavaScript, and now I'm gradually trying to teach myself C. (Although with all the other stuff, and not to mention my actual life, I never have the time...) And then I also tend to like playing with CSS designs – I've got a Slashdot design I did, as well as a CSS Zen Garden entry and my hand-coded WordPress theme, which I'm rather proud of.

I used to waste endless hours with QBASIC, and then later Visual Basic. I've never really forgiven myself for it until now, but I no longer remember a single line of it so I guess I've repented enough :-)

Actually, the goal is to redesign the web site without touching the HTML. That's what CSS is for. Just switch the stylesheet, and the entire design changes. You really should see the CSS Zen Garden at http://www.csszengarden.com/ for an example of what good artists with a few CSS skills can do.

http://csszengarden.com/

A good example of what you're talking about, can be seen at CSS Zen Garden, except that they don't store user-CSS preference, but rather allow you to click on older submissions and pass the variations by query string such as here, one of several winning submissions.

...pretty flower :)

A good example of what you're talking about, can be seen at CSS Zen Garden, except that they don't store user-CSS preference, but rather allow you to click on older submissions and pass the variations by query string such as here, one of several winning submissions.

...pretty flower :)

Anyway, let's get to that point: Changing a CSS file is not a "redesign". Saying so is just fooling yourself.

Don't tell the folks at csszengarden.com.

Or, for some really fancy CSS go here. I've found it to be one of the most usefull CSS resources on the web.

With your comment about quasi-socialist-realist designs, were you perhaps thinking of Revolution?

  I just read that osCommerce's overall design is hard to change...
  ie, without having to fiddle with over 10 source files.

  So, I wonder if osCommerce may not be utilizing the magic of CSS?

      Cf: http://www.csszengarden.com/

  I continue to be impressed (when not amazed) how much a CSS change
  can influence a site's look, if not its feel...

Part of creating a website is drawing an area on my screen and start working within it.

There's your problem right there. This is a print mentality, not a web one. As a designer, you should be designing sites that can "bend" into a variety of screen resolutions and platforms, becuase that is your canvas.

But heck, I even like to use tables instead of div, just because I try to minimize the risk.

The risk of what? Producing something of quality? Designing on the web has come a long way since 1997. If you don't stay up to speed in this industry, you will fast become irrelevant. CSS has already solved some of the more common issues on the web - including the one in questions, as well as your screen size issue. It's time for "designers" like yourself to get with the program already.

Check out Zen Garden, CSS Vault and CSS Beauty for some more information

No it doesn't. You can have invalid xhtml just like you can have invalid html.

And unless you send it with an application/xhtml+xml header (which IE doesn't support), then it will be parsed using a "tag soup" parser anyways, not an xml parser.

Further, html can be well formed too. Html is an SGML language, and if correct will be well formed SGML. This is exactly like xhtml being well formed XML.

So as I said, there is no benefit here at all. Google does not punish you for having invalid markup, there's tons of sites that are listed #1 for common search terms that are not xhtml, nor are they even valid html.

No it isn't, alt text is plain text. Adding alt text is part of making your site search engine (and visually impaired) friendly.

There is no need at all to remove your images and replace them with plain text. It will have the same effect for search engines as adding alt tags, but it will make the site uglier for users.

No, that will leave you where the OP is now, with a crappy, low ranked site. Content is king. He needs to make sure common search terms actually appear in the content of his site, and make sure that his site is frequently updated. This gets you ranked higher in search engines, not blindly jumping on the "I'm too fucking stupid to research xhtml, so I am going to pretend it is the saviour of mankind and will cure cancer" bandwagon, like the guy giving shitty advice.

Just my .02 ..
As a college student who has spent the past few years learning "web design" on my own, I'd like to offer a few observations.

1. Design is roughly 80% CSS and 20% HTML.

2. Forget WYSIWYG, I still use notepad

3. Don't feel bad if you have to learn by copying other people's work. Just don't 'release' it, obviously.

4. Don't buy a book, don't take a class - you'll probably learn faster and better on a computer.
http://www.alistapart.com/
http://www.dezwozhere.com/links.html
http://glish.com/css/
http://www.csszengarden.com/

5. 'web design' falls somewhere between graphic design (conveying ideas with static images, logos) and creating software (in terms of usability). It needs to look pretty and all, but that's subjective, and you should never let your bells & whistles get in the way of the message you're trying to convey. (and they typically do)

6. Tables should only be used for tabular data
I think that's about it, good luck.

I was in your shoes, too --- just a smattering of HTML. I needed to create pages for my students and local sailing association, so I availed myself of Web Schools from W3C, which is pretty straight from the horses mouth, but no tricks or advanced techniques, and then studying layout like CSS Zen Garden and Boxes Tutorials. I tried to go XHTML 1.0 Strict, and validated my pages with the W3C validator, which gave useful feedback. (Don't look at my "home" page indicated by my ID --- it's just a stub). You're welcome to look at my amateurish example at my school home page. Good luck.

You really sound like you're talking about two different things. First off, you say you want to learn better and more advanced web design. If this is the case, then you should check out the CSS Zen Garden for inspiration. Use that as a basis for learning about advanced CSS (Cascading Style Sheets) techniques, page layout, colour integration, and so on. They have links there for places you can steal from. Eric Meyer also has excellent ideas. A List Apart has excellent columns and tutorials.

Second, you talk about the alphabet soup of AJAX, XML, Perl, etc. This is web programming. It doesn't have anything to do with web design, it has everything to do with web content. I don't know about advanced web programming (I've done all mine in Perl, PHP, ASP, and ColdFusion, and those last two were five years ago). Others can chime in on that count.

just hobby pages and weblogs that look professionally made

Clearly you haven't been to CSS Zen Garden. The main page isn't that terribly exciting, but if you check out the designs it showcases, you might think differently [about CSS].

It's amazing what just a change in CSS can do (as CZG articulates). Go ahead and test it in different platforms.

Good page design is about a good designer.

A website doesn't really have much business selecting particular named fonts, content versus presentation and all that. If you use CSS then you can quite reasonably limit yourself to normal, sans-serif and monospaced [...]

Sure, that "Slashdot" in the upper-left corner would look great in 8pt Courier. :-P FYI, most if not all modern broswers let users force font settings and/or employ a user-specified CSS file. Users already have the choice.

If you want to bitch about bad designs (or celebrate good ones) on the web (or in print) then join the crowd. But the idea that CSS means the end of presentation on the web, as you imply, is inane. CSS specifies the separation of content and presentation, not the reduction of either. As Eric Meyer, the CSS Zen Garden, and others have shown, CSS+(X)HTML seriously improves the ability to maintain and enhance both content and presentation versus old-style HTML-font-tag-and-attribute-soup.

While content-based web pages need to be accessible (which sIFR achieves, FWIW), the idea that the web is the end of typography in design is also inane. Web typography does suck right now, but mostly because designers need to employ techniques such as image overlays and sIFR to do anything remotely interesting.

http://csszengarden.com/

CSS zen garden is a testiment of the robustness of CSS and a reward for writing flexible xhtml code.

Personally: I recently built an ecommerce toolkit that can incorporate virtually any design I've encountered, regardless of the amount of columns due to the methods I have just described. I dont have to modify the XHTML code. Remarkably, if they need to be centered, they'll center in IE. All thanks to CSS. Combined with a flexible PHP-driven ecommerce toolkit (using smarty), my development cycles consist of graphically designing a site, drawing out a CSS stylesheet, and uploading my code. A good 1-4 hours per client.

Wow.. what is wrong with you people?

    Try:

    http://www.csszengarden.com/

Frig - I screwed up the first link. My bad http://www.csszengarden.com/

Why not just go here instead?

Really nice shit!

a strong believer in separation of presentation and document structure.

HTML today gives you that to an amazing degree. Look at the CSS Zen garden for an example. Every style on that page is a different presentation of the same content.

Hi,

Go and include a CSS id or class with every single component in the slashdot template
like it's done with http://www.csszengarden.com/ and let the users decide :-)

csszengarden is pure css fun!

I _really_ like it.

the outcome will suffer because the underlying architecture is off limits

So what? This shouldn't be a problem. In fact it should be a good thing. Is he still in the last century? Hasn't he heard of webstandards? A good website will have have content separated from presentation. I don't know if slashdot has that kind of separation, but it should. Anyway take a look at CSS Zen Garden for examples.

Would be really neat to have alternative designs to pick from a la CSS Zen Garden. You could have a design contest for the default and list all submissions as alternates in a sidebar.

Of course, there are plenty of real benefits to using CSS, such as making it possible to have alternative stylesheets, which change the look complete without tuching the HTML (e.g. CSSZengarden), (probably) making the pages smaller (=>less bandwidth) and it opens the door to a whole lot of new cool features.

You should get some of the CSS Zen Garden guys to come up with something.

I was wondering if there was going to be a story on this.

Me too... I blogged this earlier today, and briefly (first impression) journal'd it too, and would love to comment now on some more technical aspects of the page now that I've had time to examine it more thoroughly. Kudos to all involved on a very positive step in the right direction!

The CSS is really clean and impressive. I don't have a problem with it at all at this point, but CSS was never really my strong suit so you may want to get a second (thousand) opinion on that.

I have to admit, it's nice to see the page load faster, with fewer visual errors in Firefox. The links and text seems quite a bit nicer. Now I can modify the CSS of the site to make it look however I want on my own system too, so that is certainly a benefit.

I'm sure many will point out that there are lots of errors in the HTML.

You can see for yourself, here. That part isn't that important, because once you begin the road to enlightenment, that zen of CSS, it's a journey that has no return.

I'm actually quite proud of Slashdot today, even though I merely post here.

I will be far more proud when the new moderation systems come online. Not sure how many of you submitted ideas and had discussions with CmdrTaco on that subject but I had a thread going with him for quite some time last year. Much of what was said was repetitive, geared towards filtering out what he already had considered or someone else had suggested, but he genuinely listened to some of the suggestions that were unique. I wonder what the timeline is on the moderation changes... Taco?

The WHATWG intend to submit their work to the W3C, so there could well be an HTML 5.

XHTML 1.0 has no future either. It will always be XHTML 1.0.

XHTML causes problems now. Today.

Furthermore, user-agents won't stop supporting HTML for about a decade *.

No it doesn't. IE can only render it as styled XML (no links, etc) or tag soup unless it uses XSLT to translate it into HTML. Don't blatantly lie.

Ever heard of a thing called HTML 5? It's in the works whether you believe it is or not.

If you're coding valid HTML now, it's easy as pie.

Like?

A few good places to start:

• Position is Everything
• A List Apart
• CSS Zen Garden

On the book front, must-reads include: Designing with Web Standards by Zeldman, Eric Meyer on CSS and More Eric Meyer on CSS, and Dan Cederholm's Web Standards Solutions.

Also, Veerle Pieters has a very useful hyperlinked PDF of CSS resources; the associated blog page has more details.

That lot should get you started :-) Hope that helps.

But be warned: like you I'm a hard-core, long-term technical bod, who's done everything from embedded systems software to web development, and it's only after 3 years, absorbing everything I could learn about CSS in theory and practice, and particularly how to conquer the Great Satan IE, that I've finally got to the point I referred to in my original post. To be perfectly honest, I couldn't believe it when I only needed 13 lines of hacks to tame IE on a very complex design.

So when you start, the best bit of advice I can give you is: code and test to Firefox first. If something looks a bit off, check it in Opera 8, and in Safari if you have access to a Mac. Once you've got it working across those three, everything that goes wrong in IE is IE's fault, not yours. That's when you start applying the hacks found at Position is Everything and other places, until IE finally falls back into line.

It's not as bad as it seems; if you have the kind of logical mind that goes with writing code, you'll soon begin to discern the patterns underlying IE's peculiar behaviour. (Virtually everything can be tamed using the Holly Hack, explained at Position is Everything, linked above.)

Good luck, and Enjoy :-)

The quarterly thing would be good. Maybe we can band together and create a Slashdot Zen Garden! =)

Like this!

There are exception like Patrick Griffith's "Elastic Lawn" http://www.csszengarden.com/?cssfile=/063/063.css& page=0. Scales rather nicely when you adjust the font-size.

http://www.csszengarden.com/ http://www.alvit.de/handbook/ http://www.wpdfd.com/editorial/basics/index.html http://www.w3.org/TR/REC-CSS2/ http://css.maxdesign.com.au/listamatic/ http://www.cssvault.com/ http://glish.com/css/home.asp http://webhost.bridgew.edu/etribou/layouts/index.h tml http://www.positioniseverything.net/ http://www.stylegala.com/

I still think that's the most impressive CSSification of slashdot because it uses the exact same HTML as this and this and this and even this very different style. Note that all of those are the exact same HTML page, only the style sheet changed.

If a CSS slashdot were that flexible, we could probably have PDA-friendly styles very easily.

I still think that's the most impressive CSSification of slashdot because it uses the exact same HTML as this and this and this and even this very different style. Note that all of those are the exact same HTML page, only the style sheet changed.

If a CSS slashdot were that flexible, we could probably have PDA-friendly styles very easily.

I still think that's the most impressive CSSification of slashdot because it uses the exact same HTML as this and this and this and even this very different style. Note that all of those are the exact same HTML page, only the style sheet changed.

If a CSS slashdot were that flexible, we could probably have PDA-friendly styles very easily.

I still think that's the most impressive CSSification of slashdot because it uses the exact same HTML as this and this and this and even this very different style. Note that all of those are the exact same HTML page, only the style sheet changed.

If a CSS slashdot were that flexible, we could probably have PDA-friendly styles very easily.

I still think that's the most impressive CSSification of slashdot because it uses the exact same HTML as this and this and this and even this very different style. Note that all of those are the exact same HTML page, only the style sheet changed.

If a CSS slashdot were that flexible, we could probably have PDA-friendly styles very easily.

Well, it all has to do with how "cool" the standards are. When frames came about, all the browsers updated as quickly as possible. If other browsers have something that has a bit more of a "neato" factor to it, then IE might want to either conform to that standard or replicate it in some backwards way.

For now, the only thing I can think of has to do with CSS2 and PNGs, two things which Firefox does well and IE does not. (At least not natively, I know you can do some "scripting tricks" to support PNG in IE, but I don't know how).

Some examples from CSS Zen Garden: [1] | M[2]

Imagine if something like Flash (as useless as it is for web design) could only be supported in non-IE browsers. That would change things real quick.

Well, it all has to do with how "cool" the standards are. When frames came about, all the browsers updated as quickly as possible. If other browsers have something that has a bit more of a "neato" factor to it, then IE might want to either conform to that standard or replicate it in some backwards way.

For now, the only thing I can think of has to do with CSS2 and PNGs, two things which Firefox does well and IE does not. (At least not natively, I know you can do some "scripting tricks" to support PNG in IE, but I don't know how).

Some examples from CSS Zen Garden: [1] | M[2]

Imagine if something like Flash (as useless as it is for web design) could only be supported in non-IE browsers. That would change things real quick.

The only thing that benefits from the use of a table is tabular data - that's its intended purpose. It should never be used for layout. Use CSS.

h tags aren't a burden, they are essential - they define the structure of your document.

the font tag is obsolete. Once again, use CSS.

Learn web standards, CSS, and XHTML and you will find yourself in a happy place.

"IMHO web devellopement is a very specific kind of devellopement. And while respecting standard is important, pragmatism is far more important."

It depends - pragmatism in the sense of ignoring standards got us the fingernails-down-a-blackboard-experience that was web design for most of the late 90s/early 2000s, and often produces pages that look great on IE but don't work or look ugly on other browsers. Call this "code pragmatism".

Pragmatism in the sense of being prepared for your lovely graphical design to degrade right back to ASCII text (or using sematic markup so it can be mashed-up and re-presented by people or scripts) is pretty much what people mean by "standards-compliant coding". Call this "presentational pragmatism".

Generalising madly, the "non-standards" crowd mainly seem to be code pragmatics, whereas the "standards-are-all" crowd seem to be presentational pragmatists.

Being pragmatic doesn't mean anything in the context of the debate - it's what you're most pragmatic about that they disagree on.

"Choosing a target as specific as possible (e.g. Mozilla + IE) and define precise design practices is the only practical choice if you don't wanna end up in CHAOS."

Not even slightly. This sounds like another version of the "standards are bad because they restrict my design options" (which is false, if you know what you're doing) or "standards are bad because they're hard" arguments (which is false because many other people are fine, so it's clearly your failing not the standard's). You could say the same thing about compiling C++ code - you'd be much free-er to write complete gibberish if it didn't have to compile, but a C++ program that doesn't compile is useless.

Likewise (albeit to a lesser degree) non-standards-compliant code is less useful. It won't be semantic markup, so it isn't easy (sometimes even possible) to automatically aggregate it and customise how you access it. Presentation isn't separate from content or behaviour, so it's harder to manage sites or effect large-scale changes to a design. It's tightly tied to old, obsolete ways of doing things that don't degrade well, so when the technology changes (eg, if in five years' time mobile devices are the most popular way to access the web rather than PCs) you find you have to recode everything you've ever written or write it off and lose it forever.

"You need to be very very pragmatic..."

Which doesn't mean anything on its own, as I've demonstrated above.

"...and do everything as simply as possible."

Exactly - this I agree with wholeheartedly.

"Great revolutionnary designs, Design patterns for every problems, extreme modularity, and cutting the codes in many many very small practical functions may often end up being impractical with a web project and make it a hell of a job to be maintained."

Indeed, but those (with the exception of extreme modularity) are all more symptomatic of non-standards-compliant "tag-soup" code than clean, semantic markup, presentation mostly/entirely in CSS and well-coded javascript in a separate file.

Semantic markup is simpler to read than presentational markup - this is pretty much unarguable.

Extreme modularity is almost universally agreed to be a Good Thing - practically every advance or increase in power in computing seems to be a drive towards modularity - OOP, XML, Firefoxes "extensions" vs traditional plugins, DLLs vs duplicated code, interacting suites of tools vs bloated, monolithic applications, etc, etc, etc.

I'm not sure where you got the idea modularity's bad, but it's vastly simpler and vastly more powerful than spaghetti code, and I think you'll find it hard to find a single experienced programmer or developer who'd disagree. Bringing it back to web design, see the CSS Zen Garden for examples of the power of separating content from design.

"And overall, in any languages, co

Sorry; I don't want to reply to myself but I wanted to share this inspiring and amazing CSS resource to those who don't know about it. Read the page to learn more.