The Official Beatles Website - built with Drupal

Everybody has heard of The Beatles - their music has no doubt become part of the soundtrack of everybody's life and so much of it still sounds as good now as it did then. It's no surprise then that The Beatles have a huge fan base with millions of followers around the world and they expect engagement from the official website and social media channels.

Apple Records and Motherlode Media approached Drupology with a brief to create a new website for the band. The aim is to provide an experience and presentation similar to The Beatles Anthology book, i.e. snippets of text, quotes, never-before-seen imagery and video (ok, so video isn't in books, but you get the idea), and a very personal insight into the band, their music, and ideas at the time. The website also needs to promote new albums, merchandise, and events in a way that engages fans, although revenue conversion isn't a key requirement - it's more about creativity and experience.

Drupology, the technical lead, are a specialist Drupal digital marketing agency based in the UK and service many enterprise-level organisations with high-profile websites at home and around the world. We were delighted to be given the opportunity to work on such an iconic project.

Why Drupal was chosen: 

Drupal was really the only considered platform for this project. Drupal is so flexible, and with an excellent API framework can accommodate almost all conceivable functionalty. Having worked with Drupal on many enterprise projects, we knew it could handle the expectations of such an important client.

Describe the project (goals, requirements and outcome): 

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.

Modules/Themes/Distributions
Why these modules/theme/distribution were chosen: 

A lot of this is already in the write up above, so if you skipped that, give it a read. To summarise: -

  • Views - Almost every page uses Views in some way
  • Entity API, Entity Reference, Entity Reference View Widget - content selection in nodes
  • Media - Asset management library for Images, Video, and Audio
  • Facebook - login, register, timeline and comment publication
  • Comment block - customised comment block to facilitate views for comments
  • Chaos tools - many functions, including preventing direct access to tile nodes
  • Feeds - importing contents and assets from archived database
  • Cookie Control - to deal with the stupid EU compliance rules (sorry, couldn't resist!)
  • CDN - deliver image and file assets via Amazon CloudFront
  • + the usual core + field modules
Organizations involved: 
Project team: 

Motherlode Media
Idea Junction
Apple Records
Alex Pepper

Team members: 
The Beatles Explore Page

Comments

mbawazir’s picture

Awesome website, Why didn't you use any cache module for traffic?

Thanks a lot

Dubs’s picture

Thanks for your comment.

Acutally we did use caching - the default anon cache is used and also there is a memcache layer in place which I mentioned very briefly. I think I could have written so much about this site, but the case study would have gone on and on! I think there are some other optimisations from RackSpace too, but that's not my area of expertese. Alex (mentioned in the Team members) set these parts up but as I say, I'm not quite sure exactly what is in place. The site does perform very well though under heavy load.

mbawazir’s picture

Thanks a lot for your response,

I hope you write an article about your experience of websites regarding the challenges when you build the website.

Good luck,

kevinquillen’s picture

I believe what he meant to say was why isn't aggregation enabled with a CDN for CSS/JS assets? It doesn't even look like aggregation is enabled.

Countach’s picture

Nice website indeed.

I would like to know about the slideshow. Is it just regular views slideshow? If yes, how did You manage to achieve manual scrolling with dragging the right side of slides?

nags338228’s picture

Ur Website look & feel is aswm...

May I know how u r managing the resizing effect when we adjust the browser width...

attiks’s picture

diomede’s picture

Hello,
excellent work, thanks for the detailed write up. I had a look at the site and it's a really tight design you've put together there.
Regards

charger’s picture

Very nice website!
I'm often disappointed to find old fashioned sites for, well, classic artists :)
But this one is really nice. Good job!

mgiosa729’s picture

I particularly love the clean, cohesive, and sleek design/theming component of this website.

Not being much of a designer or themer myself (I personally try to specialize in site-building and development, right now), I'd say that this is one of my favorite Drupal designs I've ever viewed or stumbled across on the web. It helps that I'm a music fan and aspiring musician who loves the Beatles, but this is just a phenomenal example of what Drupal can do, in my opinion.