On the site www.cainefashion.co.uk site the Mens category page contains 170 images totalling 1.9mb. The full page including html and javascript totalled 2.2mb.
The recent site redesign gives the customer the benefit of large thumbnails but this in turn increased the full page site by 700K. Especially were the page has so many images. To help improve the performance you can include pagination but the site owner really did not want to have this feature, as the click through rate for next page was very low. Continue reading →
Came across this today from a Venezuelan programmer called Emmanuel Garcia. He has put together javascript library to show pages similiar to a real magazine or newspaper. The page also renders well on a ipad and mobile device.
It called turn.js and the site demos the plugin, with a good reference guide too.
Beadazzle run two jewellery sites online. One site www.beadazzle.co.uk sells official Pandora Jewellery and the www.beadazzle-boutique.co.uk site sells all other non Pandora Jewellery products. Due to Pandora’s strict selling guidelines, they cannot sell any other products apart from Pandora on a single site.
This meant that if they wanted to buy item Pandora and non Pandora products they would need to place two separate transactions. To make it easier to find products I implemented a Search Suggest feature which is licensed from Code Canyon and modified it to work on Digishop. Then wrote a php script to pull product information from Beadazzle Boutique into the Search suggest script.
Customers can now type in the search box and products from both sites will be suggested to them, and click on a non Pandora product will result in a new window opening for beadazzle boutique. This will hopefully show loyal Pandora customers that Beadazzle sell more than just Pandora.
This script can also be implemented in X-Cart which is what I will be implementing in Beadazzle Boutique.
Net tuts+ have published anice article on how to create a CSS3 Mega Menu. As these are all the range at the moment, you would prefer to have one which uses as little Javascript resource as possible.
I came across this jquery module that allows you to style inline scroll bars within your website.
jScrollPane is designed to be flexible but very easy to use. After you have downloaded and included the relevant files in the head of your document all you need to to is call one javascript function to initialise the scrollpane. You can style the resultant scrollbars easily with CSS or choose from the existing themes. There are a number of different examples showcasing different features of jScrollPane and a number of ways for you to get support.
Now I know nothing about websockets and node.js. But this website is impressive. You will need a browser that supports web sockets like Google Chrome or Safari.
The goto this site and see ghostly cursors moving around your page. This is in fact others users on the same page realtime. Very impressive.
I guess you could use it to see how users read a page on your site
Use jquery to ensure all output is of equal height. I always have this issue with e-commerce sites that show thumbnails of products. Either the image is odd, the proudct name wraps onto multiple lines etc.
This tutorials shows how you can resolve this using jquery.
