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.
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).
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.
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.