Joe Tower
Back to portfolio
NNPHI website screenshot

National Network of Public Health Institutes

On this project, I worked on a team of three engineers at Pixo to implement a redesign of the National Network of Public Health Institutes (NNPHI) website. The redesign was created by the design team at Page33 and implemented in WordPress. The WordPress install features an MVC architecture with a custom-built component library and design system. My work on this project included implementing the new design in WordPress, creating new components for the design system, and improving accessibility across the site.

Topic Blocks

NNPHI Topic Block component implementation

This component was fully authored by me. One of the unique design challenges was the use of both angled imagery and overlaid parallelogram shapes. I implemented this component using a combination of CSS clip-path and absolute positioning to achieve the desired visual effect while maintaining accessibility and responsiveness.

NNPHI Map Carousel component implementation

This component was also fully authored by me. The design called for a map component that would "lock" into place on scroll, then allow you to scroll content overlaid on the map. To simplify things a bit and keep accessibility firmly in mind, I opted to implement a 2-slide carousel to communicate the primary information. The background SVG map that has variable colors based on the active carousel item (fade in the colored-in regions). I implemented this component using JavaScript (glide.js library) to control the carousel functionality (play/pause button + autoplay and disabling autoplay if reduced-motion is present) and CSS variables to dynamically change the colors of the background SVG map based on the active item.

Accessibility Improvements

NNPHI main menu accessibility improvements

Refined the drop-down menu to be keyboard-friendly and screen reader accessible. This included:

  • Tab-friendly menu items
  • When using tab keyboard navigation, each drop-down menu can be traversed, closed with the ESC key (last parent item gets focus)
  • Menus have proper aria attributes to ensure screen readers properly communicate menu states
Back to portfolio