Latest Freelance Website

Check it out: http://www.buzzardproducts.com

The latest site, buzzardproducts.com, is for a family friend who wanted to start a t-shirt business. I put up the first generation of the site. My goal was to have only javascript with a ratio of 10:3:1, which is beginning to be my new idea. In this case, I wanted no screen refreshes - so it required some intelligent image loading because I am relying 100% on PNG transparencies. Thus, it does not work in ie6, but that was an executive decision. I no longer support ie6.

The ratio is for every 1,000 lines of javascript (including comments and whitespace), there are about 250-300 lines of css, or less if you use more advanced selectors. Let's say 300 in case you have to be more verbose in the css. And 100 lines of html.

I know, it sounds crazy to have only 100 lines of html, but in this website, almost everything s a div. If you subtract the very basic page tags that every website has, there are only 59 lines of html.

I used smushit.com to get the pngs as small as possible, the W3c validator to ensure xhtml compatibility, and i threw in google tracking, which of course ruins the validation, but i wanted it.

I also make heavy use of smart object loading, by adding the css in the head, the javascript in the bottom of the page (in a way that defers, and does not allow blocking).

I even created "shams" or what I call the scenario where you load in a lower resolution graphic for the main page (say 40k), and while the page is loading you load the higher res.

There is still too much waiting in my mind for non-cache users. Most of the waiting is for the images to load. I still have some logic to do in order to make this faster and smarter, but the difference here is in the style of loading. Like i said this website has no screen refreshes. I have to load everything at once... well, kind of. I have to load only what I need at first, then intelligently load the rest.

The actual code ratio in this case was 1,000 :: 380 :: 73

It is superfast in Chrome 1.0 and Safari 4, fast in Opera 9.6, Safari 3, IE 8, and moderately fast in firefox 3, IE7

I do not support ie6, and I did not test it in Firefox 2.0, Opera 9.5, Chrome 2.0 or other browsers yet.

The worst offender as usual was ie7. It created nasty artifacts using mooTools 1.2 effects to change opacity. It also is very slow anywhere opacity or transition effects are invoked. It also has a slower load perception since it has a different rendering scheme than firefox or safari.

The site was built using PHP on apache (very little php), javascript using JSON style, object dot notation, one global variable with closures. It uses mooTools 1.2 as a framework, and is xhtml compatible.