Who is RCat Records?
R-Cat Records is an independent record label based in Edmonton, Alberta, Canada. The label was established in October 2005 and released its first album in January 2006.
In August 2008, R-Cat Records secured its first major motion picture license for Ridley Scott’s ‘Body of Lies’ starring Leonardo DiCaprio and Russell Crowe and since then have become a force to be reckoned with in the independent label world.
What was the brief?
We were asked to redesign the existing R-Cat Records website after migrating it to a new CMS platform (WordPress). It was time for a fresh new look to the RCat site!
An important part of our brief was to create an integrated music player for album sample playing on demand. The site had to be fully responsive with the ability to scale in future updates and page loading time needed to be fast regardless of where in the world the user was accessing the site from.
How did we do it?
After discussions with the client we decided to focus the website on two aspects of its core functions – to showcase the label’s album content and to inform prospective artists about what they could expect from R-Cat Records.
We also built a catalogue page with quick view functionality and designed a music player that would work cross browser on any device (see below).
The end result
The Home (boy) Page
The home page features who we have been commonly referring to as “the funky guy”. On page load the R-Cat logo drops down in a CSS keyframe animation giving a cool bounce effect.
The arrow that slides in is a link to scroll down to the first header section using the Velocity.js library.
The Music Catalogue
The catalogue page shows a grid view of albums that the label has produced with links to the album page for each album
Each album has buy links so that users can quickly buy the album if they want to.
The Album Page
The album page features a music player to spin a thirty second sample of the album’s tracks. We’re going to further adapt this for every track on each album when we get the samples from R-Cat.
Each page has buy buttons in the left sidebar to allow quick linking to where the album can be bought online.
The Smartphone Player
We wanted to mimic the look and feel of an in-app music player so made the player full screen for all smartphone resolution devices.
Further development of this will center around touch screen scrolling through the albums without the need to refresh the page.
The Nerdy Stuff
Stats
We employed various techniques when building the R-Cat Records website. The aim of the game was to make it as user friendly as possible, throw in a few eye candy moments and keep it as blistering fast for page loading times as possible. Here is what we did….
Scripts
We wrote some custom functions into the WordPress functions file to remove a lot of the bloat that comes with a default WordPress installation. We also stripped out jQuery and only loaded it on pages that absolutely needed it (for example the music player page).
We also replaced jQuery with the GSAP library for the scrolling animation that can be activated on the home page as it’s an incredibly fast and impressive animation library.
Animations
Every animation except the home page scroll is a pure CSS3 solution. To achieve this we made liberal use of the checkbox hack combined with CSS3 transitions.
Optimisation
As we were going to be, and are, hosting the new R-Cat Records website we wrote some custom Nginx rules for R-Cat’s server level optimisation before deploying it on to our servers. This was a config to minimise all css/javascript and inline critical portions to the page on the fly.
We also set the configuration to replace the images with the WebP standard if the visitor’s browser supported it. Finally we wrote some custom page rules for Cloudflare and cached it worldwide on their CDN network.
