gmc homepageHeadquartered in Atlanta, the Gospel Music Channel (gmc) is a channel that features uplifting music and entertainment, including specials, movies and series that the whole family can enjoy. gmc is the only TV network with every program certified as family safe by the Parents Television Council. DIRECTV, Verizon FiOS, and local cable systems bring gmc into roughly 50 million homes across the country. The brand boasts such popular shows as Dr. Quinn Medicine Woman, Highway to Heaven, Promised Land, Sister Sister, Early Edition and Amen. The website receives about 750,000 monthly page views from 250,000 unique visitors.

The channel recently launched a full site redesign in conjunction with an upgrade from Drupal 5 to Drupal 6. The project team from Mediacurrent would like to share some of what they've learned from the design and build of the site with the Drupal community.

Goals

The old gmc site was in need of an aesthetic and architecture facelift. In 2009, the company added uplifting movies and series to its program offerings to better service viewers looking for faith and family-friendly entertainment. The old site had a limited social media strategy and the design’s navigation prevented it from optimally interacting and engaging visitors. During the discovery and strategic planning phases of the project there were several objectives that were established. The goals included:

  1. Upgrading the current Drupal 5 site to Drupal 6: The idea of jumping to Drupal 7 was discussed, but was determined to be too risky given many of the unknowns related to key contributed modules.
  2. Branding makeover: The gmc executive team wanted a more modern, contemporary website redesign that reinforced the brand’s expansion to beyond music. gmc's content has been expanding into originally produced movies and plays.
  3. Create a more immersive customer experience: The new site needed to integrate more social media and networking calls to action in order to bump registered users on the site. Thus, usability was at top of mind when planning functionality for the new site.
  4. Effectively integrating third-party tools: There were a number of applications being piecemealed on the old site that needed to be unified with Drupal-based solutions.
  5. Content import: There were large amounts of new assets (3100+ files, 2700+ nodes, and 2200+ taxonomy terms) that needed to be migrated over. During the rebuild, leveraging the core taxonomy system to build rich associations for relevant content was a major desire.

Graphic Design

Upending preconceived notions about gmc's previous brand was at top of mind during the site redesign. We collaborated extensively with gmc's internal team to make sure new features would allow gmc's content shift to continue without the need for constant feature maintenance updates. This was definitely a challenge. Careful planning was needed to create extremely flexible features that could meet the expected growth and ongoing changes, while still being easily managed. To deliver the new site, Mediacurrent utilized a team-based approach, dividing tasks between back-end engineering and front-end theming.

The Graphic Design aspects took into account the following:

Strategy: The design strategy was predicated around three words - uplifting, inspirational, and simplicity. Mediacurrent helped gmc organize their vision into a comprehensive blend of gmc's branded warm reds with touches of complementary cool grays, blues, purples and aqua blues. Transparent circles with thin white strokes overplayed on top of converging spiral circular gradients were used to achieve the celestial-inspirational feel. The overall design is built around "gmc red", which was used for link and background navigation colors. Cool grays were used to pull the entire design together and create subtle areas of interest and focus. The gmc team did not want anything too loud or "bullish" in nature.

Menu Design: We had to create a menu system that would visually divide each section of the site while still allowing additional categories to be added underneath corresponding sections. This challenge was met by using the classic tabbed menu system (Nice Menus Module) coupled with waterfall pull down menu interactivity. Of particular note is that when a user has selected a section the tab stays active throughout all section subpages. The active waterfall menu is visually offset or totally contrasted from non-active waterfall navigation. This was achieved with the help of extra classes inserted by jQuery.

Network Bar: gmc wanted to give more prominence to their advertising offerings, social media callouts, and company profile. One other major point of emphasis was the "Get The Channel" feature. We suggested creating a network bar at the very top of the page to pull this important content away from the main content areas in the body and footer. The concept was to streamline the user’s access to this major feature.

Homepage Rotator: The team at gmc wanted to update the user interface and experience to accommodate more content above the fold without disrupting the visual flow of the surrounding content. We designed a rotator that would allow for a larger lead photo, longer titles and more space for story lead text. The rotator allows for a user to pause and move between slides easily.

Challenges

gmc scheduleContent import can represent a risk to a Drupal project plan, even when the content is being imported from a previous Drupal version. One method to mitigate the risk of a complex content import is to analyze the input format being used for published content and be on alert for a disproportionate volume of content published to a general content type such as "page." If the site has an overwhelming amount of content published as a "page" with "PHP" set as the input format, it could be a warning sign for struggles ahead.

