programming and human factors
by Jeff Atwood
The CSS Zen Garden site isn't exactly new news these days, but I've been digesting the excellent CSS Zen Garden book over the last few months and we now have an opportunity to pursue a completely CSS-driven site layout on one of our projects.
Although everyone has used stylesheets before for trivial things like colors and font sizes, switching to completely CSS-driven layout is a more daunting proposition. Consider the actual Zen Garden HTML, before and after a stylesheet treatment:
| HTML | HTML with CSS Stylesheet |
| |
|
That's one radical makeover.
The book does a fantastic job of breaking down a number of the CSS stylesheets and focusing on particular areas of interest within each one. I highly recommend it. It's fun to click through these to get a visual sense of what's possible, and what still works in IE6. Here are the examples presented in the book, in order by section:
Layout
Backyard, Entomology, White Lily, Pret-a-porter, CS(S) Monk, Not So Minimal
Imagery
Japanese Garden, Revolution!, Deco, No Frontiers!, Coastal Breeze, What Lies Beneath
Typography
Oceans Apart, si6, Release One, Dead or Alive, Blood Lust, Golden Mean
Special Effects
This is Cereal, Gemination, Bonsai Sky, Tulipe, door to my garden, Elastic Lawn
Reconstruction
Hedges, Radio Zen, South of the Border, Corporate Zenworks, Open Window, mnemonic
It's admirable how the Zen Garden puts the holy grail of separating content from presentation squarely in view.
But I'm a little uncertain how this will work in practice under ASP.NET 1.1 and 2.0. Ideally the user controls will emit a bunch of <div> tags and ultra-simple HTML, then we let the CSS file have its way with position, graphics, sizing, and even hiding elements. The one example I can find of someone retrofitting pure CSS layout on an existing ASP.NET 1.1 site is.. rather scary. And there are pages and pages of advice on CSS gotchas, starting with the most important rule: develop in Firefox first, then fix the inevitable CSS compatibility bugs in IE6 second.
Although this approach has a lot to recommend it, I still worry that we're trading one set of problems for another. Has anyone gone the full CSS Zen Garden route with an ASP.NET 1.1 or 2.0 site yet?
I haven't done it yet, but I'm going to give it a shot sometime after the first of the year. I'm going to roll my own blog software, and attempt to do as much with CSS as possible.
I'm particularly fond of the Mozart style:
http://www.csszengarden.com/?cssfile=/189/189.csspage=0
Except I would do it with more of a computer/tech related theme instead of musical. I'll probably go for dark on light as well.
Marty Thompson on December 22, 2005 5:46 AMMy site is pretty much as zen'd out as you can get in asp.net, and so is Milan's (http://www.aspnetresources.com/). There's really nothing that prevents creating a nice, semantic site in ASP. Just watch out for controls outputting funky html, and the fact that asp.net renders crappy html to "downlevel" browsers in 1.1.
Jeff Perrin on December 22, 2005 6:13 AMGreat stuff Jeff, keep the links coming.
Here's an amusing article on converting the microsoft.com homepage to a fully CSS-based layout:
http://www.stopdesign.com/articles/throwing_tables/
That article's a little old, but I just checked and the microsoft.com site is still table based.
Jeff Atwood on December 22, 2005 8:13 AMAll my ASP.Net sites output nice html and do most layout stuff in CSS. I end up using repeaters more than data grids and such like. Formatting the tables is one of the most interesting challenges. All my asp sites did that too.
Will Rickards on December 22, 2005 9:08 AMScott Guthrie just posted about the ASP.NET 2.0 Control Adapter Architecture which gives you the ability to change the how a control renders html. They are actively working on a project to show you how to do pure CSS layout using this architecture. a href="http://weblogs.asp.net/scottgu/archive/2005/12/21/433692.aspx"http://weblogs.asp.net/scottgu/archive/2005/12/21/433692.aspx/a
Scott also recently posted about some 2.0 UI templates (a href="http://weblogs.asp.net/scottgu/archive/2005/12/13/433079.aspx"http://weblogs.asp.net/scottgu/archive/2005/12/13/433079.aspx/a ) and a new CSS Properties Window (a href="http://weblogs.asp.net/scottgu/archive/2005/12/12/432993.aspx"http://weblogs.asp.net/scottgu/archive/2005/12/12/432993.aspx/a ).
Seriously, Scott's blog is invaluable to all ASP.NET devs.
Ricky Dhatt on December 22, 2005 9:13 AMI had the same issues coming from a world of ASP where I knew how to get nice XHTML strict layouts rocking with CSS. ASP.NET felt like a stumble backwards to the caveman days of FrontPage, "pay no attention to the markup behind the curtain."
Honestly I hover between Ruby on Rails and ASP.NET 2.0 because it is so much easier to produce the exact HTML I want with Rails.
That aside:
- the repeater is your new best friend
- never use any of the control properties (basically you need to ignore the property editor for anything that is UI-related)
- all your user controls should be emitted as divs
- tables aren't evil as long as you use them only for tabular data.
- tables are still best for complicated data entry screens (even the pros on ALA tend to agree)
- ignore the design view, you need to live in the HTML view of your pages
- it's quite easy to develop for Firefox first and then fix IE as long as you do not use the intergrated browser in VS
All that being said it's actually not too bad as long as you are comfortable coding xhtml by hand. If you're a drag and drop guy though be prepared for a learning curve.
Shawn Oster on December 23, 2005 2:30 AMI do some intranet application development with .NET 1.1, and everything I do is semi-standards-based. I can't be bothered to make the webcontrols output valid HTML (too much work for no measurable gain), but I do use purely CSS-driven layouts and my apps are smoothly structured and smoothly semantic like a baby's arse (OK, that was a bad comparison). And I do it for fun - the company standard is IE, only a handful of geeks use Firefox, and nobody knows I'm doing it; that is, until they just hit Print in their web browser and get everything wonderfully formatted for printing. In other people's apps, there have to be special report generators, and even then stuff looks awful because they generate tons of tables and everything.
BTW, Jeff, you should really change your blog comment script. If one doesn't enter his e-mail, it'll complain for the e-mail being mandatory; when you do enter it, then, your address is joyfully displayed for all the spamming world to see. If - on the other hand - you enter an URL, it gets scrambled. It's the opposite of what the script should do :)
Or not. I've entered an URL, and the script still complained about the missing e-mail address. If I enter both, what will be displayed...? Hmm...
Anonymous on December 23, 2005 2:50 AMFor the last few years the company I worked for were producing pure CSS sites using ASP.Net 1.1 ( examples: a href="http://www.think-energy.co.uk/"http://www.think-energy.co.uk//a and a href="http://www.autumnidealhomeshow.co.uk/Default.aspx"http://www.autumnidealhomeshow.co.uk/Default.aspx/a ) and it is quite possible to do but I did end up creating custom versions of all the regularly used server controls because the majority of those are deeply tied to table-based design.
As for Visual Studio's habit of horrifically munging your carefully crafted xhtml putting ALL YOUR TAGS INTO CAPITALS and killing your closing li tags, that was simply inexcusable. I've not played with 2005 yet, but the rumours were it is less cruel to html.
Ben Moxon on December 23, 2005 6:57 AMVS 2005 leaves your html code alone. That alone is worth the upgrade. :)
I've worked on one ASP.net website that I tried to convert to pure CSS. The powers that be stopped me from doing the complete deal.
I am in the process or designing a new site (my own project). It will be pure CSS when I am done. Most likely with a couple of themes to choose from.
Eric D. Burdo on December 23, 2005 11:20 AMI saw that people already mentioned CS above. So I won't talk about it. We've had very few problems developing a custom site with ASP.Net, .Net 1.1, and XHTML:
a href="http://www.stjohns.edu/"http://www.stjohns.edu//a
Our initial design was table-based, but over time we've migrated just about everything over to semantic markup and standards compliance. The downside is that because we started with a table-based, non-standards compliant design, there is still content (either .Net controls that we haven't refactored or user-entered content) that doesn't validate.
The company I work for also has several other sites (loosely based on this same framework), that are 100% compliant and 100% semantic, but they haven't gone live just yet. Shawn made some good points above, I only disagree with him on the following:
* "never use any of the control properties" - never say "never" ;-)
* "tables are still best for complicated data entry screens" - unless the data entry is for tabular data, then there is no reason NOT to just use LABEL, LEGEND, and FIELDSET elements to lay out your form elements
I would also like to add:
* HTMLElement is your friend
* asp:placeholder is your friend
There have been very few instances where the 1.1 Framework has provided us with a non-compliant control, and where it has, it has almost always been easily replaced with a compliant custom control. .Net 2.0 appears to be 100% compliant out-of-the-box so that should make it even easier.
travis on January 2, 2006 11:15 AMThanks to everyone who provided tips on ASP.NET adoption of CSS Zen garden techniques-- it is very much appreciated.
Also, there's a great thumbnail set of (all?) the zen garden designs here:
http://antenna.readalittle.net/thumblink/zenGarden/
Jeff Atwood on January 5, 2006 7:14 AMwww.csszengarden.com is no more, apparantly...
Geof on January 1, 2007 10:29 AM(To Geof) http://www.csszengarden.com/ is quite alive and well.
(To Jeff) So your original post was a little over a year ago now.... Have you since successfully used a CSS based design with ASP.NET? I'm struggling with that myself, along with a CSS vs Themes question. A group I work with is big on themes, but I just don't see the advantages of using ASP.NET Themes with CSS, in fact I see some disadvantages.... CSS seems to give you all/most of the real benefit of Themes in a more clear, simpler way.
The ASP.NET CSS Control Adapter toolkit does make things a bit easier. (http://www.asp.net/cssadapters/Default.aspx)
-Andy
Andy on January 16, 2007 11:51 AMAndy, I'm currently learning ASP.NET 2. I'm used to having control over HTML output and applying CSS to present the content. The book I'm learning from introduces CSS and immediately starts talking about Skins. On a quick test, style information outputted by Skins is inline CSS, which as you'll know, leads to bloated HTML documents.
Of my limited experience of ASP.NET development, I really hate the way that developers must jump through hoops to produce standards-based web sites. I totally agree with you that pure CSS (in an external file) is the way to go. Why does ASP.NET take so much control away?
Nick on January 19, 2007 6:44 AMHey jeff-- Microsoft.com is now css based layout -- It's 2007 for crying out loud it better be!
Matt on March 5, 2007 12:37 PMWhy is CSS so hard with ASP.NET? Because CSS is hard with dynamic applications (that resize) vs the Text-only CSS-Useless garden. I've yet to see a real web APPLICATION, not a web SITE that uses server side coding and CSS-only websites.
Dustin on September 5, 2007 3:02 AMDustin,
I agree, this is a major weakness of ASP.NET. But have you tried the CSS control adapters?
http://www.codeplex.com/cssfriendly
Jeff Atwood on September 5, 2007 3:10 AMDustin:
Um. How about Wired.com? ESPN is pretty close too. I think their landing page has a single table cell in it.
ASP.NET does not make CSS harder, in fact quite the contrary. Most controls in code-behind offer methods for injecting CSS properties and values. That is much cleaner that getting into the mark-up game in your server-side code like you had to for changing CSS values in dynamic languages like classic ASP and PHP.
I have tried CSS control adapters. They are cool but a heve a problem. In IE7 and Firefox, my website csstemplatesforfree.com is working fine but in IE6 browser my menus are disappearing. What's going on?!
victorantos on December 20, 2007 8:10 AMI agree, this is a major weakness of ASP.NET. But have you tried the CSS control adapters?
test on February 4, 2009 4:50 AMI have done standards-based sites with ASP.NET 1.1 a couple of years. It is basically pretty straightforward: just ditch all the buildt-in controls and such, Repeater is really the only control that can be used when you want ultimate control over the HTML. You just have to know your standards (and semantics, findability, usability, accessibility, ...) and the rest will come by itself. It is not an easy task -- I've spent years studying those and now finally begin to feel confident.
This approach is much more flexible: the behavior and the structure can be done, tried and tested first, the design can wait until there is real data with an usable site to work with. This evidently leads to better sites, at least at my company. Of course there are lots of other benefits than just more flexible workflow.
Nice to see you guys are getting into this. I have seen lots of great site shells done by web designers, that have been destroyed afterwards by coders that don't yet get it. Really exciting stuff.
Me too anon on February 6, 2010 9:47 PMMy asp.net site (powered by community server) is also fairly heavy on the CSS side of things (though there are still a few tables lingering around). CS 2.0 will be 100% CSS driven. A good deal of thought needs to go into your div structure, but man is it a real timesaver when it comes time to write custom themes.
jayson knight on February 6, 2010 9:47 PMThe comments to this entry are closed.
Subscribe in a reader
Subscribe via email
|
|
Traffic Stats |