Transcending CSS

Transcending CSS

Transcending CSS: the fine art of web design by Andy Clarke is one of the best books about cascading style sheets (CSS) that I’ve read in a long time.

As a designer Andy Clarke has produced a book that’s far from the hundreds of other dull books on CSS which are packed full of dry code examples and pages and pages of text. This is a beautiful and colourful book, filled with hundreds of images, that takes a real-life approach to designing sites and writing accessible HTML and CSS code.

While this book isn’t aimed at beginners, it assumes that you have at least a good, working knowledge of XHTML and CSS, it is very easily read and if you’re looking to get into modern CSS layout methods then this book could be an inspirational introduction to the subject. Because of the design of the book it’s also more accessible than Jeffrey Zeldman‘s excellent Designing with Web Standards, now in its second edition.

The book is organized into four main sections:

  1. Discovery
  2. Process
  3. Inspiration
  4. Transcendence

Discovery

In the first part of his book Andy Clarke introduces us to what he calls Transcendent CSS, that is code that looks to the future, building on current web standards to create accessible, cross-browser-compatible websites, rather than relying on outdated layout methods such as non-semantic tables.

He argues for web standards, acknowledges that not all browsers display the same design, advocates that web designers use all available CSS selectors and semantic code, use CSS3 where possible to look to the future, avoid using hacks and filters, and to use JavaScript and the DOM to plug any gaps in CSS.

One particularly useful exercise is where he takes real-life examples and shows how he would present these in XHTML, in a section entitled “translating meaning into markup”. His examples include a horse race, marathon runners, a taxi rank, books on a shelf, and a museum display of mediaeval helmets.

Process

Having set the scene over the first 100 pages (lots of pretty pictures on the way, so don’t worry!) Clarke explores a usable process for designing with web standards. It’s quite a good introduction to certain elements of information architecture, such as wireframing/grey-boxing and usability.

Taking the example of a design for Cookr! (his made-up recipe website) he adds mark-up to the design to show you how to best mark-up and organize the XHTML and CSS code. It’s a very visual and practical approach which is strengthened by excellent explanations of what he’s doing and why.

Inspiration

In the third part of the book Clarke moves away from code and gives us an insight into where he finds inspiration for website designs. And it’s not just from other websites but newspapers, magazines, buildings, streets … anywhere really.

This section offers a good introduction to grid and layout theory, and his advice about keeping a scrapbook of inspiration examples is really helpful, either a real scrapbook or something online like Flickr. He finishes off the section exploring why design is more than just creating attractive visuals.

Transcendence

In the final section Clarke brings it all together in some practical examples of how to take particular designs and mark them up using semantic XHTML and CSS. Of particular note is his extensive and creative use of lists for marking up particular content.

This section has the best explanation of relative and absolute positioning that I’ve read in any book on CSS. It’s really worth buying it just for that.

He finishes off the section with a look ahead to what CSS3 has to offer. I’m looking forward especially to the :nth-child pseudo-class which will make creating zebra-stripes on tables easy (currently available via hand-coding and jQuery), multiple background images for elements, and multicolumn layouts (currently available in Firefox via the -moz identifier).

Conclusion

I found this a really inspiring book which got the balance between code theory and practical design application right. I’d certainly recommend it to anyone who’s looking to improve their CSS coding or simply wanting inspiration about how to take their CSS to the next level.

Available on Amazon UK.

WordPress puzzles

I’ve spent much of today problem-solving a website project that I’m working on. I’ve decided to use WordPress to manage the site but need it to do a couple of things:

Navigation

The site has a number of sections, e.g. Home, About us, News, What we do, Contact us, etc. and I’d like the site to show the top-level navigation as a horizontal navigation bar just beneath the header, but show only sub-navigation for the current section in the right-hand sidebar.

In other words, if we’re in the About us section I want the right-hand navigation to show only sub-menu items from About us, e.g. Our History, How we are funded, Our year, etc.

I’ve managed this very simply using the Fold Page List plugin.

Custom styles

Next, I want to be able to apply a different coloured theme to each section, e.g. Home is green, About us is orange, News is red, etc.

In a good old fashioned hand-coded site I’d simply serve up a different CSS style sheet for each section, e.g. home.css would style the relevant parts of the page green, aboutus.css would style everything orange, etc.

Page-by-page

But how to do this with WordPress? I’ve found a plugin that will allow me to specify a CSS style sheet for each page, but this is done on a page-by-page basis rather than globally.

Page Template

I’d really like to be able to use the WordPress Page Template functionality for this — so when I select which Page Template is used, e.g. “About” then it automatically inserts the appropriate CSS file in the page header.

I suspect that I’ll have to write something custom using the wp_head() hook. I’d really like to write a plugin to do this, but my PHP skills aren’t quite as 1337 as I’d like them to be.

Ideally it would offer a configuration screen that reads in the template files, lists them on a page and allows me to specify which CSS file to link to which. Then the plugin does the magic automatically.

I’ll get working on this right away …

