Headquartered 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:
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.
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.
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.
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.
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
Content 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:
Schedule: 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
Every 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
Mediacurrent
Dante Taylor - design
Chris Hales - development, lead architect
Trent Wyman - theming
Jeff Diecks - project management
Posted on Mon, 24 Jan 2011 15:38:08 +0000 at http://drupal.org/node/1005682
Comments: http://drupal.org/node/1005682#comments
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:
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.
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.
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.
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.
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
Content 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:
Schedule: 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
Every 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
Mediacurrent
Dante Taylor - design
Chris Hales - development, lead architect
Trent Wyman - theming
Jeff Diecks - project management
Posted on Mon, 24 Jan 2011 15:38:08 +0000 at http://drupal.org/node/1005682
Comments: http://drupal.org/node/1005682#comments
