The Official Beatles Website

Technically there were a few key requirements:

• The site must be easy for content editors to manage (of course!)
• New articles should be (optionally) pushed to Facebook
• Existing users must be easily migrated to the new site, along with their previous profile and comments
• The UX must be truly responsive and engaging on all devices
• Content pages must be built from existing collections of text, quote, image, and audio "stories" - details below.
• The site must be able to handle large surges of visitors and traffic spikes - many thousands of concurrent visitors

Content Curation

One of the creative inspirations for this project was The Beatles Anthology book, both in terms of presentation and in terms of telling an engaging story. Obviously The Beatles aren't making music anymore, but there are so many ways to tell the same story and this needed to be reflected in the website's ability to tell those stories. Take for example a US Tour in 1965. Parts of the story could be told from the perspective of the tour itself, or things that happened in 1965, or relate to an album released that year, etc. Any architecture needed to be flexible enough to pull snippets of a story together to tell a bigger story developing a particular theme. The key idea is that the story snippets, images, audio clips, and videos can be rearranged into a different order to tell a different story each time, much like a curator at a museum can rearrange the exhibits to present a different theme.

We created the different content types with fields to accommodate imagery, audio, video, text, and quotes. The snippets of information (which we called tiles) are tagged using taxonomies and given tile widths (based on a 960 grid). The story nodes use entity references and a views widget to allow editors to search, select, and rearrange the tiles in a story. Content editors can also select any related stories and applicable merchandise to promote on the page. The story layout uses jQuery masonry to position and arrange the content based upon the widths assigned to tiles. It's probably easier if you look at the site to see some examples.

The Theme Layer

The Drupal theme itself is a fusion of simple but elegant design and technical wizardry. Along with Motherlode and our friends at Idea Junction, we designed a responsive UX concept based around the masonry plugin which Drupology developed into a Drupal theme. Images and story tiles scale dynamically to fit the browser width and there are a few CSS breakpoints in the design. We weren't happy to simply deliver the same image filename scaled with CSS. Truly responsive images were required, i.e. deliver optimised and bandwidth efficient images where the actual image filename will change (via jQuery) as the browser width and requirements change. We used the picture and breakpoint modules along with some heavyweight template.php customisations to achieve this. Resizing the browser makes the content literally dance around the page and jQuery magic changes the images seamlessly. Open the "Explore" page on the site or any of the articles and resize the browser to see this in action.

User Registration

Another key requirement was to tie the site into Facebook. Users should be able to register using Facebook (copying profile fields from Facebook to Drupal), and comments they post should optionally go onto their own timelines to help promote visibility of the site. Content editors can also optionally promote the new story onto the official Facebook timeline via a Facebook app. This is done with the Facebook modules available on Drupal.org, along with some bespoke modules to make it work a little more effectively.

Also worth mentioning is the integration with the old website's user profiles and comments. Feeds and an SQL parser were used to query the old database and pull in a lot of the existing content, images, audio, video, and comments. A bespoke registration module allows Beatles users from the previous site to migrate their profile over. In realtime we query an archive copy of the old database and associate the user with their comments already migrated over, as well as copying all of their preferences and profile fields.

Hosting Architecture

The site has to handle surges from many thousands of concurrent connections at peak times. The site is hosted on a load-balanced Rackspace cluster with image and file assets delivered via Amazon's Cloudfront CDN (via Drupal's CDN module). Essentially this means images are automatically spawned on demand all over the world so image content can be delivered from local Amazon Cloud copies. This greatly reduces the load on the website when press releases and announcements are made. Anonymous and authenticated caching is also in place to reduce server loads.

And more...

SO much more went into this site and there are many more features and heavy customisations that haven't been mentioned such as the bespoke SoundCloud audio player, Topspin signup, Bespoke Media browser, Wikipedia Scraping, heavy Views Filter and presentation customisation, etc... This case study could go on and on. Suffice to say it would have taken an incredible amount of time without Drupal and the incredible array of contributed modules at every Drupal developer's fingertips.