Latest version of Firefox broke our 404 page

Broken web page

The latest version of Mozilla Firefox 2.0.0.8, I’m sorry to report, broke a couple of our web pages yesterday.

UPDATE: This problem has now been fixed in Firefox 2.0.0.9: see Firefox 2.0.0.8 update to be updated

I noticed it just as I was about to go out for lunch. I was checking out a page on the University website and followed a broken link … to a broken 404 page.

Investigations

At first I simply suspected that it was due to some CSS tinkering that either my colleague or I had done. But neither of us had done any.

And then I discovered that it was working fine in Firefox 1.5, IE6, IE7, Opera 9 and Safari 3. It was working fine in my colleague’s installation of Firefox 2.0.0.7 … and then when he restarted the browser to allow its automatic update to version 2.0.0.8 it promptly broke.

So the culprit was indeed the latest incarnation of my favourite browser. How disappointing.

The problem

The way that the page is constructed is that there is a div that wraps the page’s main content. If I was recoding it today, I’d call it #contentWrapper; when I coded it 10 months ago, I called it #main.

Within #main there are three other divs, in order:

  1. #content
  2. #sidebar
  3. #related_content

#main then has a background image of part of the University crest. How much of the crest is displayed depends entirely on the height of its three internal divs.

Only, this appears to be the problem that Firefox 2.0.0.8 has highlighted/discovered/introduced* (*delete as applicable): it now does not recognize the height of the internal divs: #content, #sidebar and #related_content and so collapses, as you can see from the screenshot above.

The (temporary) fix

Introducing a min-height CSS attribute to the code has temporarily fixed the problem, but fixed the height of #main at 550px — enough for the 404, 401 and the front page, which all use that code.

Recoding

I’m now working on a more robust fix … in fact, I’m now working on recoding the entire site to make it more usable by the few ancient browsers that Google Analytics informs us are still being used to visit the site, such as Firefox 1.0, Firefox 1.5, and various older versions of Netscape and IE.

I had used a variation of Matthew Levine’s In Search of the Holy Grail method on A List Apart, mixed with a Dan Cederholm’s Faux Columns approach, for a number of reasons:

  1. I wanted the site to be as accessible as possible, and decided that placing the main page content as high in the source code as possible would be helpful.
  2. Do you know how difficult it is to achieve something as seemingly simple as creating a page layout with three equal-height columns?
  3. The ‘holy grail’ approach worked for almost everything we needed until it came to wanting to jump down to page anchors. We had a couple of A-Z lists and wanted to be able to click on ‘D’ to take us down to the ‘D’ entries. Instead, it pulled ‘D’ up to the top of the page and made A-C disappear completely!!
  4. We decided to fully support only modern browsers: IE6 and IE7, Firefox, Safari/Konqueror and Opera 8 and above. (While I don’t class IE6 as a modern browser it’s the one used on about 75% of all the university PCs so we had no choice but to support it.)

I guess I now need to be finishing writing these fixes sooner rather than later. I’m just a little disappointed that the latest version of my favourite browser has broken the code, while Safari, Opera 9 and even IE7 saw fit to render it as expected.

However, what I’m not entirely certain about is whether Firefox is now simply rendering the code as it should be (in other words, I’d missed a trick with my code) or whether this genuinely is a fault with Firefox’s rendering. Time will tell.

Eric Meyer’s CSS Sculptor

Eric Meyer's CSS Sculptor

This is my latest favourite ‘toy’ that I’m playing with just now. Eric Meyer’s CSS Sculptor is a Dreamweaver Extension (for DW8 or DW CS3) from WebAssist developed in collaboration with the CSS guru himself. It’s not cheap, though: normal price is US $149.99, although I got it on special offer via .net magazine for US $104.99.

This extension allows you to quickly create a standards-compliant, CSS-based layout in minutes, rather than hours, in six simple steps:

  1. Choose one of the 30 built-in layouts (e.g. 1 Column, Fixed, Centered; 2 Column Elastic, Left Sidebar; 3 Column Fixed, Header and Footer, etc.)
  2. Customize widths and heights, margins and padding
  3. Set basic typography (text, h-tags and links)
  4. Style each div with background colours and/or images
  5. Define which layout components to show or hide in a print style sheet
  6. Once you’ve decided on a Doctype and whether to include the CSS in a separate file or within the document head click Finish to allow the extension build the code — it will build with or without explanatory comments, which are really useful for understanding what it’s done and why

Output code supports Internet Explorer 5.5 – 7.x, Firefox 2.x, Safari 2, Opera 9; earlier versions of Netscape and Firefox are notably absent from this list but all code that I’ve created with this extension so far have worked fine in Netscape 7.2 and Firefox 1.x.

Obviously, this isn’t a replacement for knowing CSS inside out — everyone does, right? 😉 — but it’s a great tool to add to the arsenal, and a great way to learn CSS, or simply to knock out a CSS-based design very quickly.

(This post first appeared on the Scottish Web Folk blog.)