Technology Used: Drupal 7 HTML 4 & CSS MySQL 5 PHP 5 THE CHALLENGE

Transcription

1 Technology Used: Drupal 7 HTML 4 & CSS MySQL 5 PHP 5 THE CHALLENGE Rebuild 60 major recording artist websites for entertainment industry giant Warner Music Group in six months on Drupal Gardens without doc root access no access to template files, no additional contributed modules and no writing any custom module code. In April 2011 Cisco announced their withdrawal from the CMS segment and left enterprise customers like WMG in search of a better solution. In WMG s case some 80 artist sites had been developed using EOS since 2009 and the label needed a platform that could offer the same rock solid reliability, greater return on investment and an easy path toward rapid deployment and innovation. Working with Acquia to tailor the Drupal Gardens platform to their specific requirements, WMG became one of Acquia s first Enterprise Drupal Gardens customers. We re committed to providing our artists with the best possible service and helping them achieve their potential, both creatively and commercially. A key part of that mission is producing content-rich, social web destinations, which foster the connection between artists and fans. said Paul Sinclair, SVP, Digital Media, Atlantic Records. It used to be that you had to choose between open source and SaaS, said Ryan Garner, VP of Direct-to- Consumer services at Warner Music. If you wanted open source, you had to install, configure, customize, host, scale, secure, enhance, and upgrade everything yourself or pay large sums of money to someone else to do it for you. If you wanted SaaS, you had to risk lock-in or lost investments and costly migrations should you ever want or need to switch partners. With OpenSaaS and Enterprise Drupal Gardens, we have proven these choices false, and it s been liberating.

2 THE SOLUTIONS Development When Blink was engaged to rebuild the Warner sites the immensity of the task was apparent from the start. Access to Drupal s doc root, theme files and functions is the foundation of every custom web application and a staple for all high end custom development shops. How would we supplement Drupal Gardens user-centric features such as the Theme Builder to support a more powerful and faster professional development workflow? Would we be able to implement custom features without being able to add custom module code? At first the large number of sites and tight deadline made these questions seem even more challenging. The answers, Blink developers soon found, were in sticking to good sound development standards and best practice. Blink developers knew they would be building a custom starter site to allow team members to develop each new artist site from a uniformed base. But some artist sites only required blog content with comments, user profile pages and basic analytics tracking while others relied heavily on User Generated Content such as photos, videos and forum posts. Still others had events-centered content with users uploading posts about whether they attended a specific show and advanced analytics. At the most complex end were the sites that required tiered membership for access to restricted content such as video premiers and fan club content. And finally there were the sites that required heavy internationalization homepages, localized content and a system to detect where the user was visiting from. To reduce the risk of back porting unanticipated requirements into individual sites, Blink architected a robust configuration that supported build outs for each artist s different business metrics, feature sets and projected loads. Building a starter theme to accommodate all the artist sites was a similar challenge. Typical Drupal Gardens customers use its Theme Builder controls to modify backgrounds, fonts and positioning. The software makes simple and even advanced CSS editing in Drupal accessible to non-technical users. An advanced tab allows web developers and designers to paste in custom CSS to control elements that are not accessible in Theme Builder s GUI such as hiding breadcrumbs or read more links. But previewing complex CSS changes and structures in any remote environment can be painfully slow and risky. In order to develop efficiently on Drupal Garden s rock solid platform, Blink would have to bring front-end development on Gardens in line with industry best practice. The first step was exporting Garden s style sheets into a version control system so that our developers could work locally. Although we would not be able to deploy any changes to the code, we would be able to version our style sheets for more efficient use by the entire team. Blink built a professional workflow by installing a site script that would check for the presence of a local css file and pull from a repository on github if none were found. Once finished a copy of the style sheet would be pasted on the custom tab and saved on the Gardens site to ready if for final QA testing.

3 Once Blink streamlined its Gardens theming work flow it was on to solving the staging of external JavaScript libraries. The inability to access the doc root and build custom modules made JavaScript implementation even more important. Blink set up an external site (also hosted on Drupal Gardens) to manage common libraries across multiple artist sites. This enabled us to make quick changes to the library just once and have all the sites updated at the same time. The library is used as an FTP client to the Gardens file system. Requests for Java script files are served directly out of Apache. The addition of the Gardens varnish-caching layer gives solid performance across the entire library for all sites. Each site is set to cache external JS files in memory and avoid new HTTP requests on every page load. Javascript files are served by each site from its own memory, and updated when caches clear using the JavaScript Libraries Manager module. Blink tapped Warner s Direct to Consumer (D2C) Java Script library and external libraries for Facebook, Twitter Web Intents, BandsInTown, Twitter Anywhere and Tumblr Share as well as local libraries for custom SoundCloud players. Some scripts underwent significant redevelopment or were completely rewritten by Blink developers: Omniture S Code Advanced user analytics including screen resolution, supported cookies, referring page, time stamping, scrolling. Mailing List Sign Up An HTML form that when submitted by a user generated a JSON object that was sent to an external server which signed the user up for an list. Silverpop advanced and marketing automation. Ad Trafficking injecting external server ads onto the page. Cellstream custom animation: Join Toaster custom animation:

