CSS factory (@media call for participation)
I bounced the following idea off some people at @media (Douglas Bowman, Molly and a lot of others) and I am ready to go along with it. It’d be good to hear some thoughts though:
We all know and love CSSZengarden. It showed the design community what can be achieved with CSS and how easy it is to redesign a web page completely, simply by applying another style sheet.
However, for our day to day web development life, the garden has become a bit of a problem, mainly because:
- The designs have become an image replacement competition instead of testing what CSS can do
- It is too easy to style only one document that has been marked up with loads of IDs and classes – in the real business world we’ll have CMS defining the content markup and we don’t have that option
- The focus seems to have shifted from style and functionality to style/brand on its own.
My idea now is to start a CSSFactory. The idea is the same as CSSZengarden, the difference though is:
- The Markup will be a 5 page web site with different layouts and content for each page
- The Markup might have variable content order on reload to simulate a CMS that allows editors to rearrange them
- The content will be available in English, German and maybe French (I’d need help with the French – Stephane?)
That way we can prove that it is possible to create bullet-proof CSS that can be applied to real life web sites, and maybe get a bit more buy-in from project management and managements when we try to advocate standards.
Comments?
14.07 Changes
Ok, I realise that some of the bits mentioned here confused people, so here are some extra explanations:
- The JavaScript is only an idea to simulate how a real backend would allow editors to change the content. I intend to use it to avoid the need to reload the pages from the server each time. Saves me server traffic and you time during development. I develop and write most of my hobby works (like this idea or the unobtrusive JavaScript course) on the tube whilst commuting every day, I thought it’d be handy to show how flexible CSS is without the need to run a localhost with PHP.
- The random order of course will only apply to the content slot of the template. Much like we do for most clients. One of the basic princibles of accessible and usable sites is that we keep the navigation on the same spot throughout the site, moving it would be counterproductive.
- I started on some of the markup, but want to get an offline version of the course and the linkrot prevention idea out of the way first. I also wonder if I should get a dedicated server and domain or use this one instead.
June 11th, 2005 at 9:15 am
Sounds like a very good idea, it will be very interesting to see the results of such a project. As you say, in the ‘real’ world one has to account for other issues, as for example a Cms that spits out different chunks of content. However, how far would you go with that? Would it be possible to rearrange the whole page, or just the content of different parts of it?
Edit
My initial idea is to allow for different order in the main content slot on the homepage, and contextual navigation on the content pages. I am planning to do the order switching via JavaScript, to keep server traffic low and to allow for easy offline development.
June 11th, 2005 at 9:36 am
I definitely agree with the idea, however I’m not to sure about the idea of switching it client side…
Edit
It is an optional, however, it gives us the power to keep traffic low, present it offline to stakeholders and is not much more of an effort. Of course that option will only be given when there is JS available, otherwise a PHP takes over. unobtrusive, remember? :-)
June 11th, 2005 at 2:05 pm
Sounds like a great idea to me. Zengarden is a great site but I manage a government website. Loads of fancy CSS with image overload doesn’t work for me. It would be helpful to see more whole site CSS that could easily be integrated in a business site.
June 11th, 2005 at 3:00 pm
Being a relative novice and mostly working by myself in a vaccuum, i can’t comment on cms’ or even real world production. but i too, get a little overwhelmed at the weight of graphics at places like web standards awards and css vault. don’t get me wrong i drool over the photoshop work. but i thought the whole purpose was to use css to make exceptionally light pages, to style the xhtml, but this seems the same approach as using tables loaded with graphics only with more headaches. but this stuff is amazing. different strokes for different folks, i guess. you hold class, i’ll show up.
June 11th, 2005 at 3:06 pm
Very interesting idea. I’ve been noticing the same things about the garden — don’t get me wrong, it’s a fantastic resource but there just needs to be something more. I’m definitely interested in helping out if you need/want it and contributing a design when everything is up and running.
June 11th, 2005 at 3:18 pm
From Chris:
I bounced the following idea off some people at @media (Douglas Bowman, Molly and a lot of others) and I am ready to go along with it. It’d be good to hear some thoughts though:
We all know and love CSSZengarden. It showed the desig…
June 11th, 2005 at 3:21 pm
Hi Chris
Excellent idea. I spend a lot of time building cms sites and think that web development will continue in this direction. We see more and more WordPress, Mambo, Xoops etc sites and lots of folks designing templates for these.
Will you have a guide as to how we might design and submit sites?
Thanks
Rich
June 11th, 2005 at 5:30 pm
if you ever need an italian translation you know where to ask.
June 12th, 2005 at 8:31 am
Présent!
I’d just add to what you said that most problems with quality code (and lack therof) often lie in CMSs. And not even in the CMS product per se, but rather with WYSIWYG add-ons.
We had to add a WYSIWYG tool to our own intranet’s SPIP because the editors were used to graphical-intensive Dreamweaver and Frontpage.
I told everyone that giving them the power to add color and font functionality was bad for readability and more generally for accessibility, but they insisted on having it.
And I’m not even saying anything about brand coherence!
Anyway. My point is that most CMS’s don’t do such a bad job of managing the content, especially when they rely on wiki-like writing (no markup needed, two line breaks end up being
</p>and<p>.So. I’m ready to contribute.
June 13th, 2005 at 5:56 pm
Say hello to CSS factory. Christian Heilmann talks about a new project that popped out of his brain and landed on his blog. In this entry he talks about the need for a more practical application of the CSS wizardry that comes out of CSSZengarden. he ca…
June 17th, 2005 at 12:22 pm
Chris,
That’s a great idea! I can help with the French as well if you want.
Other cool things to add to the project maybe later down the line:
- Have alternate style sheets and allow users to switch. This way, we can also use it as a testing ground for high contrast alternatives, as Joe Clark was suggesting during @media.
- Produce translations in other languages if we find volunteers for this, in particular languages that use an alphabet other than Latin, such as Russian, or even right to left languages such as Arabic or Japanese.
June 23rd, 2005 at 12:17 am
“I’m game. When do we start?”
:)Stephane – hear hear re: WYSIWYG add-ons tossing a monkey wrench into making quality code! [Insert groan here.]
In my experience, more often than not, most are living squarely in “invalid HTML 4.01 land” (and not even well-formed HTML at that). Not to stir up any HTML-vs-XHTML debates, mind you (YMMV). In our CMS we’ve actually DISABLED most of the toolbar buttons in the editor, lest we get inundated with
FONT(not evenfont). But the fun doesn’t stop there. We’ve seen named entities magically change to numeric in between edits (which I wouldn’t mind so much when the markup is rendered – it’s when it happens in the EDITOR that confuses people). We’ve seeen blank paragraphs with a non-breaking space thrown in. We’ve seen complaints about perfectly normal CDATA blocks. We’ve seen blank spaces forcibly added in between adjacent tags. Ahh, fun.Incidentally, one WYSIWYG editor that has caught my attention (in a good way) is XStandard. (“This spontaneous plug not endorsed by XStandard.”)
Anyhoo, Christian – bring on the markup with all speed. We’ll bring the selectors … and perhaps a bit of “DOM scripting” seasoning.
July 31st, 2005 at 5:07 pm
It will be very interesting/educational link for all of you:
Elixon CMS w/CSS WYSIWYG Editor
They already have what you are talking here about!
August 5th, 2005 at 3:15 pm
I’m very excited about the project as I just finished a design theme for csszengarden.com
You can have a look at celebrity CSS Zen Garden theme design