Charles Bukowski - Dinosauria, we.

Great poem from the prolific author.

There is a great article over on Smashing Magazine about best practices in Social Network design that also includes plenty of examples.  I highly recommend reading through it if you build, or ever plan to build, a Social Networking site.

Lately in my free time I’ve been working on optimizing the portfolio site of Maria Aponte to perform better with load times (and do some general experimenting).  Maria is a Philadelphia Fashion Stylist and has been in the fashion photography industry for nearly 10 years.  The site itself is a single page comprised of mostly image thumbnails and a few chunks of text content that are hidden/shown depending on which navigation item is selected.  The site was originally completed about a year ago.  I developed it fairly quickly and with little thought of performance optimization put into it.

The thumbnails make up the bulk of the page weight at approximately 1.5 - 4.5kb each.  Since this is a portfolio site reducing the image file size (and hence quality) further was not really a welcome option.  YSlow gave the site a grade of “F” with the default settings and barely a “D” with some of the server-side/big site rulesets disabled.  So where can speed improvements be made on this seemingly simple site?

For starters I combined the logo, headers, and miscellaneous graphics all into one image, commonly referred to as a “sprite”.  I do this for all the sites I build but for some reason I didn’t do it here (I’ll be honest here, probably just laziness).  In doing this I was able to save about 4kb in file size but more importantly I cut my HTTP requests from 13 down to 1.  Making less HTTP requests means your site will load faster, so obviously it’s beneficial to make as few as possible at anyone time.  You can view my sprite by clicking here.

Next I merged my three JavaScript files into a single file and then compressed them using the YUI compressor by Yahoo.  This reduced the HTTP requests by 2 and reduced the file size by about 4kb (roughly 8%).  I also moved all JavaScript from the header to the footer in order to allow the entire page to load first and not have script tags block parrallel downloads.

The last step involved merging my 2 style sheets and compressing them which further reduced my HTTP requests by 1 more and reduced the total file size by about 1kb.

If I really wanted to get nuts about speed I could throw all the thumbnails into my sprite and use background-position to display them.  However, this would increase my CSS file size a bit, create a ton of new ID/Class names, and make it more difficult to update the site or incorrporate any kind of CMS.  It would however reduce my HTTP requests by an additional 60 bringing the total requests from 72 down to 12.  Not sure if this speed increase is worth the cost of ease of updating.

All said and done though I shaved about 9kb of wasteful file size, reduced HTTP requests by 15, and got my page to load approximately 1.5 seconds faster (varies by connection obviously) than previously.  After editing some of the rulesets on YSlow to eliminate some of the server-side stuff that just is not available, or needed, on a shared environment the site now gets a perfect performance score of 100.  I’ll accept a perfect score any day.

Rulesets eliminated from my YSlow test were:

• Compress components with gzip
• Configure entity tags (ETags)
• Use cookie-free domains
• Use a Content Delivery Network (CDN)
• Add Expires headers

I ran across this nice feedback module while exploring Daily Challenge; a social networking site that promotes good deeds.  A simple feedback button remains static on the left hand side of the site and opens the above screen in a lightbox when clicked.

The module allows a user to either share an idea, ask a question, report a problem, or give praise all through a simple and intutive form.  The icons in the navigation make it easy to identify the separate actions that can be taken.  When one is selected, the tab is highlighted and the instruction within the comment field changes to reflect the choice.  The menu on the right offers up recent and relevant information related to the selected action.

A very nicely done piece.  Just one of many on this site.

I just saw a commercial for a new show on VH1 entitled New York Goes to Work starring “New York” from the Flavor of Love, I Love New York, and New York Goes to Hollywood series.

Why?

Seriously America…what is wrong here?  Why do you continue to watch shows that are the equivilent of gossip rags?  Do you enjoy being intellectually raped?  This lady “New York” has proven herself to be such trash that even Flavor Flav turned her down; twice.

Yeah you read that last sentence correct.  Flavor Flav.  Dumped her.  Twice.

And that was BEFORE you all made her show your dirty little secret!  So come on America; only you can prevent horrible television.