gmc editors wanted to be able to build dynamic content associations between entertainers and associated content, but in a way to make the references optional. This was accomplished by augmenting the core taxonomy module with a custom module that creates node associations based on matching terms between content types, such as an actor to a film. This is unique compared to a traditional node reference setup, as actor nodes do not have to exist and can be added later for the association to be automatically created when the appropriately tagged node becomes available.

Creating a custom weekly programming schedule import feature also required extra effort. The available data lacked the necessary structure in order to run a normal import process. Instead, a custom module had to be created that would parse the weekly schedule file and create the appropriate nodes and content associations.

Modules

The back-end management of the gmc site was facilitated through a series of custom publishing solutions and third-party tools, none of which played particularly well together. It was obvious that there was a need to devise a better way to leverage all the moving parts. Enter version 6 of Drupal. The gmc site uses over 50 contributed modules, including staples like CCK and Views.

Here is a breakdown of the modules used:

Module List

admin, authcache, backup_migrate, better_formats, boost, captcha, CCK, content_copy, content_taxonomy, custom_breadcrumbs, date_api, dblog, fb_social, filefield_paths, filefield_sources, forum, globalredirect, googleanalytics, hierarchical_select, hs_content_taxonomy, image_captcha, image_resize_filter, imageapi, imagecache, imagefield, imagefield_assist, imagefield_tokens, imce, imce_wysiwyg, jcarousel, jquery_ui, lightbox2, menu_attributes, menutrails, modr8, nice_menus, nodequeue, noderef_image_helper, nodereference, nodewords, page_title, pathauto, scheduler, search404, seochecklist, share, sharethis, site_map, statistics, taxonomy, taxonomy_manager, views, views_bulk_operations, views_customfield, views_or, views_slideshow, viewscarousel, webform, wysiwyg

Custom Modules

We also needed to extend or customize a number of modules to meet the requirements we were after. Those modules included:

gmc schedule importSchedule: gmc wanted to automate their scheduling process and improve the online schedules usability as part of the redesign. The schedule spreadsheets are done by hand with no unique keys for programs This was cumbersome, but we came up with a solution to efficiently manage the process of importing a CSV file to populate the program schedule as well as creating episodes for their shows and the references between them.

Galleria + Node Reference Image Helper: This extended the Galleria module so that we could use the noderef_image_helper module which greatly improves its flexibility and administrative usability.

Relevant Content + Views: The Relevant Content module was extended to use Views which provides all the advantages of a custom view with relevant_content providing the term arguments.

Unicorn Video: gmc is using Unicorn Media as their video CDN, so we created a custom module to work with their API for the sites video features.

Conditional Node Terms: One of the workflow obstacles we encountered was the client’s desire to dynamically link content to terms if a node with matching criteria was found, and for it to act as a normal term if not. A combination of custom term, theming and argument handling functions are combined into a module for this functionality.

During the development of this site, Mediacurrent gained approval from the client to contribute code back to the Drupal community. Team member Chris Hales submitted patches for the Galleria, Relevant Content and Nodewords modules.

Drupal Theming

To reiterate, there was a heavy emphasis to create a highly professional re-brand of the site, while allowing visitors to dive into loads of data without clutter or confusion. In short, theming a custom site like gmc always has obstacles that require creative problem-solving. Here are some we wanted to highlight:

Gradients and Rounded Corners: The detailed design elements required many types of nested content areas with rounded corners and background gradients. However, the design had to appear consistent regardless of browser type and Internet Explorer (IE) does not recognize the border radius style in CSS. In order to theme the nested rounded corners in a way that would appear consistent in IE, background images and additional div classes were added to customize the node output.

Drupal's Views Pager: The design required particular classes needed for custom theming that were not available from the pager's output from Drupal core. A theme override function was created and added to template.php that reformats Drupal's pager output to add the needed classes and remove un-required elements for custom theming.

Video Playlist: The design for the video playlist required that all items in the playlist view display horizontally. The video module outputs the video feed items into a table and so the items could easily be aligned by floating the table rows left. However IE7 does not recognize floats when applied to table rows. In order to accommodate the CSS limitation with IE7, an alternate display was agreed upon with the client to save time in which a horizontal v. vertical alignment is used for IE7 only.

