Drupal CMS Development

Project Overview

Drupal development for Rutgers University. This project demonstrates my expertise in Drupal CMS development, accessibility compliance, and creating user-centered experiences for educational institutions.

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

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

Live Demo

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.

Project Gallery

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

Share this project

Like this project? Share it with your network!

• Share on Facebook
• Share on Twitter
• Share on LinkedIn