NCTA Corporate Site

The Internet & Television Association represents network innovators and content creators that connect, entertain, inform and inspire consumers every day. NCTA’s members have invested $250 billion in private capital to build the world’s most powerful technology platform, reaching 93 percent of American homes and serving 59 million customers. NCTA represents an  industry that supports 2.7 million American jobs and employs more than 300 people in every congressional district.

Drupal 8: Page building with Symfony and Twig

We were early adopters of Drupal 8 and immediately saw the benefits for migrating from D7 to D8. With some brand new Drupal tools in our kit, like Twig & Symfony foundation, creating cleanly written, highly reusable content modelling became a long sought after Drupal reality. Content is powered by the flexibility of paragraphs and made reusable and DRY with the view modes module family.

A peak at the architecture

Some of the powerful features we leveraged for D8 on the NCTA rebuild were:

• A powerful and streamlined content authoring experience using Panels and Display Suite, for rich view modes and grid layouts
• Dynamic Content pages for a modern age of SEO
• Clean separation of concerns in templating with Twig
• Complex layouts, supplied by Views to generate dynamic blocks with contextual filters
• Custom faceted multi-index search
• Fully modern frontend task runner with node and gulp
• Custom theming based on Bootstrap
• Extensive mutli-part Drupal forms integration
• Leveraging the REST API to create dynamic page content

Problem solving in D8: how to make Drupal look good

One of the major challenges with Drupal, especially when working in partnership with an international design agency like DMI, is the need to integrate cutting edge forward thinking design into Drupal naturally boxy approach to layout. Early Drupal was always a content first / design second management framework, and that made integration taken from leading designers a challenge. Furthermore, a requirement was always: “How do we empower content editors to be able to customize content while still respecting the detailed look and feel?”

Editors needed to assemble heterogeneous pages (hero, stats, quotes, programs, events, articles, banners) in different orders and layouts per page, not per bundle template. They needed power over the block editor, however the site design spec had content, infographics and text flowing seamlessly and organically from one region to the next. Some content had to be controlled manually, using specifically targeted box editing, but some of it had to be automatically generated, based on context.

The same content types fed many landings, but each landing had its own rules.

Layout had to be editor-driven, cache-friendly, and reusable, with minimal custom theming.

As mentioned, Drupal’s default theming really encourages 1:1 templates by bundle, but with Panels and dynamic contextual CSS approach applying multiple sub grids, mastheads, and related blocks that changed by taxonomy context, we were able to craft a page experience where each page looked custom grafted and hand written.

High performance Drupal

We invested significant effort in performance tuning. Partnering with Acquia, we were able to optimize each layer of the stack, from code execution to page delivery. We became quite proficient with Drush, and had to go through automated cache clearing, configuration imports, and early automation to keep environments synchronized efficiently. To get ready for such a highly trafficked site, we implemented Varnish caching with custom cache tag invalidation, allowing us to purge specific URLs or content groups when editors updated key entities rather than invalidating the entire site cache. We  fine-tuned Views caching, leveraged BigPipe for progressive rendering, and used Redis for backend caching to minimize database load. Combined with New Relic monitoring and Acquia’s performance tools, this work led to impressive gains in page speed, scalability, and stability under heavy traffic.

Tricky SEO

NCTA presented us with an interesting SEO challenge: single page views with aggregated content that had to act like unique page views.

We architected a solution to get the best of both worlds; allowing for accurate, granular GTM reporting, with unique, page based articles adding their proper weight to our SEO rank, all the while maintaining a seamless one page app experience for those demanding sections.