iKing’s multimedia gateway

The skinny

A highly interactive multimedia portal for King's College London. The site makes heavy use of animations and transitions to provide a rich and fun experience, using AJAX and infinite-scroll to keep the whole site as immersive as possible, whilst sourcing most its content from various social APIs.

Visit site

View slideshow

The not-so-skinny

Project overview

The project was to revamp the existing incarnation of iKing's - the King's multimedia platform. It required an aesthetic redesign to bring it in line with updated corporate branding guidelines, but was also given a technical makeover, completely rethinking the site functionality to provide a more interactive experience. The old site was also heavily reliant on Flash so needed to be updated to work on a wider range of devices.

Responsibilities

I led the project from within the Marketing department at King's, working independently to complete the aesthetic redesign, front and back-end builds, and collaborating with colleagues within King's on the content strategy and migration.

Technical deets

The site is built on the HTML5 boilerplate, and run through ImageOptim and H5BP Ant Build Script for production. It uses Modernizr feature-detection library to enhance for more capable devices, and to create tailored experiences for devices with touch input. The front-end uses various, predominantly jQuery-based, plugins. Most notable of these is the 'exquisite' Isotope, which provides the masonry-layout with dynamic filtering/sorting and general ooooh factor. Other plugins include jQuery easing, jQuery sticky, jQuery replaceText, Flexslider, mediaelements.js, Mobile boilerplate helper functions and infinite-scroll. The videos use YouTube iframe-embed code, the photo galleries use the Flickr API in combination with the flexslider plugin and the podcasts use the mediaelements.js script, meaning all multimedia can run on HTML5-friendly devices which don't have Flash available. The site uses AJAX to load individual content pages in to the homepage and infinite-scroll to AJAX in isotope items, making it essentially a single-page app. The site makes use of the Google Analytics API (and more specifically, the Google Analytics PHP Interface) to display the number of times each multimedia item has been 'viewed', the API call is made and cached in PHP but the actual page rendering is done with JavaScript because, well, I don't know much PHP. The back-end is built on WordPress, using various plugins, most notably Advanced Custom Fields.

Outcome

The site has only just been launched externally, but internally has been very much considered a success in providing a much more interactive, interesting and visually-appealing way to browse King's multimedia output.

Neil
Carpenter

Design & front-end development