Graduate recruitment site live | September 12, 2003

The last couple of weeks we've been busy building a small site for a well known high street brand, which went live yesterday. This job was purely a production job, the design having been executed by a partner agency of print designers. I did all the CSS work, Jamie did the project management and production while Jeremy did the PHP programming and Database work.

We decided that the site needed to have a high level of accessibility so we chose to build it using CSS layout. I started by building an XHTML template and making sure the code was logical and valid. Then I created a basic stylesheet to serve to NN4 and from this imported other relevant style sheets.

The first main stylesheet I created was layout.css which not surprisingly controlled the layout of the page. I built this stylesheet up step by step, starting with the main elements then slowly getting more specific. Like most of my CSS work I try to keep the flow of my CSS files similar to the flow of the document, as I find it easy to locate styles this way.

Once the layout started coming together, I created a stylesheet for the text styling and then a separate stylesheet to handle the CSS rollovers in the site nav.

Once the basics were done, It was time to start browser testing. If you look at the stylesheets you'll see that each one has a version number (currently 0.9). Basically during the testing phase I'd fix an issue, save a version of all the files and then move on to tackle the next issue. It's a minor thing, but keeping template version numbers in the CSS files helped keep track of which files were the most recent, and which XHTML templates they related to.

Once the final XHTML and CSS templates were done, everything was looking rosy. I came across a few issues, mostly involving mysterious gaps appearing in IE/Win because it couldn't handle training whitespace in the code. However I was surprised that all the bug's and tweaks were very minor.

The CSS code was looking quite nice at the template sign-off point. However the production schedule on this job was really quite tight, so when it actually came to building the pages, lots of page specific styles had to be created and unfortunately the nice structure of my CSS files broke down a little. Also these later additions were fairly poorly commented.

Some pages needed their own specific styles and I was initially planning to create a few separate stylesheets. However Jeremy suggested writing an ID to the body tag, allowing individual page styles to be controlled by the main stylesheets, making his programming job a little smoother.

Overall I think the site has worked well. It validates, is relatively clean and reasonably semantic (considering the time pressures we had). Apart from one or two omissions (e.g. no skip nav links or form groups) the site is reasonably accessible and would pass a Bobby AAA check if you've got a fairly open mind (and don't read the user checks too literally).

What I'm most chuffed about is having the ability to do a site for a well known brand in CSS. There are so few big brands out there building sites using web standards, I'm fairly pleased that we've released another one into the wild.

[site and client details removed at the request of the client]

Posted at September 12, 2003 3:53 PM


Jacob Patton said on September 12, 2003 5:12 PM

Nice site! Thanks for the run-down of your design/development process—quick overviews like this one help me think how to revamp my own process.

Allan Moult said on September 13, 2003 1:32 AM

Great information you’ve shared. Many thanks Andy.

However, looking at the site on my G4 PowerBook, the [login] line is almost unreadable. I can send a screenshot if you’d like it. Otherwise everything looks great. Loads quickly too.