Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
By Amazee Labs on
Harte Research Institute (HRI) is dedicated to advancing the long-term sustainable use and conservation of the Gulf of Mexico. Its vision for an ecologically and economically sustainable Gulf is one passionately shared by senior leadership, research staff, and students alike.
HRI approached Amazee Labs with an aging website, one that no longer met its needs as an organization. Convoluted architecture made it very difficult for users to find information, rendering the site an ineffective communication tool. Researchers weren’t encouraged to publish new content, knowing it would be buried and likely go unrecognized. And in general, the site looked old and tired, inconsistent with an academic institution on the rise and seeking young talent.
With these problems in mind, and with the goal of building a long term solution, Amazee Labs redesigned and re-architected Harte’s online platform.
Why Drupal was chosen:
Scalability
Harte is a thriving institute, with aspirations to grow. Its work, influence, faculty, and student body are poised to flourish in the coming years. Drupal will easily and affordably scale with the university, accommodating new content and an expanding user base.
Easy Content Authoring
A simple yet dynamic content authoring experience is one of Drupal’s strengths. HRI administrators have total control of their website, including abilities to edit existing pages, publish entirely new pages, and thread content together with tags and taxonomies.
Flexible Content Architecture
HRI’s legacy site was convoluted, too small and too dependent on its original structure to serve content in a meaningful way. Its new site features versatile display modes, customizable menus, and scalable information architecture—all key to the long term success of the site and all made possible with Drupal.
Amazee Labs
With 10 years of Drupal experience, including early adoption of Drupal 8 and 30+ Drupal experts actively contributing to the open-source project, Amazee Labs is a global power player.
Describe the project (goals, requirements and outcome):
The HRI transformation is defined by three major efforts—architecture, search, and design.
1) Architecture
Unique to HRI is the Harte Model, a multidisciplinary way of working that integrates science with expertise in economics, policy and sociology. While its seven research departments do work independently on projects, they often work together on collaborations to solve problems holistically.
The improved information architecture is designed to visualize the Harte Model by showcasing departments, projects, and collaborations.
Research Departments
Each research department has its own landing page, accessible via the main menu. These landing pages serve the Departments, as a forum to showcase their research, activities, and people.
Using Drupal’s Views module, each landing page aggregates content specifically tagged to the department—people, news, events, projects, and collaborations.
While projects are typically tagged to just one department, collaborations can be tagged to, and display on, multiple department pages—the Harte Model in practice.
Challenge
Not all research departments are created equal, each has its own needs. While one department may focus on publishing new work, another might rely on the page to recruit prospective students. Some have more pictures, some have a smaller staff. A one-size-fits-all page design was challenging to achieve.
Rather than force uniformity, departments can choose which fields to publish and the design will adapt accordingly. No publications? No problem. Twenty pictures of field work? Plenty of room. The page accommodates every department—content rich or lean and mean.
Projects and Collaborations
In addition to navigating content via a research department landing page, users can also browse all projects and collaborations using the second main menu link, Our Work. Solr Search, and related modules, allow for content to be filtered by any combination of department, type (project or collaboration), and/or free text. Read more about search in section two.
Project pages are simple but efficient nodes, with reference links to their respective research department landing page and project lead node.
Collaboration pages are more robust. Much like the department landing pages, they prominently link to related content—people, related news, events, and most notably, the collaborating research departments. Collaboration pages again highlight the interconnectivity of departments and the Harte Model.
The Harte Model
A project leads to a research department, which links to a collaboration, which clicks through to a person, which returns to a project, and so on. There is no single point of entry and no dead ends when exploring content. HRI’s information architecture was guided by the Harte model, exemplifying that the whole is greater than the sum of its parts.
2) Search
It’s important that users find the information they seek, true for any website. HRI describes this as different people needing to get to different layers of the cake, a sentiment at the heart of the new search experience.
Directory pages do the heavy lifting. These pages allow users to intuitively filter content and narrow search results. Directory pages include Our Work, News, Events, People, and Resources.
Several modules work together to power these directory pages.
Search API
The Search API module provides a framework with which the various content types can be searched. It’s used to create custom search experiences, like the News page, which allows users to filter by taxonomy fields specific to that content type.
Search API Solr Search
A high-performance search engine with an Apache Solr backend is made possible with the Solr Search module. Users are able to filter through ten year’s worth of content in seconds.
Page Manager, Views, and Facets
Page Manager is responsible for the layout of the directory pages. The Views module displays the search results, handles sorting, and pagination. The Facets module allows users to combine filters and safeguards against searches that do not return results.
Custom module
Upon executing a search, users are shown what they searched for, in addition to the results—a breadcrumb, so the user can quickly modify their search, rather than starting over entirely. This functionality is achieved with a custom module, although work to include the feature in the Facets module is ongoing.
Challenge
Finding versions of Search API, Solr Search, and Facets that work together is tricky. Generally, a non-dev release of Search API and a dev release of Facets will do the job, although the issue queue might offer more specific advice.
Read more about how these search pages were built on the Amazee Labs blog. Brandon Williams’ (rocketeerbkw) post, The Search Experience for the Harte Research Institute, explains the Drupal technology in more detail.
3) Design
Web technologies evolve very quickly, week to week in some instances. Trends in web design can change in equally small amounts of time. A five-year-old website can appear ancient, and HRI’s legacy site was twice that age.
There are some design principles that withstand the ebb and flow of trend, principles that guided the design and implementation of this custom Drupal theme.
Typography
Body copy is set in Merriweather, a serif typeface known for being very readable on screens. It’s available in several weight and styles, making a good font around which to build.
Museo Sans is a versatile sans-serif counterpart, used in this case to set titles and headings apart from body copy.
A modular scale is in place to create a hierarchy of content on the pages. Simply put, adjusting font sizes and weights communicates visually the order and grouping of information.
Color
HRI’s collegiate color palette is based in the blues of its parent company, Texas A&M University Corpus Christi. Shades of blue draw attention to important information, text links, and headings. Yellow is used sparingly, but effectively, to call the user to action. White and light gray pages place importance on legibility and beautiful imagery.
Responsive Design
HRI’s custom Drupal theme is optimized for any and all screen sizes, from a large desktop monitor to a pocket-sized smartphone. Responsive design is especially important to a university whose goal it is to attract young, talented students—a generation raised on phones and tablets.
Project Management
The Harte Research Institute’s new website launched in November 2016, totaling 1,220 hours, start to finish. The work was done in two-week sprints, in order of priority, as part of Amazee Labs’ agile approach to development.
HRI is hosted by amazee.io, a dedicated Drupal hosting solution built for developers, by developers. Amazee Labs Austin continues to maintain the site, and works with the institute on several other projects, including gulfbase.org, a searchable Gulf of Mexico database.
The new site has been met with praise from the Drupal community as well as the client, whose stakeholders are quite pleased with the end product.
Client Testimonial
The Harte Research Institute for Gulf of Mexico Studies hired Amazee Labs, Austin to conduct a complete website redesign of our 10-year-old website. Our institutional model is based on interdisciplinary research and we place a high emphasis on collaboration and integration, something that Amazee immediately understood and incorporated into our website redesign.
We requested a sleek, graphic redesign that would give us the ability to scale-down an old website that had become overloaded with a decade of content and was difficult to navigate and update. The Drupal 8 site Amazee has built for us allows us to easily display and sort our constantly evolving news, researchers and research projects and show the connections that exist between them. We are better able to concisely tell our story and showcase some of the prominent, collaborative research we do in a way that is visually appealing and easy for the public to read and connect with. The team had a great understanding of our institutional brand and mission and how to incorporate that into the site.
It’s easy to become closed off in academia, but as a research institute dedicated to conservation of the Gulf of Mexico it is important to our mission to remain open and accessible to the public we serve. Having a well-designed, easy to navigate and easy to use website is a key part of that strategy. We’re glad we came to Amazee with this project and have received positive feedback internally and from like institutions about our new site. Thanks Amazee!
—Nikki Buskey, Communications Manager, Harte Research Institute
Technical specifications
Drupal version:
Drupal 8.x
Key modules/theme/distribution used:
Why these modules/theme/distribution were chosen:
Modules key to the new HRI website are related to search and outlined above in section two. Search API Solr Search and related modules serve as the backbone for how users find content, one of the most important aspects of the new site.
Amazee Labs prides itself on taking projects to the next level, often accomplished in the last 10% of the effort. In that regard, the following modules are key to our success.
Paragraphs
Rather than shackling Editors to a basic text editor, we often equip our clients with the power of the Paragraphs module. In Harte’s case, editors can adorn the About page with additional timeline cards, or Gulf statistics.
Chosen
Chosen is a module that makes select elements more usable. We took advantage of Chosen to style filters on the directory pages, improving their usability, and their visual integration into the custom Drupal theme.
Rabbit Hole
This module prevents specified content from displaying on its own page. For example, a Resource teaser shows up in search results but does not click-through to a node, by design. Additionally, search engines will not index content that’s been rabbit-holed.
Search API Exclude Entity
This module allows for certain nodes or entities to be excluded from search. Custom 404 and 503 pages are such pages on Harte.
Varnish
Varnish simply makes the site run faster. The module serves anonymous users cached content which improves site performance, especially in high traffic. When Drupal’s cache is cleared, the Varnish cache is also cleared, allowing the client to publish new content, or edit existing content, and ensure the changes take effect immediately.
Community contributions:
Alex Tkachev (Leksat) of Amazee Labs Zürich worked to make Search API, Facets, Views and Page Manager work together on one page. Subsequently, he contributed views block display support to the latest version of Facets.
Brandon Williams (rocketeerbkw) contributed to the Widget dropdown - select issue by adding options, including checkboxes and dropdowns, to Facets.
As part of his effort to prevent content from one index being included in the results from another index, Brandon also helped fix the Make field names and IDs editable issue.
Organizations involved:
Project team:
The Harte project was completed by the Amazee Labs team in Austin, Texas. Alex Tkachev (Leksat) of the Amazee Labs Zürich team assisted with custom module development. At the time of completion, Amazee Labs Austin was a team of five.
Project Manager: Stephanie El-Hajj
Design Lead: Andrew McClintock
Tech Lead: Kathryn McClintock
Backend Developer: Brandon Williams
Developer: Maria Comas
Amazee Labs Austin is open for business and hiring.
Sectors:
Education
