The Power of CSS
Playing around with WPF makes one thing clear: Applications are about to become a whole lot prettier. Which itself implies that the design - the look and feel - is likely to become increasingly important for every application in the same way that you expect web pages to be more that just standard buttons and shades of grey.
A source of real inspiration for me has been the fabulous www.csszengarden.com site, a showcase for web designers to show their imagination. If you haven't come across this before it's certainly worth a look. Sure this is the web and not WPF but the principals of design apply. So, a little background:
Back in 2002, designer Dave Shea was thinking about how to get graphic designers interested in the use of CSS to lift web pages beyond the boring, functional examples that littered the worldwide web. In May 2003 his idea became reality with the launch of CSS Zen Garden, a website that allowed designers to see and be inspired by the power of CSS as a tool for transforming websites.
It works like this: Shea came up with a simple page of pure HTML, with no real formatting or design within it. Designers were not permitted to change the HTML page - and indeed it remains constant to this day - but instead had to create an accompanying CSS file that encapsulated the formatting for the page. So the idea was not to create a useful piece of HTML, as that was unchangeable, but instead to demonstrate the power of CSS.
Today, there are hundreds of CSS samples that you can use to view the CSS Zen Garden site. The variety is truly astonishing. Here are some of my favourite examples, and remember they all use the identical HTML page, only the CSS file changes:
Check out the full list here: http://www.mezzoblue.com/zengarden/alldesigns/official/
Shea has since published a book, "The Zen of CSS Design", along with Molly E. Holzschlag that dissects a number of the designs and acts as a great reference for budding CSS designers. I can absolutely recommend it.
All in all, inspiring stuff.
Comments
- Anonymous
November 13, 2005
Yes, WPF opens up a lot of doors for software. And at the same time, there's a huge risk. We're going to see lots of applications that try to look "pretty" and... don't. Apps that clash with the Windows UI guidelines and the users's theme/colors.
Think 1997-era home pages with flashing text, marquees, tiled backgrounds, etc.
The quality of professional software will go up with WPF. But it'll be all too easy to create unprofessional software. - Anonymous
November 13, 2005
While I know where you're coming from on this (and agree that it's a challenge), I think we may have some things to be hopeful for this time around.
The key is part of the reason the Zen Garden site has such good designs: the forced separation of design and code. I know that the wisdom of this approach has been known for a number of years but Zen Garden actively encouraged it by having an unchangeable HTML page, and inviting designers to create the CSS file.
With WinFX technologies (WPF and tools) this has been built in from the ground up. The Expressions products are for pro designers, and VS / Cider are for developers, and XAML is the “glue” that allows each of these audiences to excel at their own area of expertise but still work hand-in-hand with the other.
So while it took sites like Zen Garden to help designers understand the power of separating their design work from the developers’ coding, we’re virtually starting from this endpoint with WinFX.
So does this mean we won’t see any appalling WPF designs with flashing text, flaming torches and the like? Ahh sadly no. It will still happen, but there’s also every chance that we’ll see an increasing number of WPF applications where pro designers have been able to express themselves and create something that brings the sort of style we see in Zen Garden designs to Windows applications. And of course, pro developers have been able to make it connect to and work with backend systems. Or at least, that’s my take. - Anonymous
November 14, 2005
XHTML, not HTML. That is an Anti-HTML site. I know... I'm a member :)
That site is the TEST of how well you know CSS. Many of the times don't work in IE because of IE's lack of CSS 2.1 support. But the site is not for IE supporters. It's a web-standards site. - Anonymous
November 17, 2005
Thanks for the comments, however this blog entry was not about the web (despite appearances). The point I'm making is that the split of designer and developer functions is a large part of what makes zengarden work so well, and we take that split to another level with WinFX/XAML. - Anonymous
December 01, 2005
Yess CSS is wonderfull and powerfull
This amazing thing :)