WicketPixie 2.0 Dev Blog: Images are out, CSS is in

Ah, it is Christmas Break at last, and that means it is time to get cracking on WicketPixie 2.0!

I decided not to release version 1.2. While it was working properly (I am running a Release Candidate on my blog right now), Chris, myself, and others agreed on the fact that it was getting cluttered and unorganized.

I started work on 2.0 awhile back, and I have already made some local changes waiting to be finished. But my primary goal is to make 2.0 as fast and clean as possible, so I am starting with the frontend theme.

The current design uses images for just about everything you see, the rounded frame, the topbar, the drop shadows, etc. The latest versions of Firefox, Chrome, and Safari all support CSS3’s border-radius and box-shadow properties, which means lightweight CSS can be used in replace of bandwidth-heavy images. The final two major browsers, Opera and Internet Explorer, do not support CSS3 as of yet, so a different solution must be used. Luckily, WordPress includes the awesome jQuery JavaScript library, which is extendable through plugins. A few of those plugins allow for rounded borders and box shadows on browsers without the CSS support. I have not decided on one specifically, but I have got a few under consideration.

The reason why I want to get most of the images out of the design so badly is page load times. I ran two benchmarks on both this blog and the master branch of WicketPixie, and images consisted of about 7% of each site’s load time. That might not seem like much to some of you, but think of it this way: If your server is located in one part of the world, the latency between that server and your visitors can be really high, so we want to save all the bandwidth we can.

That’s it for now, hope you enjoyed this developer blog and I hope I can post another one soon.