The in-house development team at MPR worked with contractors to build an internal repository to dump their content into from a slew of different content management systems throughout over 10 different publishing channels.
Once the data is in the central repository in a unified format, YourClassical.org is able to aggregate the data on the site.
More “App” than static site.
The content of YourClassical.org is very audio centric. The designers decided to make this a priority early on and came up with the idea of having a persistent audio player on the site to execute the content’s playable items.
The website is built with Ruby on Rails and utilizes web sockets to perform more like web app while still looking like a more traditional online magazine or blog.
The user is able to listen to any playable audio on the site while navigating to other pages and reading other content on the site, which makes for a very rich and engaging experience.
My role in the project.
I was contracted toward the end of this long undertaking to do the front-end development for the site.
There was an internal design team at MPR that decided early on how the site was going to look and passed me some comps as well as branding assets to go on but a lot of the development details for the front-facing site were hashed out during the build process.
What I brought to the table.
The site utilizes all of the same modern tools that have now become standard with responsive design and development, and I decided to use this project as a chance to play with a few extra bells and whistles that ended up boosting productivity and performance.
Fun with vectors.
The site’s design used unique patterns as a device to “brand” the different publishing channels represented in the content, and the patterns are repeated in the design at a variety of sizes in different places and across multiple device sizes.
Instead of generating a bunch of different images for each pattern I decided to use the SVG format using a single image for each pattern.
Because SVG images are lossless I was able to drastically adjust the size of each pattern image to suit the design without any loss in quality. Reducing the amount of images needed to load each page also reduced the page load time significantly.
Images from type.
Similarly, I was able to bundle all of the icons used on the site into a light-weight font file.
This not only helped to reduce page load time, but also helped to speed up site development because I was able to render the icons right from the CSS file without editing the templates. It also gave me the flexibility to change the color of icons programmatically to fit different situations in the design.
All without using any actual images- pretty neat!