Lean XHTML and Precise CSS

For those of you employing or exploring standards-based designs using CSS (and this should be all of you!), check out this post on Lean XHTML and Precise CSS. Looks like a good method for organizing your stylesheets. CSS files can get pretty complex as your site develops, so having some organizational method will make life easier down the road. The article also reviews the benefits of keeping presentation code in CSS and out of your page markup.

(Via 456 Bereas Street blog.)

CSS/Standards Link Roundup

Here are a few standards-related links I’ve been meaning to post. Hope you find them useful!

  • High Accessibility is Effective Search Engine Optimization
    Nice ALA article. It is completely true, as well. If you make your site highly accessible it becomes more accessible to search engine indexers as well as the visually impaired.
  • Visual Studio to Support Standards
    Based on my own personal experience, I’ll believe it when I see it. I believe they intend to do it but MS does not have much experience paying attention to standards in the past so I’m sure it will take them a while to get it right.
  • Tantek on CSS Hacks
    Great review of the state of CSS, hacks needed to implement, and future directions for browsers.
  • Printing a Book with CSS
    Another ALA article on how CSS could be used to format text appropriately for printing a book.

Feel the Power of Standards-based Design

Chris Spurgeon works on the American Public Media family of web sites. He recently posted on the Well about some changes he made to the Marketplace web site:

I just changed the tab navigation of the Marketplace radio show website (www.marketplace.org) from vertical tabs along the left hand side of thepage to horizontal tabs along the top. Other than uploading the new tab graphics, all I had to do was tweak 2 CSS rules and the change instantly appeared on more than 5 thousand static pages. So damn cool.

Chris graciously gave permission for me to quote his post here. This is a fantastic example of how going to a CSS design allows you to make significant changes quickly by editing just a single file.

Another thing to note is that if you look at the source code for the page, you can see that it includes corporate branding and search elements for the overall organization that do not cleanly separate content from presentation. The reality of web design in large organizations is that you often don’t have control of everything and have to work around various things that are not open for negotiation. However, the rest of the page does separate presentation from content markup, which enabled Chris to make that big change so easily. This shows how you don’t have to follow a purist approach to still benefit from these techniques.

Architecting CSS Files

Here is a nice article in Digital Web Magazine on Architecting CSS.

With nearly ubiquitous standards support among modern browsers, we’re turning to CSS to handle presentational heavy lifting more than ever. The more we rely upon CSS, the larger and more complex CSS files become. These files bring with them a few maintenance and organizational challenges.

Gone are the days of creating a single CSS file and dropping in rules as needed. As we build new sites, it is necessary to spend time planning how to organize and structure CSS.

Following the tips in this article should save you quite a bit of time during initial design and when going back to revise later.