Every now and then, as part of my job, I get to work on building websites – either tinkering with what exists, or creating new pages. Sometimes, I even get to work on brand new ones. This week, I’ve begun work on a new site, and rather than tinkering with the old design for another year, we’ve started from the ground-up. In this case, we’ve also gone with a web-standards based design.

And suddenly, I’m into the learning game, starting from scratch again, checking out resources and remembering what tag goes where. This is the kind of thing I love; knowing what result I want but having to remember how to do it, and thus having to research again, and hopefully drill the code deeper into my memory. The site is nearly done; it still needs content and final tinkering, but the tough stuff – basic layout, design choices, usability – is all there. It’s been really satisfying to work on – seeing something come to fruition – and even though I’ve worked with standards-based design before, it was remarkable just how fast it all developed.

This was in part thanks to the Web Developer extension for Mozilla Firefox, which makes life wonderful. Lots of great shortcuts – for turning styles on and off, outlining block-level elements, disabling images, validating code. If you don’t have it, it’s worth getting Firefox for. Easily the most impressive feature is the ability to edit the CSS of a page live in a sidebar whilst the page alters in realtime in the main window.

This feature is what really saved time in development. I sketched out the page with pen and paper first. Then, I worked out just how many div tags that would require, and marked up dummmy content with the divs. Then, I loaded the page in firefox, and started writing the stylesheet direct into the sidebar. It thus took very little time to get the draft of the layout created, and then I could further tinker with styles and add nested styles with great ease. I’m really proud of the result, and will probably link to it in due course. It’s a huge saving in terms of download time compared to the previous site. Also, there’s a certain glow to be had when you see the phrase “THIS PAGE IS XHTML 1.0 (TRANSITIONAL) COMPLIANT!”

This site started out as an attempt at compliance; it didn’t last, as everything got a little sloppier as it went on. Hey, at least I started with good intentions, and at least it’s better than not attempting. Perhaps the thing that made me happiest with the new site was the method of development; starting with markup, styling later, and managing always to keep it tidy. It’s the cleanest code, both XHTML and CSS, that I’ve ever produced. I hope the site serves its purpose as well as its code is neat.