We were sceptical at first when Muse Brand Studio approached us with repairing their client’s website. The main complaints were slow page loads. Upon inspection we found that the site was built using outdated methods such as tables for layout and “slicing” of the design into image shapes. This results in many unnecessary images being downloaded to the visitor’s browser. They also stated that the site as it stood was hard to edit, as finding the appropriate piece of content was complicated. To complicate matters, the site used three colour themes, depending on their sales season – Mother’s Day, Father’s Day and general, and it was difficult to switch between these.
We were faced with a unique challenge – with a limited project budget, and no new design, how do we bring this site into the 21st century, while solving all of the above? Our approach was to re-build the HTML and CSS from scratch, using the current site as our “design” to work off. By removing all images except content images, and re-creating the design using semantic HTML and cutting-edge CSS3 features such as web fonts, icon fonts (with some SVG for ultra-fast loading scalable vector graphics to boot), ensured fast page speed, and crisp rendering across devices, including high-density displays.
Once we were done with this overhaul, the client was ecstatic, and approved additional funds towards building a content management system for managing their catalogues online.
We took a very modular approach with the style sheets, separating the colour themes to individual files. This allowed us to set up a flag in the CMS to switch between the “skins” at a moment’s notice, and with minimal changes, the colour scheme of the entire site is changed.
One particular area of pride is that all graphics, even the SVG, is skinnable by switching one style sheet. Also – by using the proprietary VML, even IE 8 and below have skinnable vector graphics instead of the non-supported SVG.
Client: Muse Brand Studio
Project Date: January 2014