Web Development & DOF Integration

Rytmisk Center

The Rhythmic Centre in Copenhagen offers a wide range of music courses for musicians of all ages. Classes take place in their beautiful converted apartment building in Vesterbro, where they also host intimate concerts and other musical events.

About the project

The Rhythmic Center needed a better online user experience. This included a better information architecture, responsive design, faster load times and an integration of live data from their internal course management system.

I was assigned to code their new design, and integrate it into WordPress. The responsive layouts are based on an 8-column grid with a few challenging modules. First of all the footer included a row of highlight boxes that caused some visible sub-pixel rendering issues when build with a typical float-based technique. To get around that, I ended up using the Singular grid system for SASS, utilising negative margins to get everything locked in postion. Secondly, the front page included an image-based carousel that needed to always have the same height as a text-based sidebar. Since images and text have the opposite behaviour when it comes to aspect ratio in fluid layouts, these needed to be planned well. Working with the designer, we agreed that if we could set restrictions on the amount of text the client was able to type in the sidebar, we would be able to base the whole module’s height on the natural aspect ratio of the images in the carousel, and then have the sidebar take up whatever height the images allowed. This turned out really well.

After building the responsive layouts, I also needed to integrate data from a booking-system that the school heavily relies on internally called DOF. We retrieve JSON data directly from their API and display them on the site with descriptions, sorting options, availability indicators, price and payment links in a custom design. This allows their customers to find all the details about the courses directly on the course pages without the need for us to keep all the information up to date in two different places.

Results

Soon after launching the new site we saw a 300% increase in traffic. This was caused by the fact that the site now has a much better technical setup for search engines, a better user experience across all devices, and a more focused in-house marketing strategy. The overall feedback has been extremely positive, and I am excited to keep up with the site’s performance going forward.