Tim Brockman . com

WordPress template redesign with object oriented CSS

• Tim Brockman
• @ 8:55 am

This WordPress template has been redesign using object oriented CSS. It was long past due for a site redesign but my personal blog generally takes a back seat to what I'm working on. All the same I wanted to put a couple things to the test, and for me this is the appropriate place to  do it.

These experiments are;

1. initial load times for the a WordPress template that keeps the entire library. Granted once the oocss library is cached the site comes up crazy fast. The library could be redacted to what I use but, I really like playing with the classes in Firebug. At the time of writing, preliminary tests with Yslow shows a 108 k (48k from a .png screen shot), which drops to 30k after caching, fine over a spotty unsecured neighbors wifi but, not great for dial-up in a remote Country. The 6 server calls for the entire library of CSS files + 1 for my WordPress class extensions may be more than some are comfortable with but, these could be combined if needed. Compression (gzip) scripts may be out of line, if I share this. On my shared server an .htaccess modification and a quick php script are appropriate but, many Apache servers run mod_deflate. In any sort of money site load time is critical. Studies I've read put audience attrition at 16% for 10 seconds of wait, and 50% for 15 sec., 80% at 20 sec. (56k modems were still heavily in use). In my experience audiences start dropping much quicker.
2. content order, and whether or not it still has much relevant on-site SEO impact. My hypothesis is the search engines are far more cleaver than they were 5 years ago. Google's crawlers decipher at least some JavaScript.  I still hear a lot things to the order of make every keyword bold or strong, make sure your content and navigation are strategically ordered etc. There may be something still behind the content order but, for the most part this is cruft left over from 2001. Granted this isn't a sterile, controlled experiment but it may hint at something.

At any rate I'll let you know what I find out.

Example Firebug class edit for this theme

Firebug Editing:

If you have firebug visit oocss.org and look at the tutorials, the same libraries are used in this template, therefore you can use the same CSS classes and extensions to change it. For instance altering the class="mod simpleExt comment bleach" of the widget boxes to class="mod me highlight bleach" will turn them to mustard yellow with pink trim. Furthermore if you are late to adopt a CSS grid system this is a great crash course. You can find the latest version of oocss on github. Of course I cant forget Stubbornella.org, that started and the project thread.