The International Youth Foundation (IYF) works around the world to ensure youth develop the leadership, technical, and life skills to earn a livelihood. Whether it’s landing a first job, growing a business, or driving social change, IYF believes every young person deserves the opportunity to realize his or her full potential.
By late 2014, IYF’s flagship website, www.iyfnet.org, had become dated from a technical and design perspective. Further, the organization had launched numerous microsites built in a variety of platforms (Wordpress, other Drupal instances and Blogger) that it was having to host and maintain. Most importantly, IYF had grown and evolved over the years and its website no longer accurately reflected the organization and its work.
To meet these and other project goals, the Brick Factory redesigned and redeveloped the International Youth Foundation website in Drupal 7.
About the project
IYF engaged the Brick Factory to redesign and redevelop www.iyfnet.org. The primary goals of the redesign were to:
- Create a modern new online brand identity that effectively told the story of the organization’s work.
- Highlight IYF publications and writings to establish thought leadership.
- Spotlight IYF’s various initiatives and partners around the world.
- Consolidate all web properties into a single Drupal instance.
- Pay down technical debt that IYF had accumulated over time.
- Ensure the site works well on all devices and screen resolutions.
Following is a breakdown of some key features of the redesign that helped IYF achieve these goals:
- The Where We Work section uses an interactive map to let visitors explore IYF’s work around the world.
- Searchable databases of IYF’s current and past initiatives and global network of partners allow visitors to gain a concrete understanding of the nature of the work.
- The IYF document library allows visitors to easily find the content they are looking for using powerful search filters.
- An interactive timeline tells the story of IYF accomplishments and growth by highlighting key events in the organization's history.
- The dynamic staff section that allows visitors to connect with the people that work at IYF.
- A mega menu system provides quick access to all site information and also highlights the latest content.
- The powerful overall site search allows for filtering by content type and a variety of taxonomies, making it easy to explore the site.
- A responsive design ensures the site looks as good on phones as it does on desktops and tablets.
Why Drupal was chosen
The previous version of www.iyfnet.org was in Drupal 6 so the organization had previous experience with Drupal. We decided to build the new site in Drupal 7 for a variety of reasons:
- Ease of content import. The legacy site had thousands of pages of historical content housed in Drupal 6. By staying in Drupal we were able to efficiently transition all content to the new Drupal 7 site.
- Drupal met all project goals and requirements. Most requirements could be achieved with Drupal core with an assist from a few widely used contributed modules.
- IYF’s preference was to stay in Drupal. IYF staff were already knew Drupal and had a desire to continue with the platform.
Technical Specifications
Drupal version:
Key modules/theme/distribution used:
Theme
We created a subtheme off of Mothership to help strip HTML from the default Drupal code. We also stripped out all JS/CSS from the frontend theme that we did not need to improve performance and to allow us to use a more recent version of jquery. For each main section of the site, we created a new page template file and send variables through custom modules when needed.
Context + Context Layout
This module allowed us to easily create new page layouts in the theme without writing custom code.
Display Suite
The site has many different types of content that are displayed in different ways. We used view modes to easily customize each case, and Display Suites adds powerful tools in customizing view modes. In cases where we needed to display highly custom html that wasn’t handled by default in Display Suite, we created code fields to handle this functionality.
Nodequeue
The homepage of the site features a grid that highlights content in a custom order. We used Nodequeue to provide IYF with an easy way to add and re-order content in this area.
Apache Solr
This was used to create custom filters to show on the site search page and on the document library page. We created custom facets for these pages and connected to our Solr server to index results.
WYSIWYG
The content editors needed a way to make simple html changes to the content (like bold, adding links, etc…). We integrated a WYSIWYG as that worked well for their needs.
