Skip to main content

Upgraded Design and Architecture for Educational Literacy Website

With a longstanding partnership with the development and maintenance of several websites, WETA wanted to update and improve AdLit, an entity that seeks to nurture and advocate for literacy in middle and high school-age kids.


Front-end Development
Back-end Development
Site Architecture
Planning & Strategy

Drupal 9

Project Brief

AdLit was in need of a design and development overhaul to appeal to their audience and be easier to maintain. As the first site within the WETA family to be built in Drupal 8 (soon to be Drupal 9), there was a desire to leverage this site build into future upgrades of other WETA entities in a variety of ways. In order to accomplish this, it was collaboratively decided that the site should:

  1. Be built with a clean and well-organized theme that can extend to other sister websites in the future
  2. Have features and capabilities that could carry from site to site without requiring a large amount of custom effort, such as a book finder tool and full site translation
  3. Standardize on a set of core content types and building blocks that allow for migration of content while supporting an improved administrative experience
old AdLit homepage with gradient dotted background and narrow fixed width content
new AdLit homepage with full width navigation and image slider

What We Did

We built the new AdLit site with due attention not only to its own requirements, but to the needs of the entire suite of WETA sites. This informed the development of the site architecture and features in a way that makes it a good base for future site upgrades.

For example, the WETA site Colorín Colorado is bilingual, while AdLit is for an English-speaking audience. Since our framework  takes on this multilingual baseline, it will be easy for AdLit to be translated into other languages later if need be. We also developed a theme infrastructure that would allow for a basic visual framework to be shared across sister websites while allowing each individual site to showcase its own branding and design.


Design a fresh new theme that can minimize future development effort on sister websites


Create a parent/child theme structure to separate site layout and brand elements

For AdLit, we took the opportunity to look at ways we could minimize the cost for future Drupal upgrades for the WETA suite. We decided to separate the site grid and layout into a parent theme that could be reused on other entities, and rely on a child theme to implement the AdLit branding. This means that when the next site is ready for an upgrade, we will already have a base theme in place that minimizes the amount of front-end development work we need to do.

Leverage site elements for future use on sister websites with similar content


Build a standard set of content types and building blocks

Along with the parent and child theme structure, content types and site features were created while looking at other sister websites and their requirements, and consequently built into each element from the beginning. For example, book and author relationships are core to not only AdLit but Colorín Colorado, Reading Rockets, and Start with a Book. These content types are implemented in a generalized method that will satisfy the needs of all the sites.
four air and space themed books in bookshelf style on AdLit site
Content-area Literacy Topics page, desktop layout
Content-area Literacy Topics page, mobile layout
The new site is an amazing leap forward over the old: appealing, inviting, accessible, seamlessly scalable, and extremely user-friendly. RDG has consistently delivered more than promised and through all the months of challenging work, they've been—from everything I've seen and heard—exceptionally resourceful in finding solutions and unfailingly easy to work with. I think as more educators and families start discovering the new AdLit, they will love what they see.
Noel Gunther
Vice President, Learning and Interactive Media