"web standards" in Weblog

A couple of interesting finds turned up on CSS-D today, bith of which could prove very useful. The first was a solution to Big John’s How To Clear Floats Without Structural Markup effort… Mark Hadley has managed to get around IE5/Mac’s need for javascript to insert clearing elements by feeding it display: table-cell. It’s a genius solution and I now plan to try the technique out in full.

On top of that, Alex Robinson has found that applying the display: table-cell will stop IE5/Mac from stretching divs without an explicit width to 100%.

Busy day, all in all!

I was quite excited about the $80,000 of fines that were issued by New York Attorney General Eliot Spitzer to Ramada and Priceline for the inaccessibility of their websites. It seemed like things were finally moving… As it happens though, they appear to have been let off lightly. Very lightly. In Web accessibility litigation: it?s not what we want Matt May has taken the time to analyse the terms of the settlement and write up his findings.

These companies’ve been allowed to flag items from the accessibility guidelines that they consider too hard to implement… Points flagged include: ‘contrast between background and foreground’, ‘avoid deprecated features of W3C technologies’ and ‘logical, device-independent event handlers’. These are bread and butter issues that any developer should be able to sort out. What happened?!

Mike’s article on the ABC News Redesign has been discussed elsewhere already but I thought it might be worth drawing attention to his second-to-last paragraph ‘Another business case for web standards’. His business benefits include a 50% reduction in code size and an increased range of ad sizes they can offer thanks to CSS’s flexibility, with the added bonus of the site working on wireless devices. These are the kinds of statistics we need to help sell web standards in the real world so many thanks to Mike for the article.

I’ve never had to monkey with HTML 4 Transitional doctypes before but the project I’ve just finished required it and it’s brought home exactly WHY I’ve never done it before.

Having the HTML 4 doctype without the URL declaration throws IE6 into quirks mode so it behaves like IE5.5 in terms of box model and hacks/filters… Not such a bad thing in the short term - at least it allowed me to keep my box model hacks simple (* html all the way), but it was only when I came to test in Opera that things got complicated. IE6 is in quirks without the URL and Opera is in quirks too. Fine. But Opera doesn’t fall for the * html hack so it doesn’t get fed the old box model dimensions. In fact I couldn’t find ANY sensible way of filtering Opera from Mozilla at all so Opera was stuck with W3C box model figures. That’s it. As far as I can tell, using the HTML 4 Transitional doctype makes it impossible to produce good cross-browser pages. This is hardly earth-shattering but I’d never thought about it before.

I think I’m a bit late on this one but style:phreak has put up a nice little demo of an XHTML form. Now that’s hardly groundbreaking but the code is very nicely structured and I particularly like his ‘hide optional fields’ option. As a user that’s something I’d really appreciate, especially for long forms, although I doubt you’d squeeze that one past many marketing departments…

Just a quick update… Mike Davidson has released version 2.0b of sFIR, which adds improved performance, better flexibility and even accessibility to the mighty script.

I used sFIR for the first time last night (I’ve been waiting for the chance to put it into a production site and it’s finally arrived) and I am very very very impressed. I had a few teething troubles with the 1.2 version I was using not passing colour values in correctly and resizing the Flash text to be just slightly too small, forcing me to hack the fla, but it sounds like these things have been addressed now. Awesome work. Simply awesome.

Happy Cog, Zeldman’s studio, have just announced their redesign of Amnesty International USA’s website, and a fine job they’ve done. On top of this they’ve helpfully decided to write up the process.

Now, the most interesting thing here is the header navigation system they’ve adopted, something close to my heart at the moment. I considered something similar for a site I’m doing at the moment but disgarded it because the categories didn’t balance enough for my liking. Now I’ve seen how well it works in practice I’m kicking myself for not persevering. On the other hand, I’m certain that we’re working with a tighter budget and with less time… [sigh].

I also really like the colour scheme they’ve chosen… It’s vibrant, exciting and a huge departure from what I expect from Amnesty - but in a good way. It reminds me slightly of Oxfam actually. The home page makes good use of imagery, something that’s always sold good causes to me, combined with a simple two column layout presenting the news alongside what you can do to help. It’s very well thought out and I think it’ll do very well for Amnesty.

Mike Davidson was the original daddy of the Flash Image Replacement technique, having invented and employed his own version in the ESPN redesign a couple of years back. More recently the technique was polished and relaunched by Shaun Inman. Now Mike has taken back FIR, now dubbed sFIR, improved it (with help from Tomas Jogin amongst others) and taken on board the advances to the method by Tom Werner and Rob Cameron… And the results sound a bit special.

The latest incarnation allows sFIR to replace html blocks as well as headings… Text can be scaled (although not without a page reload)… It’s printable… Text is selectable…

I really really like the look of this one!

The bandwidth-saving aspect of CSS is something that I’ve neglected of late when selling CSS as a technology. Mostly people are interested in the accessibility aspect and occasionally designers want to know about the interesting effects that can be achieved a la Zen Garden. Clagnut has posted a short except from an interview he gave the WSG in which he summarises the bandwidth savings that Multimap has made by migrating to a CSS-based layout: an astonishing 40,000GB per year!!! That’s after reducing page weight from 65KB to 35KB.

Doug Bowman did a CSS makeover of the Microsoft site recently as part of his Digital Design Seattle presentation in which he reduced the size of the page by 62%… That’s an estimated bandwidth saving of 329 terrabytes per year!!!

As part of some training I gave last year I was asked to work up the Oxfam website home page in CSS as a proof-of-concept case study to accompany training material. My version worked in N4 upwards and weighed in at about 50% of the table-based original. That doesn’t include added bonus of stylesheet caching on subsequent pages etc.

Savings like these, to big sites in particular, could be a real selling point for CSS…

There’s been a really good discussion of web standards and their uptake going on over at asterisk over the past few days. Keith called on beginners and pros alike to say what they thought the barriers were to the widespread adoption of web standards were and it appears to be something that everyone has an opinion on! It’s great to get so many different perspectives on what the issues are and how people intend to deal with them. The audience is obviously a bit biased - asterisk is heavily linked from the WS blog community, but there’s still quite a variety of views expressed…