Drupal's Views Filters and Custom Alpha Pager: The functional requirements for the view pages needed an Alpha Pager which is not available in Drupal 6 views by default. Also, the design for the search fields and submit buttons required custom theming beyond what is readily available from default Drupal output. Custom functionality using PHP, View Arguments, and custom div classes needed for theming, were created and added into the header for each view that needed an Alpha Pager. To theme Drupal's views search filters to meet the design requirements, CSS is used to position fields and buttons accordingly while also replacing default browser submit buttons with a custom graphic that is consistent in all browsers.

Drop Down Menu Theming: The design required different visual treatment for non-active drop down menus v. active drop down menus. Non-active drop down states are required to have pink and purple backgrounds while the active dropdown would have a white background. Neither Drupal nor the Nice Menus module output unique classes to identify active v. non-active parent items which are needed to target with CSS for independent theming. Nice Menus module had to be patched to add the first, last, odd and even classes needed for CSS targeting to apply some of the custom theming. In order to add the needed "active" and "non-active" classes to menu's child elements, custom jQuery functionality was created to apply the needed classes dynamically.

Final Thoughts

gmc recommended showsEvery Drupal project should be viewed as a learning experience. Overall, we were able to accomplish key goals and build a powerful, versatile Drupal website that took into account the way gmc was rebranding themselves. The collaborative effort between Mediacurrent and gmc has resulted in a more sophisticated, flexible and professional site.

For project management and ticket tracking, Mediacurrent uses Development Seed’s convenient Drupal distribution, Open Atrium, along with several custom additions including time tracking features. We have been through several PM tools and have been extremely satisfied with Open Atrium. The feature set is akin to what you would find in a more expensive proprietary system, but the flexible Drupal-based system allows us the opportunity to make continued improvements and refinements to the system and how it supports our processes. For example, during the course of this project we customized some of the casetracker-related views to better organize our work around milestones in the project plan.

As with any sizable Drupal implementation, we cannot underscore enough the importance of well-defined site architecture documentation during the planning phase. While most Drupal shops now employ some form of an Agile based methodology, having a roadmap is imperative. In our functional specification document, we incorporated gmc requirements including planned content types, taxonomy, roles, permissions and modules.

Last but not least, the redesign was challenging, yet fun to build. The client’s editors have enjoyed the improved administration features while working with their content. Drupal’s flexibility will allow for continuous and ongoing improvements.

Technology Environment

  • Stack: RHEL 5.5 LAMP (Linux, Apache, MySQL, PHP)
  • Hosting: Rackspace
  • CDN: Unicorn Media
  • jQuery: Replaced all Flash widgets in jQuery

About Mediacurrent

Mediacurrent is an Atlanta, GA, based interactive firm that has developed a specialization and consulting vertical within the free, open-source content management system called Drupal. For more information regarding Mediacurrent’s services and portfolio please visit http://www.mediacurrent.com.

Project Team

Comments

Anthony Pero’s picture

This was very informative. And thank you for contributing code back.

Anthony Pero
Project Lead
Virtuosic Media
http://www.virtuosic.me/

Anthony Pero’s picture

One thing I did notice upon browsing the site was that the video player you included is not playing their videos in the correct aspect ratio. This could be on their end, encoding-wise, of course. 16:9 videos are being squeezed to 4:3 in the player.

Anthony Pero
Project Lead
Virtuosic Media
http://www.virtuosic.me/

chales’s picture

This is post launch issue with newer assets. We'll be working with gmc to correct their video CDN templates.


DrupalVoodoo
bertomart’s picture

I think this site is really well done and a good representation of how flexible drupal is. From what I gather, you hardly had to build any custom module from scratch...you just modified some contribs to fit your needs. For the CDN, did you end up building a special cck field and attaching it to your content types? For the browse movies section, did you use some kind of views attachment (with exposed views) to get the gray search area on top (can you explain)? How do you manage advertising (modules used)?

Also for the schedule page...it looks like views attachment to me again. Is that what you guys used?

