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.

Web development process

Grey cubes arranged in rows -- one yellow cube

A few months back I sent a friend of mine, Peter, was looking for a book about building websites. So I sent him my copy of HTML, XHTML, and CSS Bible by Bryan Pfaffenberger et al.

I didn’t really use it very often, relying now on the O’Reilly definitive guides for XHTML and CSS. But there was one chapter, towards the end of the book, that I did find useful, particularly in the early days. That chapter outlined the Web development process.

  1. Defining your goals
  2. Defining your audience
  3. Developing competitive and market analysis
  4. Creating a requirements analysis
  5. Designing your site’s structure
  6. Specifying content
  7. Choosing a design theme
  8. Constructing the site (coding)
  9. Marketing the site

Notice how much planning is involved, and how far down the list actual coding is.

Finding the right CMS for my project

Content Management
Photo by ravennce

Sorry about the lack of proper blogging over the last few days. I’ll tell you what I’ve been doing: I’m looking for the right content management software for a website project I’m working on.

So I’m spending the evenings either trawling through web pages of documentation, trawling through pages of books about specific content management systems, or trying them out for myself either at www.opensourcecms.com or on the vendor’s own website.

What I’m looking for

Ease of use
The clients that I’m working with are not technically-minded — they are ordinary human, sentient, non-geek beings like you and … well, like you (probably) — so the CMS that I pick has to be easy to use.

So that rules out about half the opensource CMS applications out there just now.

Customizable
I need to be able to completely customize the site, as though it was a traditional, static site. I don’t want it to look like a portal with limited blocks of content. Also, it would be great if it could be fairly easily customizable using a combination of mostly XHTML and CSS. I don’t want anything that I have to use an unnecessary amount of PHP just to generate an XHTML document, or translate swathes of code into XLST or YYZ or whatever before it works.

So that rules out about another 25% of systems!

Site structure
I need to easily build the information architecture in it, and (preferably) have the CMS manage and automatically build the sub-navigation lists. It would also be great to be able to see the site structure in some visual form.

There go the rest!

Ideally, I’d like to build it in TERMINALFOUR SiteManager — I could have it built and finished in a couple of days with SiteManager. But unfortunately my clients don’t have a spare £50k lying around to spend on web software!

My current short-list

At the moment my short-list comprises of (in alphabetical order):

Drupal

http://drupal.org/

To be honest, Drupal is currently on my list simply because I haven’t yet ruled it out! But I’m attracted to Drupal and have heard good things about it.

I also own a book about Drupal: Building Online Communities with Drupal, phpBB, and WordPress and Drupal is the only one of the three that I’ve not properly delved into yet.

ExpressionEngine

http://expressionengine.com/

This came as quite a surprise to me, because ExpressionEngine (or EE) is a commercial product, with a very reasonable pricing plan: free for the blog edition or US$99 for the full version if you’re building a non-commercial, or non-profit, site.

I also really like the documentation (there’s lots of it, and some of it is video). But most importantly the back-end looks simple enough to use, and it appears to have the customization features that I’m looking for.
I look forward to checking this out some more …

WordPress

http://wordpress.org/

And of course: my beloved WordPress. WordPress fits almost all of my criteria … and with the creation of some cunning templates I think I could get my customized navigation to work. It may need some cunning PHP tweakery but I know that it would almost immediately fit the bill.

Conclusion

But that’s the thing … I know that I could most easily build the site that I want, with the features that I want with WordPress — it just gets better and better — but I didn’t want to simply take the easy road: I wanted to take a step back and evaluate the opensource CMS scene once again to see what else is out there, and have their back-end interfaces got any better.

Sadly, I think on the whole the answer is a resounding no. WordPress absolutely rocks … I’ve yet to fully understand the CMS model that Drupal uses, and if I end up not going with WordPress then it looks (at the moment) that ExpressionEngine is the way to go … and that’s a commercial product.

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.

Literally the middle of nowhere

Jane and I were looking online to see where we might spend a couple of nights this week. So we checked out the Visit Scotland website for accommodation in the Highlands.

Location/Map

We found a nice place called Braelangwell House on The Black Isle, clicked on the “Location/Map” button and were faced with this sorry excuse for a map:

A map, showing a box in the middle of nowhere

What possible use is that?!

(What is perhaps even worse is that on my main PC I can’t even see the map, in Firefox, IE or Opera! The site is telling me that I don’t have JavaScript enabled. I clearly do! Some terrible scripting there methinks.)

Getting there

So instead we turned to the “Getting there” page. It offered two options:

  • Getting there from the Information Centre
  • Getting there by Aeroplane

We’d want to get there by car … and not from the Information Centre (wherever that is!!).

We’ve booked elsewhere.