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.