The original title of this entry was ‘validating government’ and while that is correct this site does more than just validating. Thanks to validation nut Raph de Rooij and other people from inside the government following specifications correctly has become more than ‘nice to have’. The main site, Overheid.nl, now follows the guidelines they created and perhaps goes a bit over the top. There are a few sections that are still being worked on and some sections of the site (quite a few items from the blue navigation bar) are taken care of by external parties so neither I nor Q42 is responsible for that. We did deliver a simple template for those pages.
(The CSS does not entirely validate thanks to having used CSS3 compatible pseudo-element syntax and a -moz- property for usability enhancements. You should always focus on the user. We also used @import for older browsers and /*\*/ to hide all from Macintosh IE. And even the safest hack of all: a conditional comment for Internet Explorer.)
We removed about 80% markup from the home page. Going from about 25 kibibyte to 5. Zipped it’s about 2200 bytes… The hit rate will probably drop as well as I moved a lot of images into a single image file taking care of the positioning and display of the individual images that were part of the larger one using CSS. I like this technique a lot especially as it seems the page loads twice if not three times as fast as before. Also used are class and id attributes on the body element to be enable the ability of using a single CSS file for the whole site.
The hardest thing to ‘emulate’ with CSS — I already thought this before I started the project — are the five large colored buttons on the home page. Although using CSS I was able to increase the clickable area, the most difficult part was the scalable full width of the five all together restrained with a margin from each side. I really thought that was going to require either scripting or some table for layout in the markup… Nevertheless, using some fun background image techniques and some small IE hacks it all works with the minimum of markup required. And no rounding trouble at all! Although it took probably about an hour and a smart thought from Sjoerd Visscher to solve that one.
The CSS file is also zipped and about 3600 bytes. That’s quite an impressive compression by the way as normally the file is about 22 kibibyte.
Pretty neat.
What I like most about the site is that it totally does not look like a site created with CSS in mind. It’s pretty in its own way and it’s quite a unique design too, although some people tend to think it’s a bit childish. Every time I look at the site I think it’s done using ugly nested tables although, having designed the markup and style sheets myself, I know that’s not true. Probably that’s because quite a few things were not sacrificed. We could have easily replaced some of the image text with styled text, but by keeping it exactly the same I think we got that authentic look.