Riley Skipper

Case study

Drupal CMS Development

Drupal 9 and 10 website development for Rutgers University with custom theming and accessibility compliance.

The challenge

Content teams needed a CMS that supported publishing, accessibility, and editorial control at scale.

What I delivered

Drupal websites with structured templates, WCAG-aligned components, and workflows that editors can use with confidence.

Project Overview

This project covers Drupal CMS development for Rutgers University. The work includes custom theming, accessibility compliance, and user-centered design for educational websites.

Homepage featuring the tagline 'Convenient. Cost-Effective. Connected. That's Rutgers Statewide' with an engaging hero image and campus location cards below.

Live Demo

Rutgers Statewide

Explore the an example of the templating system built for this website.

View Live Demo

Division of Lifelong Learning & Innovation

A flagship Drupal site for Rutgers Division of Lifelong Learning and Innovation. The site includes program pathways, events, FAQs, and templates that editors can maintain over time.

Division landing page built in Drupal with flexible content sections, event listings, and editor-friendly templates across lifelong learning programs.

Development Process

This role required deep understanding of both Drupal’s content management capabilities and the specific needs of educational institutions. My development approach included:

  • Custom Theming: Codeveloping a Drupal subtheme based on University branding using HTML, Bootstrap 4 & 5, CSS, Twig, JavaScript, and PHP.
  • Content Strategy: Structured content types based on departmental needs and usage.
  • Wireframing and UX Design: Building wireframes, new web designs, and user flows to improve experience and interactions in collaboration with departmental admins.
  • Accessibility Compliance: WCAG 2.1 AA standards implemented through custom theming, twig templating, and custom error handling.
  • Accessibility Management: Monthly accessibility reporting, bug fixes, and resolutions through new coding practices, module updates, and editor awareness of ADA guidelines.
  • Responsive Design: Mobile-first approach for students accessing organization sites on various devices.
  • Module Maintenence: Routine module updates, bug and error resolution, and module conflict resolution.

Key Features

  • Content Architecture: Custom content types based on departmental needs.
  • User Roles & Permissions: Granular access control for different user types and editor roles.
  • Views & Displays: Dynamic content presentation with contextual filtering.
  • Form Management: Custom webforms, email handling, and submission notifications.
  • Media Management: Optimized image and document handling.

Accessibility & Compliance

  • WCAG 2.1 AA Standards: Full compliance with accessibility guidelines.
  • Screen Reader Support: Proper ARIA labels and semantic HTML.
  • Keyboard Navigation: Complete keyboard accessibility.
  • Color Contrast: High contrast ratios for better readability.
  • Alt Text: Comprehensive image descriptions for all media.

Our templates were built to be flexible enough to allow editors with no prior knowledge to add, edit, and style content while adhering to a similar look, feel, and theme and maintain accessibility. Click any image to view it in full size.

Degree Programs page featuring icon-based cards in a responsive grid layout with clear visual hierarchy. Built using complex Views, Bootstrap 5 tabs, and Jquery for navigating tab panes.

Events page with robust filtering by category and search functionality, built using Views.

Interactive campus location cards showcasing another View of Degree Programs. Above features a custom Hero template built using Bootstrap 5 and Twig, allowing editors to edit the hero of any page.

FAQs custom template built using Bootstrap 5 and Twig, allowing editors to add Faq sections to any page.

Custom content template for editors to add text and image in a two column layout. Freedom to stlye font, color, buttons, and images while maintaining accessibility and University branding.

This website was built as multiple websites built in 1. This image features a double menu with the top menu being the overarcing school menu, and the sub-menu allowing students to choose their school of choice and switching the site's top menu to school-specific navigation.

A second example of the flexibility of the two column layout template.

Other templates include cover images with text overays, and the flexibility of the templates- featuring the FAQ template used inside of a View.

Integrated calendar system with event management, filtering capabilities, and a table of contents with ancors to allow users to jump to content.

Another website example of the same templating system, used by a different website with a uniquely different styling.