PHP, MySQL, Flash and HTML mashup usability critique please!

Hi Everyone...

We spent quite a long time developing a blend of PHP, MySQL, Flash and HTML to create an interactive shopping experience for the visitors of http://www.thecaliforniacompany.co.uk/ (based on the same code under the shopping pages - http://www.thecaliforniacompany.co.uk/Shutters/Buy-Shutters/ as well as blinds and doors)...

We were trying to give the visitor a visual application which would give them an idea of what they were buying into - often a complicated shutters shopping process, and I wondered what you all thought of the usability and presentation of the e-commerce pages...

I appreciate your help and look forward to hearing your responses. Thanks!

I actually like the layout. I didn't take much time in testing for bugs or seeing how pages function, but the layout is very nice. It goes along with it being a window/door/shutter company. Looks very professional.

The only thing I have a problem with is that there is at some times a lot of text on the page as a whole, initially the index page.

Great job!

Hey thanks Jabop - that is great to hear you think - and I know what you mean about the text amounts, they're useful but wordy sometimes, the chap who wrote the content is great though so I cannot knock him!

Thanks for your time...

Yeah, a little heavy on the text and sometimes slow to load, but it is very user friendly and looks really nice.

While I like the asthetics (although admittedly it feels slightly cramped), I feel there are issues with performance. It loads slow on my computer.. so using Firefox with firebug / Yslow extension, I checked out the performance stats..

You are loading and using 15 javascripts? That's a lot of scripts.. I would consider reducing this amount (axing scripts that really isn't necessary for the function of the site itself). Also, by placing your javascripts at the bottom of your pages allow the pages to load faster (well, the non javascript elements at least).. Once the browser has to load javascript, nothing else gets to load in the meantime.. so keeping your scripts at the bottom of your page would help get the inital page to load faster. If you have large scripts (I'm seeing one for about 17k), try minifying them to reduce weight. (just google javascript + minify). This also helps reduce javascript weight.

I notice that you load a lot of small black and white shutter images as separate images in the 'type' panel which is in the 'Size & Design' tab. You can lighten the payload by combining all those images into what is refered to as CSS sprites (a single graphic that has groups of images tightly crammed together) and displayed as CSS background instead (which you can isolate using 'a' tags and some css rules). Two example articles include:

http://www.alistapart.com/articles/sprites

http://css-tricks.com/css-sprites-what-they-are-why-theyre-cool-and-how-to-use-them/

But I noticed that you already have 19 css backgrounds (which gets heavy). I would resort stripping down any non-tiling css backgrounds into non background images, then start grouping related images together (for exmaple.. all the black & white shuttertype  images) into single sheets and use those as background images instead. The benefits of this is smaller file sizes (as one larger image is smaller in file size than having all of its images as single individual ones). This saves on bandwidth, can drastically reduce the amount of request / response headers (yours count to 49 on an empty cache). All of this means faster download times (and again, saves you bandwidth as well).

You can get the headers plugin for firefox here:

http://livehttpheaders.mozdev.org/

This is a great tool to see detailed info about the headers flying around.

If you put lines like this at the very top of your PHP pages:

<?php 
session_start();
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start();
?>

and your browser and hosting service provider supports the gzipping of php documents, then the browser will recieve the gzipped version, which it in turn decompresses on its own end.. so your hosting provider's server sends a gzipped version instead (which again reduces file size and makes for lighter bandwidth). I only found two files on php listed in the firebug section 'gzip components'.. and they totalled 28.5k. This is of course non gzipped. Could shave a good amount of k on those.

I you don't use firebug extension for firefox, I highly recommend it:

http://getfirebug.com/

and my favorite addon to this extension is Yslow:

http://developer.yahoo.com/yslow/

This addon is awesome for analysing the heavy trouble spots in webdev. Highly recommend it. I especially recommend reading the rules of optimizations:

http://developer.yahoo.com/performance/index.html#rules

All this stuff can really help your site load and perform faster.

Other than that, I think I really like the site's style and presentation. Aside from feeling slightly cluttered and slower loading times, I like it.

Hope this post has been of use to you.

Cheers,

NRG

P.S Sorry about the long post, and I hope you are not offended by any of it. Just wanted to explain in enough detail.

Fantastic post NRG - and you're right about lots - we used sprites for the column of images on the right hand side for the calls to action - not sure why we didn't sprite the icons to choose the shutters. We have looked into GZipping files and are working on reducing the javascript payload. We use our own CMS - and it is a big beast so needs to be overhauled at some stage - as we are slowing it down with all the scripting - you don't know any expert PHP Mysql people do you!! - We do use firebug - we would be lost without it and funnily enough got Yslow a few weeks ago - and most of our work gets a big fat F unfortunately :-(

Anyway, really useful - will look into these all - so thank you very much!