by Nate Haug on February 10, 2012 // Short URL

New Redesign of GRAMMY.com Just In Time for 54th Awards

Lullabot powers The Recording Academy website for third year

When the 54th GRAMMYs begin this Sunday evening, millions of people will be glued to their televisions -- and a large number of them will also simultaneously be on their computers and smartphones to catch up with the online-only behind-the-scenes action. This type of web traffic calls for a responsive and robust site to handle it all.

Lullabot recently launched a new design for GRAMMY.com. The new site carries over all the functionality from the previous iteration, while adding all the responsive web design goodness users have come to expect from high-profile sites.

The Recording Academy's Kevin Colligan explains the importance of a responsive design for GRAMMY.com:

This responsive approach isn’t just cool, it’s vitally important because more and more people are surfing the web on smartphones and tablets. Over the past 30 days, about 17% of our visitors were on mobile devices. And we expect that percentage to rise steadily.

The GRAMMYs site provided many challenging scenarios in building a responsive design. The media-heavy nature of GRAMMY.com means that we had to work with not only resizing images, but also restructuring the page to fit appropriate advertising, Facebook comments, inline YouTube videos, and various positions of embedded Ooyala videos. Besides simply responding to the size of the screen, all video content also has to be HTML5 compatible of course, to help mobile devices that don't support Flash, such as iOS devices or the new Chrome for Android browser.

As always, Lullabot has done its due diligence in making sure the site is going to be able to handle this year's traffic with ease. By utilizing Akamai as a CDN, we expect to manage more traffic than ever during this year's show. Last year we were pushing over 2,500 megabits a second through the content delivery network. With wider device compatibility, more generously sized photos (one of the site's most popular feature during the show), and better social integration with Facebook, we expect to exceed that amount of bandwidth this year by keeping more users for longer visits.

For those interested in technical details:

  • The design was done by Lullabot's Jared Ponchot. Most of the theming and CSS work was done in conjunction with Ben Brown and his company XOXCO.
  • We did not use a responsive base theme such as Omega or Responsive Theme to build the site. The complexities and variations in our layouts did not make an existing theme a very good fit.
  • Almost all the videos on the site are powered by Ooyala, a streaming video provider. Lullabot has partnered with Ooyala in the past and we developed the feature-rich Ooyala Module for Drupal.
  • The site is built upon Drupal 6. This year's iteration has been an incremental update to the existing site. We're planning moving to Drupal 7 for next year's show.

For more information about the site architecture, you can listen to Lullabot Podcast 92: Grammy.com. And if you can't wait for Sunday, the GRAMMY Live weekend video stream begins today. See you on the red carpet!

Updated 2/12/2012: Corrected Akamai bandwidth of 53rd awards.

Topics:

Tags:

Comments

Mark Theunissen

Load Storm

Great work! Are you still using Load Storm to do load testing? Any further thoughts on how that is working out?

Reply

nate

LoadStorm -- yep

We're still utilizing LoadStorm for testing, though this year we used the knowledge of last year's traffic patterns (from Google Analytics) to make more realistic test. We lowered our authenticated user count drastically (last year we tested at 20% authenticated, though actual authenticated was < 1%) and significantly increased the number of search queries against Solr.

Reply

Scott Phillips

Responsive design

I'm just starting two projects that require responsive designs. I'd love to hear more about that. Did you use a base theme like Omega or Adaptivetheme? Any lessons-learned that you'd care to share?

Reply