Web Development: The Music Centre

Screenshot of The Music Centre's website.

The Objective

Bring The Music Centre’s website up to date by adopting modern design principles, and improving mobile accessibility throughout.

The Solution

When I was approached to work on The Music Centre’s website, there were a couple of issues that required my attention.

The primary area of concern was the site’s lack of mobile device support, which presented a barrier to users wishing to purchase items from their phone or tablet. Secondly, the website was starting to look a little long in the tooth, using outdated design patterns and visual cues.

It was my job to change all that, so I went about employing a much leaner design aesthetic, based on bold colours and clean lines. Retrofitting a responsive design philosophy into a fixed-width design was no easy task, so I ended up rewriting vast quantities of the underlying code in order to accommodate this new workflow. Graphics were brought bang up to date, and are all now high-definition retina-ready as standard. Most importantly though, the site can now be used on smaller devices, allowing users to make purchases wherever they may be.

As a nice knock-on effect, the site also benefitted from a speed increase, as through refactoring the CSS, I was able to redulce file size from 474KB down to a very reasonable 45KB (that’s 7328 declarations down to 1355!).

Job Roles

Web Designer
Web Developer
Graphic Designer
Image Editor
User Interaction Designer

Website Features

Built with ExpressionEngine
Retina-ready (high resolution) graphics
Clear content hierarchy
Rich audio and video content
Easy-to-use purchase process
Vast reduction in data served (resulting in increased performance)