Binary Kitchen

www.binarykitchen.com is a labour of love - you will recognise some professional solutions, especially the CSS part was challenging. Such a fancy design needs lots of attention and the performance must not deteriorate. It's important to keep the balance between features and page speed. Below I explain you how some parts have been implemented:

Background images

The upper half of
the chef's hat.

The initial design was created in Photoshop, every background image is put in single layer overlaying another layer. Exporting background images for CSS is done by disabling some layers in Photoshop. Some are saved into JPG for better compression results, others into 24-Bit PNG format because of alpha transparency. But for some background images, I have disabled the alpha transparency, for example the upper half of the chef's hat on the entry page. That because transparency enables you to show underlying parts, in this case the binary texture in the header.

I have kept most background images under 1 KB for performance reasons, especially for embedding images into CSS.

Embedding images into CSS

For reducing HTTP requests, it is very recommendable to embed images smaller than 5 K straight into CSS. You can treat these images as if they were little chunks of data by encoding them into a hexadecimal stream. The RFC 2397 allows that. Using this technique, embedded images are loaded at the same time when the CSS file is loaded:

The part after "base64," is the hexadecimal stream. To generate the hexidecimal stream on the fly in PHP, you could write something like this:

Remember to use an absolute path to the file you want to base64 encode into a hexidecimal stream. Don't encode files larger than 5 K because the PHP method file_get_contents() is accessing the file system on the server requiring a pretty amount of ressources.

Don't leave mobile devices out

To make www.binarykitchen.com a good experience for mobile devices like the iPhone, I added a separate CSS stylesheet with media="handheld":

Inside that stylesheet, I reincluded the default CSS file for the screen by PHP's require() command and then all I had to do is to hide some elements with display:none to prevent them from appearing in mobile devices. For example the chef's hat and other decorative elements.

And I din't forget to trim the screen for small displays with viewport's meta tag. Otherwise the website would have looked like a thumbnail on the iPhone:

Do the loop With Javascript

Did you see the slider? Where you can click through all my work? When implementing this in Javascript with the help of Prototype, I had the problem that I couldn't lay down the images as an array. Because an array has a beginning and an end. So I needed a collection that loops. At the end it rewinds to the beginning. So I developed the associative DoublyLinkedList class. With this you can loop with next() and previous() methods without worrying about the end.

OptimiSe with YSlow

There are many other techniques I better not reveal in one news entry. But with the help of Firefox's extension YSlow you can optimise your website very well. It's a good start to learn from there. YSlow shows you where your bottlenecks are. This website has a YSlow overall performance score of 90 which is good. Try testing the performance of websites with that cool extension.

That was The Making of www.binarykitchen.com - you can look forward to read more hints from me in the future news.