This project began a couple of years ago, so demonstrates how an old project has transitioned to become mobile first as time has gone on.
The Record's Ticking is an e-commerce website selling hand made clocks and lamps. It's a collaboration between myself and Rob "The Records Ticking" Hume, a local clock maker in my home town.
Technically, early versions of the site looked good. I made use of HTML canvas elements and CSS3 transitions - which were great to experiment with. However, although these looked cool at the time, they weren't necessarily very useful, or even very usable.
First I will go through how the site was previously, and then run through some of the changes made.
The site started out with a homepage created with a HTML5 canvas, displaying different categories of clocks available, which when hovered changed color. This interaction can be seen in one of the early screenshots I took below:
Essentially, two different images were loaded, a black and white one, and coloured version behind. The canvas was used to determine the X and Y coordinates of the mouse, so that when the mouse is over certain regions, the colour image underneath could be shown instead.
This image doesn't do the effect justice, but when you hover over one of the categories, the record spins clockwise until you move the cursor away from the record - where it spins back anti-clockwise to its original position. It's only a simple CSS3 rotate, but it was quite effective:
- A lot of vistors were using mobile devices having been referred from social media apps.
- The above canvas image didn't scale down to mobile very well
- There wasn't much point in CSS3 animations with a hover state on a touch interface.
- There was an additional layer before users actual saw the products for sale.
- It was slow to load all the images on mobile
- The homepage is now a simple list of products with large images, allowing users to view the product straight away.
- It was re-designed with a custom theme from mobile up.
- Faster loadinge techniques for mobile devices - because the product images are large, lazy loading was introduced so that they were only loaded when they were in view. This is especially effective for mobile devices, as only one image is viewable at a time, easing the load and greatly speeding up the mobile browsing experience.
Infinite scroll is also very effective on mobile devices, as the user can quickly thumb through many different products:
- The site was developed with WordPress and Woocommerce (a popular e-commerce solution for WordPress). I developed a custom theme from scratch using the bootstrap framework for the grid layout.
- I developed a plugin to allow users to create a custom clock, whereby they upload their own image. This image is then attached to the product on purchase and can be viewed from the admin dashboard of the site. The code for this can be seen here.
There are still a lot of improvements that can be made to this project, but I hope it demonstrates some portion of how my approach to web development has changed over the last couple of years.
View the site at www.therecordsticking.co.uk