New Blog Design
My old blog design was looking a little untidy both on screen and under the hood. I recently undertook the arguably pointless task of overhauling my blog design, and upgrading to the latest Wordpress. The emphasis of this new design is on the content. I was able to crunch the side bar in to a tiny area by using a dynamic multi-level menu that fades in/out.
Updating the design was an interesting exercise and I came across a few impressive tools to help with the design and performance of the page. Here they are in no particular order:
Wordpress Theme Generator
I’ve always wanted to use Yahoo’s User Interface components with my blog design. YUI provides an excellent library of css and javascript to build rich interactive sites, while still maintaining cross browser compatibility. The navigation menu with the fade in/out to the left of the blog is an example of the YUI menu component.
The Wordpress Theme Generator allows you to modify the design in real time. I found the interface a little quirky and resorted to downloading the convenient Zip of my partial design and then hacking it to bits with vi.
All in all it’s a nice tool to get you up and going with a YUI compatible Wordpress theme.
YSlow
YSlow is an excellent FireFox plugin to determine how well your pages load, and where exactly performance improvements can be had. You will need FireBug installed to run YSlow. I managed to shave seconds in loading time by concatenating my javascript and css assets, and then deflating (mod_deflate) them via my .htaccess. The page went from about 330Kb to 80Kb.
YSlow grades your page based on several criteria, and these criteria combined result in an overall page grade. One of the criteria I believe most small time sites can safely ignore and that is the content delivery network (CDN) criteria.
Another great aspect of YSlow is that you can click on each of the criteria to learn more about the criteria. It’s a very efficient way to learn.
My site loses the majority of it’s grade because of widgets I have incorporated from third parties. For instance, MyBlogLog attaches ETags for the image files which YSlow believes are pointless. This highlights how important it is to be selective of the widgets you add to your pages (anyone been reading TechCrunch lately? ouch).
Online Stripe Generator
Wow, you know you’re around web 2.0 when the only purpose of a site is to create a tilable, striped image for web backgrounds. The interface of this tool is slick. I’ve always wanted to create striped tiles as they seem like a subtle way to brighten up a page, without distracting from the content.
WP-Cache
This Wordpress plugin is an absolute must for anyone who cares about their site visitors. WP-Cache lazy caches pages so that after the first load, the page is fetched from disk. By installing this plugin I improved my blog performance by 20% by going from a 5 second page load, to a 4 second page load. I don’t think you can really lose with this plugin, and in most cases you just need to turn it on.
Conclusion
The primary goal of this new design has been to focus on the content of the site without obtrusive distractions. The design is not fancy, but I think it’s achieved it’s goal. The tools I’ve mentioned above were a great help and I highly recommend them.
