The National New Play Network (Washington, D.C., USA) is an alliance of nonprofit theaters that champions the development, production and continued life of new plays. We strive to pioneer, implement and disseminate ideas and programs that revolutionize the way theaters collaborate to support new plays and playwrights. The previous site had been built using standalone PHP files and a custom CMS. We built a brand-new Drupal 7 site using views, a custom map, and custom templates for various areas of the site. It features a blog, social media integration, a Twitter feed with a custom scroll bar, and an events calendar, among other things.

Why Drupal was chosen: 

The National New Play Network had been using a homegrown CMS with limited functionality for many years, but NNPN's needs reached a boiling point at which time a more robust CMS was necessary. The main reason for Drupal was for its content types and views, which are used extensively on this site. The project requirements called for many different sorts of pages and content items.

Describe the project (goals, requirements and outcome): 

NNPN had a site consisting of standalone PHP files, but the organization had grown and was in need of a more robust yet easy to use CMS. The goal was to streamline web publishing workflows while revamping the site with a completely new design.

Project Goals:

  • Client needs to be able to edit as much of the site on their own as possible.
  • Site will auto-archive programs, events, and playwrights for posterity.
  • Site structure needs to be flexible enough to allow for long-term growth and change, as well as adding features on short notice, for example for upcoming events.
  • Since this site is for a theatre organization, it would benefit greatly from using photos. The client wants these to be auto-formatted so they can just upload a photo, and it will get cropped to the right proportions / size automatically without needing Photoshop.
  • Theatre companies will get their own page on the site.
  • Playwrights will also get their own page.
  • 10 different Programs, each with their own customized page.
  • A map of member theatres.
  • Blog.
  • Events calendar and schedule.
  • Graphic slideshow headers throughout the site, which the client can easily change.

These content types needed to reference each other in many cases. For example, one theatre production might be associated with multiple playwrights, or with multiple theatres.

Outcome:

All of the above goals were achieved. Drupal 7 - in particular its granular content types and fields, Views, and Taxonomy - made all of this a breeze, and allowed us to easily customize page configurations as we gathered more feedback from the client.

By leveraging Drupal 7's native fields and content types, we were able to meet these requirements in a flexible way, so that we could build on that framework later by adding more fields or views as needed. We work with Joomla (2.5 and 3) as well as WordPress, have used Concrete5, and have read about the charms of Django, but out of all these we have found Drupal offers the most robust and flexible feature set (a.k.a. framework) while also shipping with an easy to use administrative interface. It was very important to our client that they be able to edit almost everything themselves, and that the site could grow with their needs. Drupal has served them well in this regard.

Project development ran from October 2011-July 2012, with an extensive initial conceptual design process that accounted for all of the client's existing content while mapping out a new Drupal site structure. Actual Drupal development lasted from February-May 2012 , with training, final content migration, and final design and functionality adjustments taking place during June and July 2012.

Design

The Home Page

The home page had to give a high-impact, mostly visual impression of what NNPN is about, while unobtrusively giving access to internal pages. It needed to simultaneously give a high-level overview, and provide up-to-date information about the latest happenings. We balanced these using Views Slideshow and several Views blocks for 'Member and Alumni news', 'Network News', 'Latest Blog Posts', and "Latest Newsletters'.

Navigation

We strove to keep the navigation simple and to the point, with an emphasis on the essential information first, and more detailed information in sub-menus. On internal pages we used the Menu Block module to show relevant menu links on the side of the page. For archived items we used tabs (using Quick Tabs), showing current/future information first, and archived information second. We also used qTip (using the qTip module) to give users hints about what a given link will lead to, in a stylish way.

Internal Pages

The previous site had a mostly two-level system of pages; the home page and interior pages, with almost no third-level pages. This presented a problem, because it forced interior pages to become very long and text-heavy. The new design focused on a more visual layout, presenting text only when relevant, and opting for more, shorter pages rather than fewer, longer pages. We used Views and QuickTabs to keep pages from getting too long, and to let users decide when they want to read more about a certain item.

Member Map

One of the earliest design ideas was to build a member map generated from member theatre listings. Due to the highly customized nature of the map graphic (a pixelated map of the United States), we decided against a Google Maps / OpenLayers approach, and instead wrote a custom template file that plots listings using X and Y coordinates, which are set using X and Y integer fields using Drupal's content types and fields.

Blog

The blog needed to be simple yet elegant, and integrated into the overall design. We built this using Views and a custom content type, which enabled us to add commenting, an RSS feed, tagging, and more.

Twitter Feed

Using the Twitter module we set up a basic Twitter feed, designed to blend in with the rest of the site. We designed a custom scrollbar that matches the reset of the site's style. The Twitter module enabled us to style the feed in full detail.

Launch

Using the Pathauto and Redirect modules, we set up redirects from the old site's various URLs to the new internal URLs, to prevent "404" errors. Prior to launch the client had already been actively involved in editing content using Drupal, so after launch they were already quite familiar with the editing workflow.

Post-launch

Since launch the site has continued to grow, adding programs, adding new features, and improving the editing workflow. Thanks to the framework we put in place, these changes continue to be fairly straightforward, with no need to 'reinvent the wheel' along the way. The client occasionally needs to add new fields to content types, change the display of certain fields in views, etc. All this is now much more flexible, whereas before it would all have to be custom-coded. For example, some of the programs NNPN runs were quite young when the site was launched, but since then they have had some 'graduates' of those programs, so they needed a way to archive those past winners/graduates. We had already set up the structure for this using a combination of content types, Views, and Quick Tabs, so all that was needed was to activate the view and tab. The content type itself offers a boolean field allowing the client to indicate whether a winner is a current or past winner.

Organizations involved: 
Modules/Themes/Distributions
Why these modules/theme/distribution were chosen: 

We needed to enable an events calendar as well as many custom views of content types. Views XML was used to build a custom XML object for a map of theatres. Nodequeue was used to make administration easier.

Project team: 

Casper Voogt and Aniket Kharat at Plethora Design.

Map of member theatres
Example of a view using mainly images
View with a changing header image
Event listing
A typical detail page
Header image and basic page