Bill Skinner Studio...
...has been crafting critically acclaimed jewellery for over thirty years. His recognition as a designer led to collaborations with Vivienne Westwood and Butler & Wilson as well as working with some of the worldâ€™s top brands and even on the odd Royal commission. Drawing inspiration from his own unique history, he launched his own range in 2012.
We first met the team at Bill Skinner as neighbours when we moved in to studio offices just down the street from their own studio and workshop earlier in the year. We soon learned that the family-run jewellers had been through an extensive re-branding over the last eighteen months which had resulted in a sharp and considered new identity that was carefully carried across their advertisements, stationary, shop front and website.
Whilst they were happy with the look and feel of the recently launched site, they felt it was under performing when it came to online sales and the lack of data collection and management tools made it hard to show where the improvements needed to be made for better conversions.
From our initial consultation, it was clear that a brand new approach to the administration tools lay at the heart of solving the problem.
At the same time, we were in the early stages of the first large overhaul of our Ensemble administrative dashboard in eighteen months. We brought the schedule forward by a few months and committed to completing two large projects back to back that would result in coming through with the administrative tools Bill Skinner needed.
The Design Process
Having established that the client was happy with the public facing side of their online store meant that the frontend development would be less of a bold reinvention and more a process to hone this identity to work across a host of different devices.
A Frontend with SASS
The frontend development of the site presented us with the ideal opportunity to start putting our experiments with SASS and COMPASS into action on a team project. In addition to moving to SASS, we also wanted to take a more object-orientated approach to the CSS used in production, which necessitated a rebuild of the frontend from scratch rather than use any of the existing frontend code.
This provided us with the opportunity to optimise the performance of the frontend of the site and provide a better degraded experience for older legacy browsers. Whilst using the HTML 5 doctype, we decided to remove the reliance on HTML 5 semantic structures as they were yet to be supported by many of the browsers in use by their customer base.
Adapting a site to work across mobile and tablet isnâ€™t just about a fluid layout adapting to different screen sizes. Central to the process is getting the page to load as quickly and leanly as possible. Easy gains were made over the existing design by fitting as many common elements as possible into a single sprite - a once tiresome, time consuming and fiddly job that became painless when delegating the task to Compass.
Wherever possible, subtle gradients were replaced with pure-css implementations, leaving those specific graphics to solely act as fallback for older browsers that lacked support for modern css. Also where possible, scripts that would block the rendering of the page were moved to the base or loaded asynchronously.
Gzipped html and fine tuning with cache timestamps of the image assets for the product catalogue, all helped reduce vital overhead and microseconds. The key results were;
Reduction of the number of global template graphics from 20+ to 2 Gzip compression helping reduce certain pages by as much as 90% Minified CSS in production thanks to SASS
The value of face-to-face consultation with the client became immediately apparent. Whilst not always practical on other projects, our close proximity meant that ongoing meetings throughout the process could be easily accommodated in person, rather than via Skype or endless e-mails. This allowed us to talk the client through the idea and cut out any of the confusion, assumption and wrong tones that can sometimes otherwise creep in.
Marc Prior - Developer