This is the point where I could write an essay about how cool the new website is, but now that this is a blog about development, we should stick to the boring and nerdy facts.

Overview

If I’d have to describe the page in a few words, I would likely say “sprite & javascript madness”.

Javascript

In the first few drafts, the only scripted element was the slideshow in the header. But while being in the development phase, we came up with some neat (and mostly tricky) ideas to improve the user experience using javascript.
Lets take the logo as an example. In the final layout draft it was just a white logo, nothing more, nothing less. As I accidentally mixed up the logo and the header, a new idea was born. It solved the issue about a missing mouseover and looks pretty awesome (though, even if the repeating image is nowhere near perfect, its close enough).

CSS-Sprites

The sprite stuff is something that nearly drove me insane. At first, every background was a separate image. Ok, thats basically nothing to worry about, but after seeing the performance graph with all these separated requests being made, I realized that there is no way around sprites.
There are some pre-made solutions for that, Sprite Me for example, but either I’m too dumb the get some decent results with them, or they did not fit the situation. So I was forced to combine them myself. As someone with zero experience in image editing software, I felt like a 3-year-old in an art academy.
But after some minutes it wasn’t so bad after all. For example layers. First being a feature straight from hell, they appeared to be pretty helpful in structuring the image.
And so, after hours of testing, resizing, repositioning and exploring the world of graphic designers, the huge sprite was created. It contains 16 single images and so reduces the amount of requests by 15, pretty neat if you ask me.

And where’s the code?

Yep, there is no code yet. If you are interested in how something works on the new page, just launch Firebug and see for yourself. It will be partially explained in the next blogposts though.

Now for some statistics! Everybody loves statistics.

159 lines of javascript
800 lines of css
7 images in total
3 custom templates
3 custom contao modules with 39 files in total

All sizes in uncompressed and unoptimized format.