Nimble, efficient, and awfully complicated: Building a website for the Office of Technology, Part 2

This blog post is based on presentations that we gave at the AAMC Group on Information Resources in December 2022 and the Building Bridges conference in August 2022.

Did you miss Part 1? Read it here to learn why we built the website and the timeline for the project.

Requirements

The goal for this project was to have a site that was dynamic, modular, and consistent across 150+ pages.

With our backgrounds in web development and publishing, we knew how vital it would be to have efficiency built into every aspect of the site—making manual changes over more than a handful of pages would quickly spiral out of control. Furthermore, we built in standards to reduce frequent decision-making, so we could get the work done quickly no matter who was working on the site. It was important to be able to apply the same styles to text (headers, paragraphs, call to action), images, and widgets like the table of contents.

We also had to be thoughtful about being manual vs. dynamic. It wasn’t practical to create each page from scratch (manually). We needed the ability to tell a page when to have certain elements (dynamic), like a table of contents or a large image at the top with a title. We needed the ability to create page templates.

Our tools

  • WordPress + Elementor

    If you haven't heard of WordPress, here's the short version. WordPress is a website builder—also known as a CMS (content management system)—that lets non-developers create and add content to web pages. A bonus: WordPress has added a feature in the last few years called a multisite, which gives us the ability to manage multiple sites under one admin panel.

    Elementor is an add-on to WordPress. It gives the user the ability to create a more dynamic website using templates' global styling for the entire site, and allows the user to decide when to use a particular template. Elementor is a page builder, and it works in the WordPress environment to create more consistent and dynamic templates.

  • Templates

    We have mentioned templates a few times—a template is a helpful tool that saves time when creating or editing documents. Instead of designing pages from scratch, you can use templates to create pre-designed pages fast and ensure a consistent look and feel across your website. A template is reusable—think of a shirt pattern. Multiple shirts can be created from the same pattern to maintain consistency.

    How does Elementor do this? They have the Theme Builder feature, where we can design our templates and set display conditions. A display condition is a condition that has to be met in order for something to happen.

Let's use a real world example.

You go to the post office to pick up a package in your name. In order to get the package, you have to show some sort of ID to prove your identity. If your mom goes in to get the package, she won't be able to, because she doesn't meet the post office's condition—she needs to be you.

  • CSS (Cascading Style Sheets)

    We used CSS to tell elements on the page to look a certain way via color, font size, formatting, etc.

    Partway through the production process, we learned that WSU was rebranding—luckily, we had built solid style sheets and could update the templates with the new fonts and colors. A good test of our setup!

  • Plugins and taxonomies

    We needed additional functionality that we were not able to achieve with WordPress and Elementor, so we found plugins to help bridge the gap. A WordPress plugin is a piece of software that “plugs into” a WordPress site. Plugins add new functionality or extend existing functionality on a site.

We needed to create a more complex way of categorizing and sorting our pages.

Taxonomies give us a way to create lists of items or content that we want to group together—think of them as buckets. When you looked up something up on a clothing website, they use what is called a taxonomy (a way of naming, describing, and classifying content on a website) to help you find what you’re looking for. The top-level taxonomy might be shoes, and terms within that taxonomy are things like sneakers, pumps, sandals, etc. An item or content can belong to more than one taxonomy—sneakers would fall under the shoe taxonomy, and they could also fall under another taxonomy such as gender or sale.

Guess what? This can be done, using a plugin! We installed Custom Post Type UI, which allows us to create taxonomies and terms that belong to them (think back to shoe taxonomy terms: sandals, running shoes, sneakers).

Without getting too much in depth, Elementor has dynamic content, which is used in templates. For example, let’s say you have a page with a title. In order to have the title change for each new page, you need the ability to make that title dynamic. We found a plugin to achieve this: Advanced Custom Fields, which allows us to adjust the content for each page, such as the title, using simple form fields. This is great because it works hand in hand with our templates and allows us to use that same template over and over without changing the template or creating a new one.

  • Project management

    Asana is our project-management tool—it captures the whole process from content production to making a page live and tracking changes and comments over the collective efforts of an 11-member team, so the processes don't need to live in anyone’s head.

    Creating the website was a huge collaborative process that involved every member of our team. It required a lot of patience through redesigns and restructuring. We adjusted our taxonomies, page layouts, etc., and we needed to track our work along with the feedback.

More To Explore