This site is very functional and clean. I think the only thing you could work on is the font/text. In some places its a little hard to read, while other places its just right (inherited stylesheets problem? - I'm on chrome).

Good job.

chales’s picture

You are correct, there wasn't a lot of full blown custom modules needed. The majority of the custom development code is in views argument and taxonomy handlers as well as a few function to render views where we needed them so as to not overload the site with too many blocks or needing to use something such as panels for the custom layouts.

The "Browse" views are actually even more simplistic than that. The view has a block of html in the header for the alpha links and an argument added for node title that is setup with the "Glossary mode" options.

The "More Popular Shows" block on the home page is a good example of using an attachment view however.


DrupalVoodoo
willhowlett’s picture

Very nice site. Impressed with the video functionality. One thing I'd suggest from a theming standpoint would be to add something like:

.playlist td img:hover {
cursor:pointer;
}

to make it clear that the video thumbnails are links to start the video playing. I didn't realise they were at first and kept clicking at random until I realised.

davethedruper’s picture

I was wondering what module did you use to list the other links in your website under it when you search for it?

trentwyman’s picture

Thanks for the suggestion.
I believe that will add to a better user experience.

arpas’s picture

Is this site build drupal way?

kclarkson’s picture

Dante,

You are a rockstar sir. I like the smooth gradient in the menu bar.

Keep doing your thing sir.
Kaleem

Kaleem S. Clarkson
www.kaleemclarkson.com

Marsela Kuci’s picture

I was wondering what module was used in this page??

lca7’s picture

admin, authcache, backup_migrate, better_formats, boost, captcha, CCK, content_copy, content_taxonomy, custom_breadcrumbs, date_api, dblog, fb_social, filefield_paths, filefield_sources, forum, globalredirect, googleanalytics, hierarchical_select, hs_content_taxonomy, image_captcha, image_resize_filter, imageapi, imagecache, imagefield, imagefield_assist, imagefield_tokens, imce, imce_wysiwyg, jcarousel, jquery_ui, lightbox2, menu_attributes, menutrails, modr8, nice_menus, nodequeue, noderef_image_helper, nodereference, nodewords, page_title, pathauto, scheduler, search404, seochecklist, share, sharethis, site_map, statistics, taxonomy, taxonomy_manager, views, views_bulk_operations, views_customfield, views_or, views_slideshow, viewscarousel, webform, wysiwyg

travist’s picture

This is a really great site. I commend http://mediacurrent.com for doing such a great job.

I noticed your thoughts on the horizontal playlist, and also noticed that the media player you are using is Flash based. Have you guys considered using MediaFront module which features a GPL media player that handles horizontal playlists and also uses HTML5 for its media player implementation, with an automatic Flash fallback. Just a thought if you guys someday wish to upgrade the player to not be 100% reliant on the Flash plugin.

Let me know if that is the case.

Thanks,

Travis Tidwell

selase’s picture

Look! you guys have done an amazing work. And thank you for giving back to the community.
I tried browsing the gallery page today(http://www.watchgmctv.com/gallery/early-edition) under the 'song for haiti' category and i kept receiving this message when i clicked the photos. Message: "Jcarousel: No width/height set for items. This will cause an infinite loop. Aborting..."

Maybe you should check it but hey great site.

efarseer’s picture

very good site, thanks for sharing

slippast’s picture

I'm curious about your Schedule module. I work for a TV station and I'm writing a system to import the TV schedule data as well, I'm curious to see what your original schedule data looks like and how the module processes it; how it's scheduled, how often it updates, etc. Are you importing schedule data as nodes?

Also, I notice some taxonomy associated with the series and episodes, as well as node relations, was that stuff difficult to deal with. Also, I notice you you have actor bios, are those manually built and related to the series?

Anyway, thanks for the info in this post, I always get great ideas reading about other projects. This one is especially pertinent to what I'm doing.

chales’s picture

@slippast, sorry for the delayed response. No one caught this one until just now.

The scheduling piece was actually the most problematic part of the build. The data is coming in from a department spreadsheet that is done by hand each week so there is a ton of room for human error in the form of typos and character set issues between applications and platforms as the doc is shared.

The setup works as follows -
• The Spreadsheet is converted to a utf8 CSV file and run through a text editor to detect character set conversion issues and anything obvious.
• The CSV is imported and processed with some error checks.
• The module tries to match up Show Titles to existing shows and if it doesn't find a title match it creates a new Show node.
• Likewise it will lookup episode titles as well. If it can find a match it creates a new episode node.
• The time slots are actually their own nodes as well with references to Shows and Episode nodes.
• If errors are detected those are logged and a list of newly generated content is listed so that if there were some title match errors those can be caught.


DrupalVoodoo