4 Global and Global Header (custom) - Rearrangement of DOM elements, addition of classes Facebook and Twitter script loading. SoundCloud (custom) custom player with configured color and playlist-id values. Merch Block with Hovercard animation: Twitter Search Widget animation: Project Management At the height of the project Blink supported two site launches per day. It was like the web-based equivalent to Apollo 13. No one wanted to hear the words Acquia, we have a problem. Everyone worked hard to insure a smooth launch, said Blink CEO Nancy Stango. In order to meet required launch dates Blink expanded its developer capacity and focused special attention on Project Management. Daily stand up meetings were supported by issue tracking and reporting in Jira. Blink had two full time Project Managers for technical issue tracking and schedule/resource assignments, to work closely with Acquia and WMG staff to keep up with dependencies.

5 Developing without access to templates and a single line of custom code on a large project is like programming with one hand and two fingers. But the advantages of Acquia s SaaS platform were huge especially for the client. In the end we were truly amazed and proud of what we were able to achieve in so little time on the Drupal Gardens platform, said Leonid Makarov, Blink Reaction Technical Manager/Project Lead. The constant cross company project management for adjusting timelines, supporting launch issues, and sharing resources across teams when needed proved to be a great asset to the quality deliveries, said Blink Project Manager Gary Truax. We pulled out all the stops to deliver on time, said Stango. A late delivery was never an acceptable position. Everyone pulled together to make it happen. In the end we finished two days early. Technology Breakdown Building from a robust starter site was a critical element in the success of the project. It enabled Blink developers to build momentum with each consecutive site throughout the process. Extensive use of GitHub and Google Docs helped keep focus on the work instead of overhead. Scripting to allow Garden s sites to access local and remote version-controlled style sheets was essential to supplementing Garden s Theme Builder feature. The team made heavy use of JavaScript to make up for not being able to use additional modules and built a global library server for the project to facilitate usage and management of more than 20 custom and third party files. QA teams from WMG, Acquia and Blink helped insure the highest quality of work possible. Daily standup calls insured daily progress against a backlog for each site. Finally a Key Learning activity at the end of the project helped uncover strengths and opportunities for increased efficiencies. OpenSaaS Enterprise Drupal Gardens is a game changer. Global organizations are under pressure to find a flexible and low cost means to build incredible web experiences, said Tom Erickson, chief executive officer at Acquia. Warner Music Group is a great example of how we are helping enterprises dramatically reduce operational hurdles and costs, while offering them unparalleled freedom to create websites without boundaries, based on open source Drupal.

6 Working closely with the Acquia and WMG teams, nearly 70 different types of pages, features, processes, subsystems and configuration sets were built into the starter kit to support 7 different levels of sites from small to large internationalized sites. Each site was then heavily customized with CSS and JavaScript. These included: Home Page Blog/News Blog detail Video Video detail Photos Photo detail Music Album Detail Audio Track detail Tour upcoming Tour archive Tour upcoming detail Tour archive detail About Us Community landing Discussion Discussion detail Fans Chat page Google search int l homepages view profile edit profile edit account Extras page Fan club landing Fan club upsell 404 page contact us Facebook Like buttons for content items Tweet buttons for content items Merch modules Global navigation international homepage selector tour date i m attending function feature carousel twitter feed display Mobile versions of pages feedback tab Official page header footer sitemap other bands on label dropdown menu homepage campaign lightbox soundcloud audio player in detail pages artist activity feed 5-star rating system twitter hashtag search badging content preview sorting join artist.com toaster localization Register to stream (video/audio) Sign up SIgn In comments (on all content and profile pages) Facebook login Fan club restrictions create a new blog Mobile stream upload photo blog post UGC Upload photo/video Silverpop integration Omniture list sign up ad serving page-level meta data RSS feeds for each content type default profile questions

7 The Sites Between December and April Blink delivered 58 sites to support the brands Warner artists and fans alike had come to expect and love. Look for upcoming posts about particular sites and how they were implemented

8 Catch more of the story at The Power of OpenSaaS at Warner Music Group Home Page Blog/News Blog detail Video Video detail Photos Photo detail Music Album Detail Audio Track detail Tour upcoming Tour archive Tour upcoming detail Tour archive detail About Us Community landing Discussion Discussion detail Fans Chat page Google search int l homepages view profile edit profile edit account Extras page Fan club landing Fan club upsell 404 page contact us Facebook Like buttons for content items Tweet buttons for content items Merch modules Global navigation international homepage selector