About Efficient CSS

Having worked for many years with web design, and lately also having spent a lot of time on making web sites load as fast as possible, I have gradually developed an interest in what I call "efficient CSS". That is, CSS that not only meets web standards, is valid and all of that, but that also is very efficient. So this is where I post things I write, fnutts or other things I do, or links to good and useful resources, that falls into the category of "efficient CSS".

The design of the page

The page design is probably a little unusual. All the way at the bottom of the layers, very hard to recognize, is actually a picture of interlinked cogs that has been tweaked and filtered. On top of that are thin layers of pink. It was my wife Cindy who proposed pink, and as I wanted something unusual and like pink, I went with it.

Instead of writing a negative margin based layout or something that looks like a table or a blog, I decided I wanted to have something less usual. So I made a strange layout that is designed to break and degrade in a somewhat graceful and interesting manner in narrow viewports or if you make the viewport narrower.

Also, I chose to create a layout with "cracks" where the background and the pink shines through to make it more lively. Finally, for the main content column I went with very light shade of pink that contrasts slightly less with the text than white would have done, and at the same time plays with the pink.

Overall, I am quite pleased. It's a tad strange, a bit edgy, quite unusual, to me also a bit funny, and look more or less that way regardless of whether the viewport is 600px or 1600. I like all of that for this site. At least for now, and hopefully for a while.

Posted: September 2011